hexo+github部署个人博客

hexo+github部署个人博客

前期准备

1. 安装git git的下载地址
2. 安装node.js node.js
3. 注册github账号，创建个人仓库（仓库名：github名称.github.io）

hexo搭建个人博客

1. 用来检查git和node是否安装成功（hexo需要使用nodebkys.world.js的npm命令）

node -v
npm -v
git --version

正确安装node.js之后显示如下,如不成功，再次检查配置node.js的环境变量

2. 使用阿里的国内镜像进行加速

npm config set registry https://registry.npm.taobao.org

3. 打开cmd安装hexo

npm install hexo-cli -g
hexo -v  # 检查hexo是否安装成功

4. 初始化文件夹（ 以下操作均在博客文件夹完成）

• 在bkysblog文件夹下右击git bash here
  

hexo init bkysblog

• node_modules：依赖包
• public：存放生成的页面
• scaffolds：生成文章的模板
• source：用来存放文章
• themes：主题
• _config.yml：博客的配置文件

5. 生成博客

hexo g  # 生成静态页面
hexo s  # 打开本地服务器

• 生成后通过 http://localhost:4000 进行预览
  HEXO官网寻找自己喜欢的主题，将其放在D:\bkysblog\theme目录下并且修改博客目录下的_config.yml文件，即可完成个性化定制

6. 修改_config.yml文件进行配置

theme: hexo-theme-matery  # 这里写上自己theme目录下的主题文件名

新建GitHub仓库

1. 进入GitHub官网,没有账号的先注册账号

2. 进入之后，右上角+号，New repository

3. Repository name要加.github.io后缀（bkystop.github.io），README前面打勾

4. 生成ssh添加到github

git config --global user.name "注册GitHub用户名"
git config --global user.email "注册GitHub的邮箱"
git config user.name  # 查看自己的用户名
git config user.email  # 查看自己的邮箱
ssh-keygen -t rsa -C "注册GitHub的邮箱"
cat ~/.ssh/id_rsa.pub  # 查看生成的密钥

5. 打开gitgub，点击图像下的settings，点击ssh and GPG keys，新建一个ssh，把id_rsa.pub里面的信息复制进去。

ssh -T git@github.com

出现Hi bkystop! You’ve successfully authenticated, but GitHub does not provide shell access.类似字样既为完成。

将个人博客部署到Git pages

1… 配置博客目录下的_config.yml文件(将页面拉到最下面）

deploy:
  type: git
  repository: git@github.com:bkystop/bkystop.github.io.git
  branch: master

2. 安装deploy-git，安装后与才可以用命令部署到github

npm install hexo-deployer-git --save

3. 提交到github

hexo clean  # 清理之前生成的东西
hexo g  # hexo generate
hexo d  # hexo deploy

第一次提交需要输入github的username和password

写文章和发布文章

1. 在博客目录下右击git bash here，安装扩展npm i hexo-deployer-git

npm i hexo-deployer-git

2. 新建一篇文章

hexo new post "article title"

然后进入D:\bkysblog\source_posts目录下，可以发现多了一个.md文章。

编写markdown可以使用Typora软件

Hexo优化

• node_modules是node.js的各种库
• public是文章和新页面的初始配置
• soure里面存放文章，各类页面，图片
• themes 用于存放主题文件
• hexo的主题有很多，我选择的是matery，官方提供junkexuanzeThemes | Hexo

修改博客目录下的_config.yml配置

title: bkys的客栈  # 网站标题
subtitle: 不轲一逝的客栈  ## 网站副标题
description: ''  # 网站描述
keywords:    # 网站的关键词
author: bkys  # 您的名字
language: zh-CN  # 网站使用语言
timezone: ''  # 网站时区，中国大陆可选 Asia

theme: hexo-theme-matery  # 修改主题后记得修改这里

1. 新建categories分页（展示所有分类）

• 新建 /source/categories/index.md目录文件，编辑index.md

---
title: categories
date: 2022-01-01 18:00:00
type: "categories"
layout: "categories"
---

2. 新建标签tags页(展示所有标签)

• 新建 /source/tags/index.md目录文件，编辑index.md

---
title: tags
date: 2022-01-01 18:00:00
type: "tags"
layout: "tags"
---

3. 新建关于我about页（展示个人博客信息）

• 新建 /source/about/index.md目录文件，编辑index.md

---
title: about
date: 2022-01-01 18:00:00
type: "about"
layout: "about"
---

4. 新建留言板contact页（展示个人博客信息）

• 新建 /source/contact/index.md目录文件，编辑index.md

---
title: contact
date: 2022-01-01 18:00:00
type: "contact"
layout: "contact"
---

5. 新建友情链接friends页

• 新建 /source/friends/index.md目录文件，编辑index.md

---
title: friends
date: 2012-01-01 18:00:00
type: "friends"
layout: "friends"
---

• 在source目录下新建 _data目录，在 _data 目录中新建 friends.json 文件，文件内容如下所示：

[{
    "avatar": "http://image.luokangyuan.com/4027734.jpeg",
    "name": "闪烁之狐",
    "introduction": "编程界大佬，闪烁之狐本尊，不懂的都可以请教大佬",
    "url": "https://blinkfox.github.io/",
    "title": "前去学习"
}]

这里的信息日后可自行修改

6. 搜索

安装hexo插件

npm install hexo-generator-search --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置:

search:
  path: search.xml
  field: post

7. 添加评论模块

• matery主题已经提供了常用评论平台的配置, 进入D:\bkysblog\themes\hexo-theme-matery目录下的_config.yml文件进行配置(以下以畅言云平台为例，其余可自行上网搜索)

changyan:
  enable: true
  appId: 
  conf: 

进入http://changyan.kuaizhan.com/ 注册，将app id，和app secret分别填入

8. 修改打赏的二维码图

主题文件的 source/medias/reward文件中，添加自己的图片

reward:
  enable: true
  title: 你的赏识是我前进的动力
  wechat: /medias/bkyswechat.png
  alipay: /medias/bkysalipay.png  # 添加自己的图片路径

9. 修改图像，修改QQ号，github链接等私人信息均在D:\bkysblog\themes\hexo-theme-matery目录下的_config.yml文件进行配置，可自行完成
   更多配置可参考官方文档配置 | Hexo 。

matery主题美化

1. 添加404页面

• 在博客目录下的source文件夹新建404.md文件，编辑404.md

---
title: 404
date: 2020-02-23 19:37:07
type: "404"
layout: "404"
description: "我崩溃了！找不到你想要的页面了"
---

然后在layout目录下新建404.ejs文件

<style type="text/css">
    /* don't remove. */
    .about-cover {
        height: 90.2vh;
    }
</style>
<div class="bg-cover pd-header about-cover">
    <div class="container">
        <div class="row">
            <div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2">
                <div class="brand">
                    <div class="title center-align">
                        404
                    </div>
                    <div class="description center-align">
                        <%= page.description %>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 每天切换 banner 图.  Switch banner image every day.
    $('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');
</script>

2. 添加emoji表情支持

• 安装插件hexo-filter-github -emojis

npm install hexo-filter-github-emojis --save

• 在博客目录下的 _config.yml文件新增以下配置

githubEmojis:
  enable: true
  className: github-emoji
  inject: true
  styles:
  customEmojis:

3. 代码高亮

• 安装插件hexo-prism-plugin

npm i -S hexo-prism-plugin

• 在博客目录下的 _config.yml文件关闭原有配置

highlight:			#代码块的设置
  enable: false			#开启代码块高亮
  line_number: true		#如果未指定语言，则启用自动检测
  auto_detect: false		#显示行数
  tab_replace: ''		#用n个空格替换tabs；如果值为空，则不会替换tabs
  wrap: true
  hljs: false

• 在博客目录下的 _config.yml文件新增以下配置

# 代码高亮
prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'
  line_number: false    # default false
  custom_css:

4. 文章字数统计

• 安装插件hexo-wordcount

npm i --save hexo-wordcount

• 在主题下的 _config.yml 文件 ，更改以下内容

postInfo:
  date: true # 发布日期
  update: true # 更新日期
  wordCount: true # 文章字数统计
  totalCount: false # 站点总文章字数
  min2read: false # 文章阅读时长
  readCount: false # 文章阅读次数

5. 添加RSS订阅

• 安装插件hexo-generator-feed

npm install hexo-generator-feed --save

• 在博客目录下的 _config.yml文件新增以下配置

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date

6. 文章Front-matter介绍

配置	默认值	描述
title	Markdown 的文件标题	文章标题
date	文件创建时的日期时间	发布时间
author	博客目录下 _config.yml 中的 author	文章作者
img	featureImages 中的某个值	文章特征图
top	true	推荐文章（置顶） top 值为 true，首页推荐文章
tags	无	文章标签，一篇文章可以多个标签
categories	无	文章分类
password	无	文章阅读密码 ， 使用前在主题的 config.yml 中激活 verifyPassword 选项
categories	无	文章分类 ， 建议一篇文章一个分类

此外还有cover ，coverImg ，toc ，mathjax ，summary ，reprintPolicy 均可自行配置

• 建议更改博客目录下的scaffolds下的post.md修改同意模板，以后每次hexo new均使用此模板

title: {{ title }}
date: {{ date }}
img: 
tags:
categories: 
top: 
passworld:
summary

此文件根据自己需求配置

7. 修改主题中的图片

• 推荐大家使用图床，PicGo+GitHub图床，同时可以避免部分情况下hexo clean清除本地新加入的图片。
• PicGo+GitHub图床搭配typora填入图片页十分方便

PicGo+GitHub搭建图床

• 记得安装hexo-asset-image插件，否则md文档中的img属性无法使用

npm install hexo-asset-image --save