前言

最近我尝试用 Hugo 来写个人博客，并且配合 GitHub 客户端 上传部署，效果非常不错。
这篇文章就记录一下完整的过程，方便以后复盘，也给需要的人参考。

准备工作

首先，你需要安装 Hugo 环境，可以从 官方网站 下载安装包安装。
然后，你需要注册一个 GitHub 账号官方网站，并创建一个仓库，用来存放你的博客内容。

安装 Hugo

下载zip文件后解压 安装完 Hugo 后，你需要在命令行中输入 hugo version 来检查是否安装成功。

1

hugo version

配置环境变量

设置->系统->系统信息->系统变量->Path->编辑->新建->输入hugo.exe所在路径 并保存。

安装GitHub客户端

你可以从 官方网站 下载安装包安装(需要科学上网)，安装完成后，你需要登录你的 GitHub 账号。

创建博客

在命令行中输入以下命令，创建一个新的博客：

1

hugo new site myblog

这会创建一个名为 myblog 的文件夹，里面包含了 Hugo 的基本文件。

本地预览

在命令行中输入以下命令，启动本地服务器：

1

hugo server -D

然后，访问 http://localhost:1313/ 就可以看到本地的博客了，一开始什么都没有。

主题选择

Hugo 有很多主题可以选择，你可以到 主题网站 选择喜欢的主题，然后下载到本地。（主题->download->tags->下载最新版本zip文件）

下载完成后，解压到文件夹放到 myblog/themes 文件夹中，并修改 config.toml 文件，指定主题：

1

theme = "my-theme"

部署到 GitHub

在 GitHub 客户端中，点击 file -> add repository，选择你本地的博客文件夹，点击 create repository 按钮。

然后将myblog文件中的public文件夹里的内容复制到刚刚创建仓库的本地目录中

上传本地文件到GitHub 勾选修改文件 -> 填写备注和摘要 -> Commit to main -> publish repository 按钮。

我们现在去Github网页看一下

部署博客

Settings -> Pages -> Source 选择 branch: main -> Save 按钮。 刷新一下就有了自己的博客。

访问博客

访问 https://你的GitHub用户名.github.io/ 就可以看到你的博客了。

自动部署

我们可以利用GitHub Actions来实现博客的自动部署，这样我们只需要提交代码到GitHub仓库，GitHub Actions就会自动部署博客。

新建仓库

在GitHub网页上创建一个新的仓库，仓库名自定义，home左上角New创建新仓库，仓库名自定义，填写一下备注，将仓库改为私有然后点击Create repository按钮。 然后打开Github客户端，点击左上角File按钮，选择clone repository，选择刚刚创建的仓库，点击Clone按钮，选择本地路径，点击Clone按钮。

生成token

在GitHub，点击 右上角头像 -> settings -> 最下面的Developer settings -> Personal access tokens 按钮 -> tocken -> Generate new token -> **勾选 repo 和 workflow 权限 -> Generate token 按钮，生成一个新的token，保存好只展示一次。

添加token

点击仓库 -> settings -> secrets and variables -> Actions -> New repository secret 按钮 -> Name 输入 TOKEN -> Value 输入刚刚生成的token -> Add secret 按钮。

添加配置文件

把myblog文件中内容复制到刚刚创建的仓库中，并添加一个名为 .github/workflows/deploy.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

name: deploy

# 代码提交到main分支时触发github action
on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
        - name: Checkout
          uses: actions/checkout@v4
          with:
              fetch-depth: 0

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

        - name: Build Web
          run: hugo -D

        - name: Deploy Web
          uses: peaceiris/actions-gh-pages@v4
          with:
              PERSONAL_TOKEN: ${{ secrets.你的token变量名 }} # 刚刚在上面创建的变量名
              EXTERNAL_REPOSITORY: 你的github名/你的仓库名 # 如果按照上面的步骤走，则是username/username.github.io第一个仓库名
              PUBLISH_BRANCH: main
              PUBLISH_DIR: ./public
              commit_message: auto deploy

再添加一个**.gitignore**文件，把public文件夹等不需要上传的文件排除在外。

1
2
3
4

public
resources
.hugo_build.lock
hugo.exe

最后将themes/hugo-theme-next/exampleSite中的content和hugo.yaml复制到myblog文件夹中，并修改配置文件hugo.yaml中的baseURL为你的博客地址把原有的hugo.toml文件删除或改后缀名。

提交仓库

commit并push到GitHub仓库。

后记

这篇文章介绍了如何使用 Hugo 和 GitHub 客户端来搭建个人博客，希望对你有所帮助。
如果你有任何问题，欢迎在评论区告诉我。