我的个人博客码农小站是使用 Hugo + Github Pages + Github Actions 免费搭建的，这篇博客文章就来分享一下码农小站的搭建过程。

Hugo 是由 Go 语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。可以把 Markkdown 文件转化成静态 HTML 文件。

Github Pages 是一组静态网页集合(Static Web Page)，这些静态网页由 GitHub 托管。

Hugo 生成静态 HTML，然后由 Github Actions 自动部署到 Github Pages 上进行托管。

接下来就按照如下步骤搭建小站：

  1. 安装 Hugo。
  2. 使用 Hugo 创建并配置站点。
  3. 使用 Github Pages 托管 Hugo 构建好的静态站点。
  4. 使用 Github Actions 自动化部署。

1 安装 Hugo

安装 Hugo 非常的简单，由于我使用的是 macOS，所以使用官方推荐的 homebrew 安装方式。

输入如下命令安装：

1

brew install hugo

完成后，可使用以下命令查看版本：

1

hugo version

1.1 创建博客站点

要创建一个新的博客站点，可通过命令 hugo new site 给博客起个名字命令来实现，例如我的博客站点叫 codeaer，就可以输入如下命令：

1

hugo new site codeaer

执行后会创建一个 codeaer 目录，包括以下内容:

  1. archetypes：存放用 Hugo 命令新建的 md 文件应用的 front matter。
  2. content：存放内容页面，如 Blog。
  3. layouts：存放定义网站的样式，写在 layouts 文件下的样式会覆盖安装的主题中的 layouts 文件同名的样式。
  4. static：存放所有静态文件，如图片。
  5. data：存放创建站点时 Hugo 使用的其他数据。
  6. public：存放 Hugo 生成的静态网页。
  7. hemes：存放主题文件。
  8. config.toml：网站配置文件。

1.2 选择主题

hugo 有很多免费的主题可以挑选，感谢开源的创作者为我们提供优秀的主题，更多主题请参阅 themes.gohugo.io，我喜欢的主题是  hugo-theme-jane，下面以 hugo-theme-jane 为例，下载主题：

1

git clone https://github.com/xianmin/hugo-theme-jane.git --depth=1 themes/jane

下载后我们会看到，在 themes目录下会多一个 jane 目录，里面存放的主题代码，一般安装的 Hugo 主题的文件结构中都会有 exampleSite 目录，也是在选择主题时参考的网站 demo。

可以把 **exampleSite **的目录的内容复制到站点目录，然后查看主题 demo，使用如下命令复制：

1

cp -r themes/jane/exampleSite/* .

使用hugo serve命令启动 Hugo 服务器：

1

 hugo serve

成功启动后，在浏览器地址输入  http://localhost:1313  地址将会看到由主题生成的示例网站：

通过浏览示例网站，可以大致的了解，当前主题拥有的功能。

1.3 配置 Hugo

下载来是配置 Hugo，使其成为自己想要的样子，拥有属于自己的内容，删除 content 目录下的内容，输入如下命令：

1

rm -rf content

然后打开 config.toml 文件，根据主题文档进行配置，例如我的配置：

 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
34
35
36
37
38
39
40
41
42
43
44
45
46
47

baseURL = "https://codeaer.github.io"
title = "码农"
theme = "jane"

defaultContentLanguage = "zh-cn"           # Default language to use
[languages.zh-cn]
  languageCode = "zh-cn"

[author]                  # essential                     # 必需
  name = "阿秀"

[sitemap]                 # essential                     # 必需
  changefreq = "weekly"
  priority = 0.5
  filename = "sitemap.xml"

[[menu.main]]             # config your menu              # 配置目录
  name = "首页"
  weight = 10
  identifier = "home"
  url = "/"
[[menu.main]]
  name = "归档"
  weight = 20
  identifier = "archives"
  url = "/post/"
[[menu.main]]
    name = "分类"
    weight = 30
    identifier = "categories"
    url = "/categories/"
[[menu.main]]
    name = "标签"
    weight = 40
    identifier = "tags"
    url = "/tags/"


[params]
  since = "2023"            # Site creation time          # 站点建立时间
  logoTitle = "码农"        # default: the title value    # 默认值: 上面设置的title值
  keywords = ["码农","个人博客"]
  description = "码农的个人博客网站。"

  [params.social]                                         # 社交链接
    a-email = "mailto:codeaer8@email.com"
    g-github = "http://github.com/codeaer"

使用以下命令创建一篇博客文章：

1

hugo new post/my-first-post.md

使用以下命令启动 Hugo 服务器:

1

hugo -D server

使用浏览器打开http://localhost:1313  可以看到如下效果：

1.4 构建 Hugo 站点

输入 hugo 命令来构建站点：

1

hugo

执行完成后，Hugo 将构建一个静态站点，默认保存在网站根目录的 public 目录下。

2 托管到 Github

下面我们将 Hugo 构建好的博客站点托管到 Github 上。

2.1 创建 Github 仓库

注册一个 GitHub 账号。如果你已有账号，直接登录。如果你没有账号，注册并登录。新建一个 GitHub 仓库，库名为 username.github.io，username 即你的 GitHub 账号 username，例如我在 Github 上的 username 是 codeaer，所以我创建的仓库名是：codeaer.github.io。

22. 将 blog 站点推送到 Github 仓库

使用命令 cd public进入到 public 目录下，依次执行如下命令：

1
2
3
4
5
6

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:codeaer/codeaer.github.io.git
git push -u origin main

⚠️注意，这是在 public 目录下操作的，这样只会将 public 目录提交上去，而不会将整个博客站点提交上去，这样是为了保证源码安全。

2.3 设置 Github Page

在 GitHub 仓库界面，选择 settings -> pages，确保 Branch 是 main 分支，目录是 root 目录，然后在浏览器中访问 https://username.github.io 就可以访问到你的个人博客网站，预览的一样。

博客站点每次更新内容都需要运行 Hugo命令构建 pubilc，然后再将构建好的 pubilc 提交到 Github，这样会比较麻烦，所以接下来就使用 Github Actions 自动化构建。

3 Github Action 自动构建

我是将 Hugo 源码和构建好的站点文件分两个仓库存储，所以有两个仓库：

接下来是创建 Github 私有仓库，并将 Hugo 源码推送到创建的私有仓库，然后在私有仓库配置 Github Actions。

3.1 创建 Github 私有仓库

创建 Github 私有仓库，并取名为 pages-hugo-source，如下图所示：

私有仓库创建好后，接下来是将 Hugo 站点源码推送到私有仓库。使用如下命令删除 public 目录：

1

rm -rf public

然后进入到站点根目录，依次执行如下命令：

1
2
3
4
5
6
7
8

git init
git submodule add https://github.com/xianmin/hugo-theme-jane.git themes/jane
git rm --cached themes/jane
git add .
git commit -m "first commit"
git branch -M master
git remote add origin git@github.com:codeaer/pages-hugo-source.git
git push -u origin master

3.2 生成 SSH Key

自动构建需要 Github 密钥，所以得先创建 Github 密钥，使用以下命令创建 Github 的 SSH 密钥：

1

ssh-keygen -t rsa -C "codeaer8@gmail.com" -f ~/.ssh/id_rsa_hugo_deploy

⚠️注意：将 codeaer8@gmail.com 替换成你自己的邮箱。

上面命令会在~/.ssh目录下生成 id_rsa_hugo_deploy.pub（公钥）和 id_rsa_hugo_deploy（私钥） 两个文件。

在 codeaer.github.io公开仓库下 Settings > Deploy keys中新建 key。表单中的 Title 随意填写，将刚才生成的 id_rsa_hugo_deploy.pub 文件内容填入 Key 中，勾选 Allow write access，点击 Add key 按钮保存。

在 codeaer.github.io公开仓库下 Settings > Secrets and veriable > Actions中新建 secret。表单中的 name 填入 ACTIONS_DEPLOY_KEY，将刚才生成的 id_rsa_hugo_deploy 文件内容填入 value 中，点击 Add secret 按钮保存。

3.3 配置 Github Actions

自动构建的工作流程是使用 Github Action 来完成，所以需要配置 Github Action 的工作流程，就是配置 workflow，直接在源码跟目录下新建 /.github/workflows/main.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
34
35
36

name: Generate Hugo Site

on:
  push:
    branches:
      - master

jobs:
  build-deploy:
    runs-on: ubuntu-20.04

    steps:
      - uses: actions/checkout@master
      - name: Checkout submodules
        shell: bash
        run: |
          auth_header="$(git config --local --get http.https://github.com/.extraheader)"
          git submodule sync --recursive
          git -c "http.extraheader=$auth_header" -c protocol.version=2 submodule update --init --force --recursive --depth=1          

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
          extended: true

      - name: Build
        run: hugo --gc --minify --cleanDestinationDir

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
          external_repository: codeaer/codeaer.github.io
          publish_dir: ./public
          publish_branch: main # deploying branch

上面的代码大致流程如下：

  1. 监听 master分支 push 动作，push 动作触发 action。
  2. action使用 hugo 构建 blog 站点。
  3. 将构建好的 blog 站点发布到 main分支。

到此为止，使用 Hugo + Github Pages + Github Actions 搭建博客完成，接下来就是尽情写作。