用 Hexo 搭建自定义博客

Hexo 是一个基于 Node.js 的静态网站生成器。它可以将 Markdown、Jade 或者其他模板语言的文件转换成静态网页，并且支持丰富的主题和插件。配合 Github 就可以搭建自己的博客。

如果不是闲，或无法忍受其他商业博客方案，不建议用 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 套件。

使用 Hombrew 安装 node-sass

## 安装 SASS - 将 .scss 文件编译成 .css 文件的工具，后面会用于压缩编译 hexo 博客的 main.scss 文件
## 压缩命令为: sass --style compressed main.scss:m.min.css    
$ brew install node-sass

接下来使用 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 ，当然了，这条命令是幂等的（即该命令运行若干次和运行一次的效果一样），所以再运行一次问题也不大。该参数的具体描述可参考这里。

• 目前使用 npm install xxx 命令安装模块时，似乎不再需要 --save 参数了。

• 有些版本的 Node 有 Bug（比如 Node 14），和 hexo 不兼容：后续使用 hexo d 命令部署到 Github 的过程会报错。此时等不了更新修复可以先安装旧版（比如 Node 12 ）来确保 Hexo 能用。具体来说就是，先卸载当前版本的 node ，然后安装旧版本的 Node ：

最新说明：当前 node 12 已经 EOL（End Of Life），不能用 homebrew 来安装了，要用 nvm
具体操作请参考：入手新 Mac 后的环境搭建

  # 重新安装 Node 要先删除。从 npm 开始删
  # 若此前 npm 是通过 brew 安装的，就用 brew uninstall npm 指令删除
  $ brew uninstall npm

  # 若此前 npm 是单独安装的（比如官网下载安装包），则用 npm uninstall npm -g 指令删除
  $ npm uninstall npm -g

  # 删除当前的 Nodejs - 若此前是通过 brew 安装的 node
  $ brew uninstall node

  # 删除当前的 Nodejs - 若是自行独立安装（如官网下载）的 node
  $ sudo rm -rf /usr/local/lib/node_modules

  # 重新安装指定版本的 Node 来确保兼容性 - 下面是安装 Node 12 的版本
  $ brew install node@12

参考链接：
解决 node.js@14+ 与 hexo 不兼容：作者选择安装 Node 13.14
先用 npm uninstall npm -g 卸载 npm 。再 brew install node@12 安装旧版 node，最后再 brew link node@12【主要看来自 @Jim Geurts 和 @natevw 网友的回复】

开始使用 Hexo

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

$ hexo init ~/Documents/blog      # 在 ~/Document 这个目录下会出现一个新的文件夹叫 blog，里面包含一些关于 hexo 的基础文件

进入新建的文件夹

$ 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 新建文章

# 这个命令会建立一个文件：~/Documents/blog/source/_posts/java-basics.md
# 之后就在这个文件里写这篇博客的内容
$ hexo new "java basics"

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

文件内容会包含自动生成的信息头（front matter），直接在下面的位置编辑博客内容就好：

---
title: java basics
date: 2024-03-23 11:07:28
tags:
---

[... 博客内容（支持 Markdown 和 html 进行排版） ...]

这里有两点要注意：

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

预览你的文章

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

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

更改文章标签

你也许会给你的文章打上标签（tags）进行分类，但是后期如果想更改，会发现用 hexo clean 命令无法更新网页上博客的标签。尤其是当你删除某个标签之后，发现旧标签始终存在。

这时可以手动删除 /blog/public 文件夹，然后再用 hexo clean 和 hexo g 两个命令就可以了。你过去的各种标签被保存（缓存）在 public/tags 文件夹中，只要这个文件夹不更新，你网页上的旧标签也会继续存在。
注意，更改完后本地也许要 hexo s 重开 server 才能看到改动。

---
title: 用 Hexo 搭建自定义博客
date: 2016-10-08 14:45:13
tags: 旧标签1 旧标签2 旧标签3
---

[... 博客内容 ...]

给文章加密

这里我们使用的是 hexo-blog-encrypt 这个插件。

第一步，使用 npm 来安装 hexo-blog-encrypt：

# --save 是确保插件记录在 package.jason 文件中，方便之后多终端同步
npm install --save hexo-blog-encrypt

第二步，更改根目录下的文件 ~/Documents/blog/_config.yml ，增加 encrypt 字段：

# Security
## Docs: https://github.com/D0n9X1n/hexo-blog-encrypt
encrypt: # hexo-blog-encrypt
  abstract: 有东西被加密了, 请输入密码查看
  message: 您好, 这里需要密码
  wrong_pass_message: 抱歉, 密码不对

第三步，将 password 字段添加到要加密的文章的信息头，就像这样：

---
title: Hello World
date: 2016-03-30 21:18:02
password: hello
---

[... 博客内容 ...]

第四步，重启以激活新插件 hexo-blog-encrypt：

$ hexo clean   ## 清空缓存
$ hexo g       ## 生成静态页面至 public 目录
$ hexo s       ## 打开本地服务器预览效果

PS:
按照上方文章的信息头添加 password 字段后，内容中的代码高亮效果会消失
输入密码解密文章之后，可以通过页面最底部的按钮来重新加密文章
更多设置请参考 hexo-blog-encrypt 的 Github

把博客部署到 Github 上

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

你的用户名.github.io

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

chpwang.github.io

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

# Deployment
## Docs: https://hexo.io/docs/deployment.html
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 地址来部署

如果还没解决，可以参考以下案例：

• hexo d 部署卡住
• hexo deploy 命令卡住的奇怪问题
• 用 hexo d 命令部署的时候总是会卡住很久，查看日志发现信息一直在循环
• hexo deploy 时不断 Error

另一种常见的报错如下，这是网络连接问题导致的，需要换个网络环境。要注意各种终端（Terminal）的流量默认不走代理。要使用增强模式之类的设置。更多内容参考解决 hexo d 提示：ssh_exchange_identification：read：Connection reset by peer 的问题

$ hexo d
......
kex_exchange_identification: read: Connection reset by peer
......

打赏