Hugo搭建个人博客

很久以前用hexo+github pages+travis ci搭过一个博客，虽然只写过两篇就晾着了，最近想把博客重新拾起来，发现travis ci几年前改了收费规则，之前配置的自动构建流程早就停了，又搜索了下，发现github actions也可以自动构建，而且免费，果断改用这个，又搜索了下有没有新的博客框架，发现youtube上好多人用hugo，一款用go语言编写的框架，网上有几篇对比这两个框架的文章，据说是性能更好，编译速度更快，那就折腾下吧，本来我也想换个博客主题。

安装Hugo

我的电脑是windows，官网提供了好几种安装方式，我是用Chocolatey安装的，choco install hugo-extended，电脑没装Chocolatey的话可以用winget install Hugo.Hugo.Extended，win10以上winget是系统自带的。

创建站点

在选中的目录下执行以下命令

1
2
3
4
5
6
hugo new site blog
cd blog
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke themes/ananke
echo "theme = 'ananke'" >> hugo.toml
hugo server

这段命令意思是新建一个站点，下载一个主题包到themes目录下，最后修改hugo.toml配置文件中的theme字段，将主题设置成刚才下载的主题名称，打开命令行里的链接可以看到页面说明创建成功了。

创建一篇博客

执行hugo new posts/my-first-post.md，看到在content目录下会新建对应的目录和文档，打开文档，看到里面有title和date，注意看这个时间是带时区的，这里有个坑，如果这个时间比当前的时间晚的话这篇博客是不会显示的。

挑一个主题

下面就是最花费时间的主题选择环节了，官网的主题有的有demo有的没有，就很难挑，并且一开始对主题的安装方法不太了解，导致有些主题没有配置成功（也不排除主题本身有问题），总之试了一圈还是没有特别满意的，最后还是去github上搜star最多的主题找到了一个不错的，推荐一下https://github.com/CaiJimmy/hugo-theme-stack，这个主题的文档也很赞。 hugo的主题有两种安装方式 1. git submodule的方式；2. hugo模块的方式。有些主题的安装文档里把两种方式的操作方法都放在一起所以看起来会有点乱。我比较喜欢第一种方式，以第一种方式为例，执行git submodule add 主题仓库地址 themes/主题名称，执行成功后会看到themes目录下多了一个主题文件夹，修改项目根目录的配置文件中的theme为该主题名称，通常主题目录下会有个exampleSite文件夹，这里面会有站点的配置文件，把这个文件复制到你站点的根目录下。这里要注意由于历史原因，Hugo支持多种配置文件名称，Hugo支持hugo.toml，hugo.yaml，hugo.json，config.toml，config.yaml等，这里还有一个坑是有多个配置文件时Hugo只执行一个。

更改配置

在配置文件中改一下你的名称，头像，链接这些信息，就完成了

部署

github上新建一个仓库，把刚才的站点代码提交上去，在仓库根目录下新建.github/workflows/hugo.yaml文件，将下面代码复制到该文件。

 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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
# Sample workflow for building and deploying a Hugo site to GitHub Pages
name: Deploy Hugo site to Pages
on:
  push:
    branches:
      - main # 如果不是新建的仓库，注意选择对应的分支

  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

defaults:
  run:
    shell: bash

jobs:
  build:
    runs-on: ubuntu-latest
    env:
      HUGO_VERSION: 0.111.3
    steps:
      - name: Install Hugo CLI
        run: |
          wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
          && sudo dpkg -i ${{ runner.temp }}/hugo.deb                    
      - name: Install Dart Sass Embedded
        run: sudo snap install dart-sass-embedded
      - name: Checkout
        uses: actions/checkout@v3
        with:
          submodules: recursive
          fetch-depth: 0
      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v3
      - name: Install Node.js dependencies
        run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
      - name: Build with Hugo
        env:
          HUGO_ENVIRONMENT: production
          HUGO_ENV: production
        run: |
          hugo \
            --gc \
            --minify \
            --baseURL "${{ steps.pages.outputs.base_url }}/"                    
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          path: ./public

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

这样以后每次推送代码都会自动执行这段部署脚本了。再配置一下github pages 下一次推送代码时看下actions, 这就部署成功了，这时就可以访问Pages里的链接了。这里面还有一个坑是如果你不是新建的代码仓库，而是像我一样在原先的代码基础上拉了新的分支，github actions部署的时候会报错，需要在settings里的Enviroments里Deployment branches里增加你的分支。

自定义样式

在/assets/scss下新建custom.scss，可以在里面增加自定义样式。