我的Hexo博客搭建过程

一、概述

个人博客：https://brandonvno.github.io/
此教程记录了我在Win10上搭建Hexo博客的整个流程，主题是使用了Next，奉上文档以及参考链接：
Hexo文档
Next文档

---

二、 基础准备

1. 准备一个Github账号：

0v0

2. Git安装与配置：

Git安装自不必多说，简单提一下Git用SSH登录Github：

• 首先打开CMD，设置你的账号和邮箱，输入：
  git config --global user.name "yourname"
git config --global user.email "youremail"
  其中"yourname"是你的github账号，"youremail"是你的github账号邮箱

• 可以用以下两条命令检查输入
  git config user.name
git config user.email

• 然后用以下命令创建SSH秘钥
  ssh-keygen -t rsa -C "youremail"
  后续连敲3次回车，不需要任何输入。
  完成之后会告诉你生成了.ssh文件夹，找到文件夹，其中id_rsa是秘钥，id_rsa.pub是公钥，用文本编辑器打开id_rsa.pub，复制所有内容。

• 添加公钥到Github
  登录Github，右上角 头像->Settings -> SSH and GPG keys -> New SSH key。 把公钥粘贴到key中，填好title并点击Add SSH key。

• 回到CMD，输入命令
  ssh -T git@github.com
  选yes，提示成功。

3. 安装Nodejs

• 下载网址
  nodejs.org
  选LTS就好了，下载完成后安装。

• 安装完成有两个组件，nodejs和npm，可以使用以下命令查看版本
  node -v
npm -v

• 用npm安装cnpm淘宝镜像源
  npm install -g cnpm --registry=https://registry.npm.taobao.org
  用以下命令查看版本
  cnpm -v
  安装完成以后就都是用cnpm下载了，国内用npm速度你懂的

4. 安装博客框架Hexo

• 安装命令
  cnpm install -g hexo-cli

• 查看版本
  hexo -v

---

三、 搭建Hexo博客

1. Hexo所有常用命令

https://hexo.io/zh-cn/docs/commands

2. 新建Blog文件夹

以后如果有安装错误，可以直接删掉Blog文件夹，从 三、重新开始

3. CMD定位到Blog文件夹

比如我这里是D:\Blog，那么我的命令是
d: blog

4. 初始化Hexo

hexo init
耐心等待初始化完成

5. 第一次启动博客

hexo s
s是server的简写，命令执行完之后，打开浏览器，输入
localhost:4000
即可进入本地服务器中的博客。 结束本地服务器按Ctrl+C。

6. 创建博客文章

hexo n "我的第一篇博客文章"
n是new的简写，创建完成后文章会放到source/_posts文件夹下面，md文件。

markdown语法自行学习，推荐使用sublime text3写markdown，宇宙第一文本编辑器。

打开文件之后，开头的部分内容官方称为Font-matter，这里你可以设定文章标题，文章创建更新时间，标签，分类等等，具体请查阅
https://hexo.io/zh-cn/docs/front-matter

另外这里提一个坑，Next主题的文章目录索引是根据markdown的#多少来实现的，举例来说，如果文章中第一个标题是##，那么所有的##都是一级目录索引，所有的###都是二级目录索引，以此类推。不能越级！！！，也就是说，##下一级标题必须是###，否则就会出现 2.0.1这种标题，甚至2.0.0.1，非常丑。而且如果你越级了，还在某一级标题的内容里面使用列表来排版，文章目录索引会出现奇怪的bug，虽然在文章里看起来一切正常。Next的目录解析就是这样的，so，最好不要越级使用标题。

7. 博客撰写流程

• 如6所示，new一个博客文章

• 编辑md文件

• CMD切到Blog文件夹下

• 清理（必要时清理，不必每次都清理）
  hexo cl

• 生成
  hexo g

• 启动本地服务器
  hexo s

• 浏览器打开localhost：4000 查看效果

8. 远程部署到Github

• 登录Github，新建一个仓库
  右上角+号 -> new repository

• 项目命名必须符合要求
  必须是"yourname.github.io"，比如我的是"brandonvno.github.io"
  描述写一下，选public，然后点Create Repository

• 为Hexo安装Github部署插件
  CMD切到Blog，输入命令
  cnpm install --save hexo-deployer-git
  警告不用管

• 编辑Hexo全局设置文件_config.yml
  打开Blog下的_config.yml，翻到最后，找到deploy，设置参考如下

deploy:
type: git
repo: https://github.com/brandonvno/yourname.github.io.git
branch: master

yourname改成你的Github昵称，下同理。修改完保存。

• 部署到Github
  hexo d
  d是deploy简写。
  这个过程就是使用你Git中SSH关联的账号往你刚刚新建的仓库中push文件。
  如果你的GIt没用SSH的话，这里会让你登陆，而且如果你的Git关联的Github账号和你的仓库所有者账号不一样的话，你就会惊奇的发现：我的仓库怎么不是我push的 Σ(っ°Д°;)っ？？？
  等待部署完成之后，打开yourname.github.io，即可查看效果。
  通常部署完成之后要等待一段时间，一些效果比如插件才会正常显示。

---

四、 主题设置

Hexo主题一览：https://hexo.io/themes/
旧版Next文档：http://theme-next.iissnan.com/
旧版Next地址：https://github.com/iissnan/hexo-theme-next
新版Next文档：https://theme-next.org/docs/
新版Next地址：https://github.com/theme-next/hexo-theme-next
本博客使用的主题是新版Next，有四种样式，集成了很多第三方功能，十分方便。另外新版文档内容不多，我是参考旧文档搭建的。
如果你不想用Next，那么只需看一下如何安装主题即可，其它功能自行研究，推荐另一个主题：yilia。

以下过程会涉及到两个配置文件，一个是位于Blog文件夹下的Hexo全局配置文件_config.yml，另一个是位于Blog/themes/Next 下的主题配置文件_config.yml，下面就分别称全局配置文件和主题配置文件

1. 安装主题

• CMD切换到Blog文件夹，输入命令
  git clone https://github.com/theme-next/hexo-theme-next.git themes/next
  这个命令执行过程大概如下：现在themes下新建next文件夹，然后将主题克隆到此文件夹下

• 配置Hexo全局设置文件_config.yml
  找到theme字段，默认是landscape，改成next。
  注意如果你的主题文件夹名字改了，这里也要相应的改一下。

• 启动本地服务器查看效果

2. Next主题样式切换

打开主题配置文件，搜索scheme settings，这里有四种样式，其中三个被注释掉了，选择你喜欢的样式即可。

3. 设置语言

打开next文件夹下面的language，找到对应的语言，打开全局配置文件，搜索language，将你想设置的语言文件名填上即可。

4. 菜单栏导航设置

打开主题配置文件，搜索Menu Setting，默认情况下是只有主页和归档栏没有被注释，选择你想要在导航栏显示的内容将注释去掉即可。
同事你也可以打开上一步提到的语言文件，打开即可看到对应的翻译。
这样配置之后，只是打开了这个选项，而选项链接对应的页面还需要手动创建。下面介绍了标签和分类页面的创建方式。

5. 添加标签页面

• CMD定位到Blog文件夹下，输入以下命令创建标签页面
  hexo new page tags

• 打开Blog/source/tags/index.md
  在data下面添加如下内容
  type: "tags"
  确保第4步开启了标签选项，启动本地服务器后，点击菜单栏标签选项即可跳转到标签页。

-在博客文章的Font-matter部分添加自定义标签，比如

tags:
 - Testing
 - Another Tag

即可在标签页看到对应的标签

6. 添加分类页面

• CMD定位到Blog文件夹下，输入以下命令创建分类页面
  hexo new page categories

• 打开Blog/source/tags/index.md
  在data下面添加如下内容
  type: "categories"
  确保第4步开启了分类选项，启动本地服务器后，点击菜单栏分类选项即可跳转到分类页。

-在博客文章的Font-matter部分添加自定义分类，比如

categories: 
 - Testing

7. 分类和标签的区别

引用Hexo文档中的两句话:

在其他系统中，分类和标签听起来很接近，但是在 Hexo 中两者有着明显的差别：分类具有顺序性和层次性，也就是说 Foo, Bar 不等于 Bar, Foo；而标签没有顺序和层次。

Hexo不支持指定多个同级分类。下面的指定方法：

categories:
- Diary
- Life

会使分类Life成为Diary的子分类，而不是并列分类。因此，有必要为您的文章选择尽可能准确的分类。

原文链接：https://hexo.io/zh-cn/docs/front-matter

8. 侧栏部分设置

打开主题配置文件，搜索Sidebar Settings

• 个人社交链接：
  找到social字段，将自己想要显示的社交平台注释删掉，然后写入自己的社交平台地址即可

• 友情链接
  找到links字段，将自己想要显示的内容写入即可，格式：
  title: https://something

• 头像
  找到avata字段，注释文档写的很清楚了，我这里翻译一下：
  放在next/source/images文件夹下，url字段填/images/avatar.gif
  放在Blog/source/uploads文件夹下，url字段填/uploads/avatar.gif

9. 作者昵称、网站标题、副标题、描述等

打开全局配置文件，在开头Site内容块内修改对应内容即可

10. 打赏功能

打开主题配置文件，搜索Reward，把enable值设为true即可打开，comment填你想说的话。
打赏功能只有在具体文章里才会显示

11. 站点统计

Next写好了各种各样的站点统计，有需要用leancloud实现的，但是需要实名注册，比较麻烦，我是使用不蒜子，修改几个参数即可，简单方便。

• 不蒜子
  打开主题配置文件，搜索Statistics and Analytics即可看到统计板块。
  直接搜索busuanzi即可看到不蒜子设置代码。想要显示的内容对应字段改为true即可。

• 百度统计
  另外也可以使用谷歌统计、百度统计、腾讯统计等，这里简单介绍下百度统计。
  登录百度统计，一番折腾之后，定位到站点代码获取页面，大概内容如下

<script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?xxxxxxxxxxxxxxxxxxxxxxxxxx";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>

打开主题配置文件，找到baidu_analytics字段，将xxxxxxxx对应的内容填上即可

12. 评论系统

打开主题配置文件，搜索Comments and Widgets即可看到Hexo支持的评论系统。

介绍一下Gitalk，基于github的评论系统。

• 首先在Comments and Widgets下面找到Gitalk字段
  enable改为true
  github_id填你的昵称
  repo填你自己的远程部署项目，如"yourname.github.io"
  admin_user填你自己。
  client_id和client_secret需要到Github上去创建。

• 在Github创建Application
  打开https://github.com/settings/applications/new
  各项填好之后点注册，然后将id和secret拷贝到上一步的位置
  生成、启动本地服务器，查看效果，完成。

• 再介绍一下来必力评论系统：
  官网注册：https://www.livere.com/
  安装免费版，设置你的个人博客地址，获取data-uid，打开主题配置文件，搜索livere_uid，填上你的uid，搞定。
  参考：前辈的博文

13. 搜索系统

打开主题配置文件，搜索Search Services即可看到所有支持的搜索系统，我使用的是local_search
安装文档：https://github.com/theme-next/hexo-generator-searchdb
讲的很清楚了，注意的是安装完插件之后记得hexo g一下，否则找不到search.xml
找到local_search字段，对应的字段填好就完事了。
设置好之后启动本地服务器可以在菜单栏看到一个小小的搜索，点开弹出一个大大的弹框。

14. RSS

什么是RSS？我就不班门弄斧了=。=
配置RSS需要安装一个插件，安装文档：https://github.com/hexojs/hexo-generator-feed
讲的很清楚了，注意的是安装完插件之后记得hexo g一下，否则找不到atom.xml
至于主题配置文件里的rss字段，注释讲可以留空。
配置完之后启动本地服务器，如果左侧导航栏出现RSS，点击之后进入到一个写满HTML代码的页面，说明安装成功了。
可以自行安装一个RSS阅读器订阅一下，我用的是irreader。

15. 动画

打开主题配置文件，搜索Animation Settings可以看到支持的动画。
motion是刚进入博客时各个板块位移的动画，考虑加载速度可以选择关闭
three需要安装第三方插件：https://github.com/theme-next/theme-next-three
canvas_net同样也需要安装，但是根据注释的地址安装完之后并没有卵用= =，感兴趣的可以自己试试。

16. 国内外分流以及被百度引擎收录

留个坑，日后有时间再研究
参考：https://blog.csdn.net/sinat_37781304/article/details/82729029

---

五、 将博客源文件上传到Github

此部分内容为转载，非原创。
原文：https://blog.csdn.net/sinat_37781304/article/details/82729029

机制：由于hexo d上传部署到github的其实是hexo编译后的文件，是用来生成网页的，不包含源文件，其他文件 ，包括我们写在source 里面的，和配置文件，主题文件，都没有上传到github

所以可以利用git的分支管理，将源文件上传到github的另一个分支即可。
首先，先在github上新建一个hexo分支，然后在这个仓库的settings中，选择默认分支为hexo分支（这样每次同步的时候就不用指定分支，比较方便）。
然后使用sourceTree将仓库克隆到本地，把除了.git的全部内容都删除掉。把之前我们写的博客源文件全部复制过来，除了.deploy_git。这里应该说一句，复制过来的源文件应该有一个.gitignore，用来忽略一些不需要的文件，如果没有的话，自己新建一个，在里面写上如下内容，表示这些类型文件不需要同步

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/

注意，如果你之前theme中的主题是通过克隆安装的，那么应该把主题文件中的.git文件夹删掉（或者为了以后方便更新主题，可以在本地快速打包一个.git压缩文件，需要更新的时候解压出来然后git pull），因为git不能嵌套上传，最好是显示隐藏文件，检查一下有没有，否则上传的时候会出错，导致你的主题文件无法上传，这样你的配置在别的电脑上就用不了了。安装的第三方插件同理。
然后push到远端。上传完了，可以去你的github上看一看hexo分支有没有上传上去，其中node_modules、public、db.json已经被忽略掉了，没有关系，不需要上传的，因为在别的电脑上需要重新输入命令安装 。

到新电脑上，重新搭建环境：安装git、设置git全局邮箱和用户名、设置ssh key、安装nodejs、安装hexo，但是已经不需要初始化了，而是在使用sourceTree将远端内容克隆到本地，然后cnpm安装deploy工具，开始写博客。

---

六、 写作技巧、踩坑记录等杂项（持续更新）

1. 文章中插入图片

此处无法展示效果，请移步 https://brandonvno.github.io/
插入图片有两种方式，一种是使用网上的图片，需要借助一些七牛云存储，另一种是放在本地。
先写一写放在本地：因为我们使用Github托管博客源文件，也就不怕本地丢失了。

方法：
首先在Blog/source文件夹下新建一个文件夹，名字随意，我这里就用Next的uploads了。
然后markdown插入图片语法：

![图片alt](图片地址 ''图片title'')
图片alt就是显示在图片下面的文字，相当于对图片内容的解释。
图片title是图片的标题，当鼠标移到图片上时显示的内容。title可加可不加
地址写/uploads/图片名字.type

比如[外链图片转存失败(img-uNWaPIiC-1565007560174)(/uploads/image1.jpg "公路全家福")]效果如下
[外链图片转存失败(img-CGz2471e-1565007560175)(/uploads/image1.jpg “公路全家福”)]

2. 文章中插入网易云音乐

此处无法展示效果，请移步 https://brandonvno.github.io/
网易云用网页打开，可以看到生成外链播放器，点击复制代码即可，这里分享两个星际牛仔的原声

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=592701&auto=0&height=66"></iframe>

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=22767373&auto=0&height=66"></iframe>

3. 文章中插入B站视频

此处无法展示效果，请移步 https://brandonvno.github.io/
找到B站视频，点分享，找到嵌入代码，拷贝出aid和cid，然后填入下面代码

<iframe id=sbrxp src="//player.bilibili.com/player.html?aid=488321&cid=735286&page=7" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="width: 800px; height: 600px; max-width: 100%"> </iframe>

效果如下：

4. 首页文章折叠

Text主题默认首页文章是显示全文的，非常反人类，修改方法是打开Text的主题配置文件_config.yml，搜索auto_excerpt，值改为true即可

---

七、 参考链接：

谢谢你一直看到这里。
https://www.bilibili.com/video/av44544186
https://www.codesheep.cn
https://blog.csdn.net/sinat_37781304/article/details/82729029
https://blog.csdn.net/LemonXQ/article/details/72676005

---