Ubuntu 环境下基于 Hexo 搭建个人博客

快速上手

概述

Hexo 是一个快捷、简单、强大的博客生成框架，用户只需使用 Markdown 或其他标记语言写作，Hexo 将负责自动生成美观的静态网页。

本地配置

安装 Git：

1	$ sudo apt install git

配置 Git：

1 2	$ git config --global user.name "你的GitHub用户名" $ git config --global user.email "你的GitHub注册邮箱"

安装 Node.js：

1 2	$ curl -sL https://deb.nodesource.com/setup_15.x \| sudo -E bash - $ sudo apt-get install -y nodejs

安装 Hexo：

1	$ npm install -g hexo-cli

服务端配置

在根目录下生成 SSH 密钥对：

1	$ ssh-keygen -t -rsa "你的GitHub注册邮箱"

然后复制 ~/.ssh/id_rsa.pub 文件的内容，添加到 GitHub 上。检测公钥设置是否成功：

1 2	$ ssh git@github.com Hi PrinterFranklin! You've successfully authenticated, but GitHub does not provide shell access.

在 GitHub 上新建一个仓库，名字是“用户名+github.io”，例如我的用户名是 PrinterFrankin，对应的仓库名就是 PrinterFranklin.github.io。

初始化博客

使用 hexo 初始化博客：

1
2
3

$ mkdir myblog
$ cd myblog
$ hexo init

测试博客：

1	$ hexo s --debug

这个命令会生成博客站点的预览，可以在 localhost:4000 进行访问。如果对文件进行了修改，只需刷新页面就能预览最新的效果。

基本使用

写文章

在博客根目录下执行：

1	$ hexo new "新文章标题"

编辑 source/_post/ 目录下新增的 .md 文件，并保存。

如果文章中使用了图片，需要进行如下配置：

安装 hexo-asset-image 插件：
1
$ npm install hexo-asset-image --save
在 _config.yml 配置文件中，修改 post_asset_folder 字段为 true。

之后每通过 hexo new 新建文章的时候都会同步在 _post 目录下生成一个同名目录，用于存放文章中引用到的图片。

插入图片时，首先将图片存储在文章同名资源目录下，然后在文章中通过 ![test](test.jpg) 语法引用。

快速部署

配置 _config.yml 文件，找到 deploy 字段，添加 GitHub 仓库信息：

deploy:
  type: git
  repo: git@github.com:PrinterFranklin/PrinterFranklin.github.io.git
  branch: master

还需要安装 Hexo 部署插件：

1	$ npm install hexo-deployer-git --save

根据以下命令进行部署：

1
2
3

$ hexo clean
$ hexo g	# hexo generate 生成静态站点
$ hexo d	# hexo deploy 部署到远端

接下来还需要等待一段时间完成网站部署，之后博客就能访问啦。

升级

升级 Hexo：

1	$ npm update hexo -g

个性化

修改主题

Hexo 官网的主题页面提供了很多主题供用户挑选：https://hexo.io/themes/ 。

更换一个新的主题，你需要：

在 themes 目录下创建一个新目录，将新主题的文件放在下面。
编辑 _config.yml 文件，修改 theme 字段的值为新的主题。

我使用的主题是 ILS：https://github.com/XPoet/hexo-theme-keep 。这款主题有效集成了一些实用插件，能够降低部署难度，让你更好地专注于写作本身。

当然，如果对其他主题都不满意的话，你也可以开发一个自己的主题 ;-)

添加评论模块

主要有 Valine 和 GitTalk 两种方法，具体可参考主题提供的相关说明。

配置个性域名

找域名提供商购买一个你喜欢的域名，与 Github Pages 默认域名关联起来。
把域名写到 source/CNAME 文件中。

自动化部署

背景

快速部署已经能满足最基本的使用需求，但托管在 Github 上的是静态网页文件，并非源文件，源文件只保存在初始化博客的电脑中，这种方案的缺点在于：

初始化博客的电脑挂了，博客也就挂了，只能重新搭一个。
没法在另外一台电脑上更新博客（比如发现有错别字的时候）。

很容易想到把源文件也放到 Github 托管，之后在新电脑上写博客的时候需要：

用 git pull 更新博客源文件；
更改源文件，走正常的快速部署流程部署到远端；
上传更新后的源文件（以确保多端同步）。

这样做显然很麻烦，那么有没有一种方案，可以只往源文件 git push，就能自动执行 hexo g & hexo d 完成静态网页的生成和博客的部署呢？

这里使用的是基于 Github Actions 的方案，不阐述过多的基础知识，需要了解背景的读者可以参考阮一峰的 GitHub Actions 入门教程。

注：常用的 CI/CD 工具都可以满足自动部署需求，你也可以使用更老牌的 Travis CI：使用 Travis CI 自动部署 Hexo 静态博客。但这种方案有个缺点，那就是源文件必须存放在公共仓库（私有仓库使用 Travis CI 要收费），可能造成一定的安全风险。

操作步骤

在 Github 上新建一个源文件仓 hexo-source，设置成私有仓库。

注：源文件必须存放在私有仓库，以避免 App Key 等敏感信息泄露。
生成一对密钥：
1
$ ssh-keygen -t rsa -f github-deploy-key
把私钥 ~/.ssh/github-deploy-key 的内容放到源文件仓 hexo-source 的 Settings -> Secrets 目录下，命名为 HEXO_DEPLOY_PRI。

把公钥 ~/.ssh/github-deploy-key.pub 的内容放到静态文件仓 xxx.github.io 的 Settings -> Deploy keys 目录下，命名为 HEXO_DEPLOY_PUB。

注：一定要勾选 Allow write access！否则会因为无法写入会导致部署失败。

在博客目录下新建 .github/workflows/deploy.yml 文件，内容参考如下：

name: CI

on:
  push:
    branches:
      - master

env:
  GIT_USER: 你的git用户名
  GIT_EMAIL: 你的git提交邮箱
  DEPLOY_REPO: xxx.github.io
  DEPLOY_BRANCH: master

jobs:
  build:
    name: Build on node ${{ matrix.node_version }} and ${{ matrix.os }}
    runs-on: ubuntu-latest
    strategy:
      matrix:
        os: [ubuntu-latest]
        node_version: [14.x]

    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Use Node.js ${{ matrix.node_version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node_version }}

      - name: Configuration environment
        env:
          HEXO_DEPLOY_PRI: ${{secrets.HEXO_DEPLOY_PRI}}
        run: |
          sudo timedatectl set-timezone "Asia/Shanghai"
          mkdir -p ~/.ssh/
          echo "$HEXO_DEPLOY_PRI" > ~/.ssh/id_rsa
          chmod 600 ~/.ssh/id_rsa
          ssh-keyscan github.com >> ~/.ssh/known_hosts
          git config --global user.name $GIT_USER
          git config --global user.email $GIT_EMAIL

      - name: Install dependencies
        run: |
          npm install hexo-cli -g
          npm install

      - name: Deploy hexo
        run: |
          hexo g
          hexo d

该文件就是 Github Actions 脚本，你需要修改的只有 GIT_USER、GIT_EMAIL 和 DEPLOY_REPO。

上传博客目录到 Github 源码仓：
1
2
3
4
$ git init
$ git add --all
$ git commit -m "init hexo blog"
$ git push -u origin master
如果你使用 git clone 方式下载主题的源码，建议删除主题目录下的 .git 文件。
等 Actions 脚本跑完后，就能在网站上看到更新的博客啦。

FAQ

每次更新后需要手动刷新 GitHub 个性域名？

答：在 source 目录下添加一个新文件 CNAME，内容是自定义域名。
哪里能获取到更多关于 Hexo 的信息？

答：推荐 Easy Hexo 团队提供的轻松入门 Hexo。