使用hexo+github+Next搭建个人博客网站

(Updated: )
开发环境
Next, hexo

最近做毕业设计做的有点累，好久没写博客了，写篇博客放松一下。最近面临毕业了，之前在腾讯云搭建的个人站点，服务器也不能使用学生优惠的价格购买了，遂在今天借这个机会把博客迁移到github上来。之前有一次自己的云服务器的数据库被撞库了，又没有备份，丢失了很多的文章，也是心痛。使用hexo部署到github上就很好的避免了这个问题。整体上来说，hexo和Next的文档也是很丰富详细的，下面记录一下搭建部署的一些细节问题。

注：使用hexo搭建博客就意味着你今后就要使用 Markdown 来写作了。Markdown的通用语法很简单，可以将其认为是html的一种变体（实际上就是html的变体，因此可以在Markdown文件中使用部分html标签）。Markdown的语法一般来说半个小时不到就能学会了（makrdown basic-syntax），只要用Markdown写上两篇文章，基本上就得心应手了。这里顺带着推荐一个编辑器 Typora，无论是macOS还是Windows下该软件的表现都不错，而且对于 LaTeX 和 Code支持的比较好（这个是我推荐Typora的重点）。

一、本地搭建hexo和Next

现在hexo的官方文档已经很完善了，并且也支持多种语言，一般来说都没什么大的问题。我参考着hexo的官方文档基本上就把hexo搭建好了。这里我想说一下，能参考官方文档就尽量看官方文档，现在网上很多的博客文章时间发表的都有些时段了，而官网文档是系统运行的最基本的参考。把hexo搭建好之后就可以在某个空白文件夹下初始化hexo项目。我相信大家到这里应该都没什么问题。

hexo官方文档

Next官方文档

下面是配置环节。

在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。 其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。

上面这段话是Next网站的一句话。配置的时候一定要注意这两个文件，文件名都是一样的，别弄混淆了，可以这样理解：

  • 根目录下的_config.yml是全局的变量设置，就是无论更换什么主题，这一块的内容是不变的。
  • themes文件夹里的主题目录下的_config.yml文件中配置的是该主题所特有的个性化设置。

结合上面两个官方文档基本上就能把站点配个七七八八了，然后有几个小的细节说一下。

1、Next添加博客的更新时间

现在网上有很多文章是在原有的swig文件中添加一些dom标签，实际上我现在使用的是 Next 5.1.4版本，其中就已经包含了博客更新时间的选项。只需要在主题配置文件_config.yml搜索update选项，在post_meta选项中应该可以找到一项updated_at，将其设置为true即可。（题外话，其实很多设置，小伙伴们可以先在该文件中搜索一下，比如评论相关的配置，就搜索一下comment，如果有的话就不用到处查资料了。）

2、hexo新增页面
比如说我要自定义一个页面project放在menu中，方法和官网给出的tags、categories建立页面是一样的，只不过就是index.md文件中没有type这个选项，tags和categories页面的功能都是给提供好的。比如我要新建一个页面project来写我的近期工作。就可以使用来新建一个页面，这个页面和新建一个文章还不是一样的。内容的组织结构可以是一样的。这个时候在source文件夹下面就有一个名为project的目录，下有一个index.md的文件。

1
hexo new page "project"

3、Next添加多个分类目录
这个看一下aiellochan写的这篇文章。
注意区分子分类和多个分类的区别。

子分类，下面的分类配置会将该文章放到 Sports/Baseball 这个分类下。

1
2
3
categories:
  - Sports
  - Baseball

同样的作用还可以这样写：

1
categories: [Sports,Baseball]

上面两种写法最终的效果都是一样的，都是将文章放在了一个子分类目录下。

多个分类,如果我们的要求是将文章同时分到两个或者多个不同的类目下呢？官方给出的方法是：

1
2
3
categories:
  - [Sports]
  - [Baseball]

只需要用中括号将独立的分类括起来即可，这样上面的文章就会被分类在 Sports 和 Baseball 这两个不同的目录中了。

二、将该博客发布到github上去

1、建立一个repo
名称为xxxx.github.io，这样就可以使用xxxx.github.io这个域名来访问你的站点了。

2、部署
在根目录下的_config.yml文件中有一个配置项deploy，在里面配置上上面这个库的地址。如下：

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/yyyy/xxxx.github.io.git
  branch: master

注意这里，这里的branch要用master分支，这样你的站点才能成为一个Github Page，官网这一块写的是建议是用public作为部署的分支，但是这样将branch配置为非master分支后，站点是访问不到的。官方上部署部分的其他方面写的还是很清晰的。

配置完毕后，使用hexo clean和hexo deploy命令就可以把站点部署到github上了。等待几分钟就可以访问了。

三、站点主题更新的问题

当站点部署完毕后，加入主题的部分地方有更改，那么该怎么同步到github上呢。
其实也很简单，对有改动的页面重新生成新的页面，然后再推送到github库。这里有没有感觉到其实就是github的git。使用hexo generate -d或者hexo g -d即可将更新后的站点提交到github上。（发布文章用这两条命令就行。）

注意哦
这里有个cache的问题，可能大家会发现为什么已经重新部署了刷新页面还是没有改变，其实这是因为浏览器缓存的原因，只需要清除浏览器最近的cache就可以了。（可能是因为是静态的网站，所以cache缓存的较多？）

四、在文章中嵌入可视化图表

下图是d3的一个柱状图demo，可以实现增加或删除的操作。怎么做呢？实际上只需要在你的文章中嵌入JavaScript脚本的代码即可，前文说到了 Markdown就是html的变体，因此它也支持在文章中直接加上各类dom标签。

下面是嵌入的代码示例和图表类型

1
2
3
4
<div id="bar"></div>
<link rel="stylesheet" href="/css/custom/main.css">
<script src="/js/src/d3.min.js"></script>
<script src="/js/custom/bar.js"></script>