Spark's Blog
Spark's Blog

使用Hugo搭建Blog+GitHub Actions实现自动部署

 收录于 Blog
  约 1300 字 预计阅读 3 分钟 
目录

Hugo介绍

Hugo是世界上最快的构建网页的框架
—— Hugo官网

安装Hugo

Arch Linux：

1

sudo pacman -S hugo

其余发行版请自行使用包管理器搜索并安装

开始使用

首先创建一个空白网站

1

hugo new site <Site_name>

这个操作会创建一个文件夹，包含Hugo的默认文件

安装主题

博客是写给自己看的

所以挑选一个自己心仪的主题很重要。
你可以在Hugo的主题网站中查找 建议查找更新日期较近的主题，以避免有废弃的主题（可能失去了作者支持）。当然，只要你喜欢就好:) 然后你可以点击Download按钮，以跳转至GitHub页面，查看README.md以安装主题。

这里以FixIt主题为例

FixIt主题网站，你可以查看文档
转至GitHub页面，你可以提出issue和pull request以解决问题和完善文档\

安装主题

切换到博客目录，执行

1

git init

来初始化一个空的Git存储库（之后用于GitHub Actions自动构建部署网站） 将[FixIt]主题作为Git子模块添加到你的项目中的themes目录。

1

git submodule add https://github.com/hugo-fixit/FixIt.git themes/FixIt

备份目录中的hugo.toml文件，并将主题中的hugo.toml文件复制出来

1

mv hugo.toml hugo.toml.back && cp /themes/FixIt/hugo.toml ./

在站点配置文件中添加一行，指定当前主题。

1

echo "theme = 'FixIt'" >> hugo.toml

在站点配置文件中添加一行，指定默认的内容语言。

1

echo "defaultContentLanguage = 'zh-cn'" >> hugo.toml

然后启动Hugo开发服务器以查看站点

1

hugo server

Hugo，启动！

写文章

你需要将Markdown文章放入content/posts文件夹中，然后执行

1

hugo

来构建网站 这并不会在本地启动开发服务器，而是将构建后的网页文件放在public文件夹下

使用草稿

在Hugo中，你可以使用draft参数来表示该文章是草稿

1
2
3
4
5
6

---
title: 我的第一篇文章
date: 2024-03-01T17:10:04+08:00
draft: true
# ...
---

若想连草稿一起构建，请执行

1

hugo -D

同理，也可以在开发服务器中使用-D。

使用GitHub Actions实现自动部署博客

首先，在GitHub中新建博客仓库，命名为<User-name>.github.io 在本地Git中添加远程仓库

1

git remote add origin https://github.com/<User-name>/<User-name>.github.io.git

然后新建文件夹

1

mkdir .github/workflows

新建一个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

# 使用GitHub Actions自动部署Hugo博客
name: Hugo-Build
on:
  push:
    branches:
      - Hugo
permissions:
  contents: write
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repo
        uses: actions/checkout@v4
      - name: Install Hugo
        uses: peaceiris/actions-hugo@v3
        with:
          hugo-version: '0.129.0'
          extended: true
      - name: Hugo Build
        run: |
          git submodule update --init --remote --merge themes/FixIt
          hugo
      # - name: Deploy
      #   uses: peaceiris/actions-gh-pages@v3
      #   with:
      #     github_token: ${{ secrets.GITHUB_TOKEN }}
      #     publish_dir: ./public
      #     cname: pilihu2022.github.io
      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          branch: gh-pages
          folder: public

注意事项

  1. 在branches下的hugo，需修改为你存放博客的分支
  2. 注释的代码可删除，也可使用，其中的github_token不需要理会，GitHub Action的机器会自动生成
  3. 两个Deploy任选其一即可，不要重复使用！
  4. 若没有在GitHub中找到Actions的选项，请自行搜索‘GitHub如何开启Actions’

使用GitHub Pages

在Settings > Pages，在Source中选择Deploy from a branch，随后选择gh_pages，点击Save按钮，稍等片刻即可看见看见顶栏有提示： Your site is live at https://<User-name>.github.io/

结束，祝各位部署GitHub Actions时不报错，报错可联系

更新于 2026-10-06 
CC BY-NC-SA 4.0
阅读原始文档
Blog
返回 | 主页
切换 选择 ESC 关闭
搜索引擎 Fuse.js