使用 Github Pages + Hexo 搭建一个个人博客

前言

其实在很早之前，曾使用 WordPress 搭建过一个个人博客。当时也是满满的激情，想模仿大佬们学着写技术博客。但是后来由于忙着追求GPA，加上自身懒惰自控力不行，博客就基本放弃更新了。

但是现在已经过上了研究生生活，每天有大把的时间可以由自己来支配，同时接触的东西也越来越多：做项目需要实时的学习一些技术和技巧，需要不断总结下来；各种学术报告会，听完之后需要回去再认真揣摩消化，变成自己的东西，这也需要总结下来。虽然之前也零零散散的做了一些笔记，但是组织松散不方便查找，遂考虑重新开通个人博客，将平常生活中的所学所思都记录下来，做技术和科研的积淀，争取能够厚积薄发！

开始搭建

1. 前期准备

安装node.js：因为hexo是一个基于node.js开发的静态博客框架，其运行必须要有node.js环境支持
安装git：要往 github 提交代码，就必须先在本地安装好 git 客户端
在 github 上面新建一个仓库，名称设为你的github账户名.github.io

上面软件的安装应该没有大问题，去官网下载一路 next 基本就可以了。需要注意的是，如果之前没有用过 git 提交代码到 github，那么第一次安装 git 之后还需要做些 SSH Key 的设置，这里不打算赘述这个步骤。

2. 安装`hexo`

打开 git bash，直接输入下面这条命令：

1	npm install -g hexo-cli

安装可能需要几分钟，耐心等待，不出意外的话，能够成功安装 hexo

3. 构建本地目录

在本地文件系统中，任意找一个目录作为网站文件的存放目录，比如在 D盘新建一个目录blog，作为网站所有文件存放的根目录。

在 git bash 中进入这个目录

1 2	cd d: cd blog/

下载安装 hexo 博客系统所需要的各种文件

1	npm install

安装过程可能比较慢，且没有进度条提示。安装完之后，在blog目录下面会产生很多新的目录，简单解释一下几个常用目录和文件的含义及作用

themes：存放所有的博客主题，hexo 默认安装的主题是 landscape
source: 存放所有的 markdown 源文件。所有新建的博文(post) 都存放在source/_posts/ 这个目录下面。如果后面新建了其它页面，比如关于，归档，标签等，那么在source目录下面将会新产生about, achieve, tag等目录。
public：这个目录中存放所有的网页文件，html,css, javascirpt等等。简单说，hexo 会将我们编写的 markdown 文件解析成 html 文件，同时配套生成一些 css 样式文件，进而保护 markdown 源文件不被其他人获取。
_config.yml：全局的配置文件，可以配置网站标题, 子标题 等

4. 启动

前面安装步骤顺利完成之后，就可以在本地启动 hexo 了。

1	npm server # 或者是 npm s, 效果等价

这时会提示说在localhost:4000端口可以访问刚刚建立的博客，正常情况下，如果4000端口没有被占用的话，那么就可以正常访问到博客，会有一篇默认的Hello World的博文。如果4000端口被占用了，具体的表现就是网站打不开，那么可以尝试更换一个启动端口，具体命令可以自行搜索。

5. 部署到 Github Page

在部署到 github page之前，需要在本地修改一些配置。

首先打开_config.yml，搜索deploy字段，修改为如下格式：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
    type: git
    repo: git@github.com:tanjuntao/tanjuntao.github.io.git
    branch: master

其中第二个repo字段的值，需要改为你在 github 上面那个网站项目对应的 SSH 值，也不打算截图介绍这个 SSH 值是怎么获取到的了。需要注意的是每个:后面需要紧跟一个空格，否则会出错！

接着，在 git bash 中执行下面的命令：

1	npm install hexo-deployer-git --save

执行这条命令可能会出错，解决办法是 npm + flush刷新一下缓存, 具体的命令记不清楚。

最后就可以 deploy 到远程的 github 上面了。

1	hexo deploy # 或者 hexo d, 效果是一样的

这时候，就可以看到 github 仓库里面生成了很多文件，但是找不到 source 文件夹，这就是前面介绍到的，保护了源文件。

要通过github账户名.github.io方式访问网站，还需要在项目仓库中的setting中设置中找到github page，设置一下后，才能够访问到。

6. 使用

后面当需要新建一篇博文时，只需要做下面三个步骤，非常方便！

hexo new "博文标题"
hexo generate # hexo g
hexo server # hexo s, 启动本地服务，可在本地中预览效果，这步可选
hexo deploy # hexo d

7. 修改主题

hexo 中默认使用的主题是landscape,但最为流行的一个主题叫next，打算安装next主题的可以接着往下看。

首先切换到博客更目录下面，也就是前面的blog/目录，执行下面命令：

1	git clone https://github.com/iissnan/hexo-theme-next themes/next

可能需要一段时间才能完成。

接着打开跟目录下面的_config.yml文件，修改theme字段的值为next就可以了。

如果后期打算更换其它主题，只需要修改这个theme的值就可以了，同样非常方便！

next主题默认的样式还是没有符合我的要求：左边有一个导航栏，且有关于 分类 标签 这些选项，我们还需要进一步对主题进行设置。

在/theme/next/目录中找到_config.yml文件，同样是一个设置文件，只不过仅仅是next这个主题的设置文件。

搜索Scheme，修改其值为Pisces或者Gemini，因为只有这两个 scheme 能显示左右侧边栏。

# Schemes
# scheme: Muse
# scheme: Mist
# scheme: Pisces
scheme: Gemini

接着搜索sidebar，参考下列注释进行设置：

sidebar:
# Sidebar Position - 侧栏位置（只对Pisces | Gemini两种风格有效）
  position: left        //靠左放置
  #position: right      //靠右放置

# Sidebar Display - 侧栏显示时机（只对Muse | Mist两种风格有效）
  #display: post        //默认行为，在文章页面（拥有目录列表）时显示
  display: always       //在所有页面中都显示
  #display: hide        //在所有页面中都隐藏（可以手动展开）
  #display: remove      //完全移除

  offset: 12            //文章间距（只对Pisces | Gemini两种风格有效）

  b2t: false            //返回顶部按钮（只对Pisces | Gemini两种风格有效）

  scrollpercent: true   //返回顶部按钮的百分比

其它一些设置，包括头像，新页面，评论系统等，可以参见Hexo的Next主题详细配置这篇文章，非常详细！

8.其它

关于使用 hexo deploy时，如何附带像git commit那样的message，只需要如下命令即可：

1	hexo deploy --message "提交的信息内容"

非常方便！

9.注意事项

不要修改使用hexo new命令生成的文章标题
- 在编辑hexo new生成的 markdown 文件时，不要动手修改title的值，否则会导致这篇post无法显示在网站上！

10. 如何配置 `NexT` 主题

可以参考下面链接：

NexT 官方提供的主题配置
hexo 的 NexT 主题详细配置

这篇文章就先到这里啦~

前言