SpringLych

从Hexo到Hugo

 1809  4 分钟

​ 自去年某个节点后，博客几乎没有更新过，一个重要原因是，当时接触到了语雀，之前的博客也基本是承担了作为笔记的功能。相比于 Hexo，语雀更适合作为笔记：方便同步，有 Windows 和 Mac 客户端；方便记录，只需打开应用，记录即可。而 Hexo 则要麻烦的多：不仅多端同步是个问题，记录笔记的过程也略显复杂。因此，语雀成为了那段时间的主力工具。

​ 在这段时间里，趁着空闲时间学习了下 Go 语言，看好其在云领域的发展。学习中也了解到基于使用 Go 语言编写的 Hugo 框架，由于不太喜欢基于 Node 的 Hexo 所使用的包管理方式，便有了本文的迁移之旅。

为什么拥抱 Hugo

从 Hexo 转向 Hugo 有以下一些原因：

  1. 对于 Go 语言本身的兴趣。如前所述，看好其未来的发展。同时逐渐将 Go 语言作为我的第二语言，因此尝试。
  2. Hexo 自身的臃肿。Hexo 基于 Node 开发，Node 使用 npm 这种包管理方式，我个人不太喜欢这种包管理方式，不同的项目要单独下载一堆依赖，安装一个 Hexo 友要下载一堆 node_modules 依赖。相比于 Java 的 Maven，Python 的 pip 所使用的本地仓库，这种方式过于臃肿。而使用 Hugo 就很简洁，只需一个可执行文件。
  3. 编译速度。Hexo 不支持增量构建，编译时间略长，这一点从我编译之前的二三十篇博客就能感觉出来。得益于 Go 语言，Hugo 号称编译速度最快的博客，值得尝试。

以上就是本次迁移的主要原因。当然 Hexo 也属于它的优点，因为使用 Node 开发，前端用户很多，因此有很多漂亮实用的主题，例如流行最广的 next ；相比之下 Hugo 的主题虽然也不少，论美观程度，大部分是不如 Hexo 的。

安装与配置 Hugo

安装 Hugo

使用 Go 语言开发的 Hugo 打包后是一个可执行文件，只需要下载该执行文件即可。我使用的系统为 Windows，并且已经安装过 Scoop，使用 Scoop 安装非常简单：

scoop install hugo-extend

安装版本为 extend 版，以便于主题的安装。

创建博客

安装完成后，开始创建博客站点。在任意目录执行一下命令即可创建一个博客站点

hugo new site

安装主题

Hugo 自身不带任何主题，需要自己安装。我使用的主题是 MemE , 原因是：

  • 关注过作者一段时间，比较有想法
  • 主题简洁，专注于博客本身
  • 支持夜间模式

该主题文档可在 这里 找到。

进入到 博客文件夹，使用 git 方式安装：

1
2

git init
git submodule add --depth 1 https://github.com/reuixiy/hugo-theme-meme.git themes/meme

之后进行一些基础配置即可开始使用

博客结构

博客采用的是 page-bundel 模式，即在 content/post 目录下新建文件夹，文件夹名字为博客名称，博客内容在 index.md 中，图片放在与 idnex.md 同级的 img 文件夹中。这样的好处是，博客和图片在同一个文件夹中，便于管理。

平时也使用 Typora 写作，在 偏好设置->图像 中设置 插入图片时 - 复制到指定路径 指定./img/ ，之后粘贴图片，Typora 会自动将图片复制到 img 文件夹。

部署至Github

配置 Github Page

部署到 Github Page 过程和部署 Hexo 类似，我是直接利用之前 Hexo 博客的仓库，因此相当于跳过了该步骤。

通过 GIthub Action 自动部署

Hexo 生成静态网页后可以直接部署到 Github Page，但是 Hugo 目前没有这样的功能，好在 Github 提供了 Action 这一功能，借助该功能，可以在推送博客源码到 Github 时自动生成静态网页并推送到 Page 仓库。

首先我准备了两个仓库：一个用来存放博客源码，称之为博客仓库；另一个就是之前的 hexo 静态网页仓库，也是存放 Hugo 生成的静态网页的仓库，称之为网页仓库。

Github 有很多 Action 项目，选择其中一个脚本配置即可，过程如下：

  1. 在博客文件夹中添加 .github/workflow/build.yml 文件，内容如下：

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

    name: generate hugo site

on:
  push:
    branches:
      - master  # 每次推送到 master 分支都会触发部署任务

jobs:
  # 部署任务
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod
      # 使用 hugo
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
          extended: true
   # hugo 生成静态文件
      - name: Build
        run: hugo --minify # 压缩支持的html
   # 部署至 page 仓库
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
          external_repository: SpringLych/SpringLych.github.io  # page仓库
          publish_branch: master
          publish_dir: ./public

    workflow 基于项目仓库运行，build添加了一些注释。

  2. 本地生成 SSH 部署密钥：

    1

    ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""

    之后会生成公钥和私钥，将其内容分别复制添加：

    • 公钥 -> 项目源码仓库 -> Settings -> Deploy key -> add deply key。

      勾选Allow write access。

    • 私钥 -> 博客静态仓库 -> Settings -> Secretes -> ACTIONS_DEPLOY_KEY

      Name 为 上述 build.yaml 文件中的 ACTIONS_DEPLOY_KEY

  3. 推送至Github

    推送项目源码至 Github，Action 会自动构建和部署。之后打开博客页面，能看到部署好的博客。Action 构建成功如下：

image-20210520212211186

参考

使用 Github Action 部分参考一下：

体验

使用 Hugo + Github Action 简化了博客部署流程，添加或修改文章推送后即可自动发布，甚至在一台新的电脑上构建博客也很方便：安装 Hugo -> 从 Github clone 博客源码 -> 编写发布。整个流程极大地节省了时间和精力。

updatedupdated2021-09-212021-09-21