用 Hexo 搭建自定义博客

    Hexo

如果不是闲,或无法忍受其他商业博客方案,不建议用 Hexo,因为自由意味着繁琐。

Hexo 的用法大同小异,但每一步都有多种实现方法,接下来的操作都是在 Mac 电脑上的 Terminal(终端)里进行的。


使用 Hexo 前的环境准备

安装 Hombrew

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

使用 Hombrew 安装 Node.js

$ brew install node

Node.js 安装后,会附带 npm(node package manager)工具,可用它来搜索、下载、管理 Node.js 套件。
接下来使用 npm 安装 Hexo

$ npm install hexo-cli -g

安装 hexo-deployer-git 套件,其用于之后一键部署 blog 到 Github 上

$ npm install hexo-deployer-git --save

安装 hexo-generator-index ,其用于单独设置主页(index)的文章(posts)数量——分页(pagination)功能会用到

$ npm install hexo-generator-index --save

安装 hexo-generator-archive ,其用于单独设置归档页面(archives)的文章数量——分页功能会用到

$ npm install hexo-generator-archive --save

注:
这里的 --save 参数会让 npm 在安装 hexo-deployer-git 之后自动将它写入 package.json 文件里,这样之后我们多电脑间同步博客就不需要再单独运行这条命令了,只需要 npm install ,当然了,这条命令是幂等的(即该命令运行若干次和运行一次的效果一样),所以再运行一次问题也不大。该参数的具体描述可参考这里
PS: 目前使用 npm install xxx 命令安装模块时,似乎不再需要 --save 参数了


开始使用 Hexo

使用 Hexo 新建一个文件夹命名为 blog ,该文件夹将作为你的博客网站

$ hexo init ~/Documents/blog

进入新建的文件夹

$ cd ~/Documents/blog

刚才 hexo init 命令已经在 blog 文件夹下生成了一个叫 package.json 的文件,npm 会通过它得知需要安装的套件
所以接下来使用 npm 安装相关套件

$ npm install

使用 Hexo 开启服务器

$ hexo s

打开浏览器,输入网址 http://localhost:4000/ 就能查看刚刚建好的博客页面。目前博客只有一篇名为 Hello World 的文章。

在刚才的 Terminla(终端)中使用 control + C 的组合键即可关闭服务器。


开始写文章

$ pwd
~/Documents/blog

确保你在 ~/Documents/blog 文件夹里之后,便可用 Hexo 新建文章

$ hexo new "文章标题"

之后,在 ~/Documents/blog/source 这个文件夹里就能看到刚刚新建的,以文章标题命名的文件。点开编辑就好。

这里有两点要注意:

  • 需要使用 Markdown 格式来排版文章
  • 我写文章用的编辑器是 Sublime Text

预览你的文章

写好文章之后,使用 hexo s 开启服务器,然后打开浏览器,输入网址 http://localhost:4000/ 便可以预览写好的文章。

修改文章内容之后,只需要刷新浏览器页面就可以看到效果。


把博客部署到 Github 上

先到 Github 上申请一个账号,然后新建一个 repository,命名为:

你的用户名.github.io

注意!这里需要严格按照这种格式命名,比如我的 Github 用户名是 chpwang,新建的 repository 就要叫:

chpwang.github.io

然后在 ~/Documents/blog 文件夹里找到 _config.yml 文件进行编辑,加入以下设置:

deploy:
  type: git
  repo: 
    github: git@github.com:你的用户名/你的用户名.github.io.git

接下来,每次更新自己的文章之后,使用这三条命令进行部署

$ hexo clean   ## 清空缓存
$ hexo g       ## 生成静态页面至 public 目录
$ hexo d       ## 部署到 GitHub

## 如果部署的时候卡住没反应(no response),可以加上 debug 参数查看输出日志(log)
$ hexo d -debug

部署完毕之后,打开浏览器输入网址 https://你的用户名.github.io 就能看到部署上去的博客网页了。

如果想进阶使用 Hexo 的博客方案,请继续阅读多台电脑间的 Hexo 博客同步

PS:
有时部署会遇到卡住没反应的问题,当使用 hexo d -debug 命令后,发现日志循环输出 0 files generated in 81 ms, 这可能是开启了 Github 的二次验证(2FA)导致的。解决方案要不就是重新绑定 Github 上的 SSH Key,或者根据这里设置 Personal access tokens 后用 https 地址来部署

如果还没解决,可以参考以下案例:


打赏