Hugo + Github 免费部署自己的博客

博主：肆佬
发布时间：2025 年 03 月 07 日
26 次浏览
暂无评论
5088字数
分类：建站相关

使用hugo工具生成静态页面，然后在github上部署静态页面，来免费搭建自己的博客

</div>

## 1 环境准备

**前往【**[Git官网](https://git-scm.com/)】，下载安装程序

**一直点下一步，默认安装即可**

![Git官方](https://www.trrr.top/usr/uploads/2025/03/2794764904.jpg)

## 2 Hugo下载

**前往【**[Github hugo Releases](https://github.com/gohugoio/hugo)】，选择对应版本下载，下载后解压即可

**Windows下载版本：**`hugo_extended_xxxxx_windows_amd64.zip`

![image-20250307121454781](https://www.trrr.top/usr/uploads/2025/03/3813108467.jpg)

## 3 搭建博客

### 3.1 创建博客

**把** `hugo.exe`添加到系统的环境变量里面

**右键此电脑--->高级系统设置--->环境变量--->path--->添加** `hugo.exe`所在路径

![image-20250307122757403](https://www.trrr.top/usr/uploads/2025/03/1792505103.jpg)

**在** `hugo.exe`所在文件夹的地址栏敲打cmd，然后Enter唤起命令行

![image-20250307121949822](https://www.trrr.top/usr/uploads/2025/03/3612462762.jpg)

**敲打命令** `hugo new site xxxx`创建hugo文件

![image-20250307122137913](https://www.trrr.top/usr/uploads/2025/03/1872239219.jpg)

**敲打命名** `cd xxxx`切换目录

![image-20250307122327007](https://www.trrr.top/usr/uploads/2025/03/871271568.jpg)

**敲打命令** `hugo server -D`启动服务，访问[http://localhost:1313](http://localhost:1313/)，Ctrl+C停止服务

![image-20250307123132931](https://www.trrr.top/usr/uploads/2025/03/3463002417.jpg)

**hugo默认是没有主题的，需要进行主题配置**

![image-20250307123222773](https://www.trrr.top/usr/uploads/2025/03/1297247364.jpg)

### 3.2 配置主题

**前往【**[Hugo Themes](https://themes.gohugo.io/)】，查找自己喜欢的主题，进行下载

![image-20250307123333895](https://www.trrr.top/usr/uploads/2025/03/3541284774.jpg)

**这边以【**[Stack主题](https://github.com/CaiJimmy/hugo-theme-stack/tags)】为例，将下载好的主题解压，放到 `/themes`文件夹中

![image-20250307123543599](https://www.trrr.top/usr/uploads/2025/03/1972907970.jpg)

**将** `exampleSite`样例数据中的 **Content** 和 **hugo.yaml** 复制到主文件夹中，并删掉 `hugo.toml`和 `content/post/rich-content`

![image-20250307123732751](https://www.trrr.top/usr/uploads/2025/03/2141435566.jpg)

![image-20250307123848757](https://www.trrr.top/usr/uploads/2025/03/1360343240.jpg)

![image-20250307123825314](https://www.trrr.top/usr/uploads/2025/03/1993332908.jpg)

**修改** `theme`中主题的名字，将他修改为跟 `hugo.yaml`主题文件夹同名

![image-20250307124039479](https://www.trrr.top/usr/uploads/2025/03/491016391.jpg)

**再次启动hugo服务** `hugo server -D`，查看主题，具体主题配置修改 **hugo.yaml**，这里不细说，感兴趣可自行查找相关文章

![image-20250307124401956](https://www.trrr.top/usr/uploads/2025/03/3350608308.jpg)

### 3.3 修改主题

## 4 Github部署

### 常规部署

**前往【**[Github官网](https://github.com/)】，创建仓库 `{github用户名}.github.io`

![image-20250307125112549](https://www.trrr.top/usr/uploads/2025/03/2119578359.jpg)

**前往** `Setting -> Pages -> Branch`选择main分支，然后保存，会自动开启 **https://{github用户名}.github.io** 的地址，这地址也是以后访问博客的地址

![image-20250307124829065](https://www.trrr.top/usr/uploads/2025/03/1631925251.jpg)

**回到hugo文件中，删除** `public文件夹`执行命令 `hugo -D`，会重新生成 `public` 静态资源文件夹

![image-20250307125437463](https://www.trrr.top/usr/uploads/2025/03/53533585.jpg)

**在 **`public` 执行以下命令上传到github仓库上，第一次上传可能需要输入账号密码

```
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin {你的github仓库地址}
git push -u origin main
```

**上传成功后访问 **`https://{github用户名}.github.io`，成功搭建属于自己的Hugo博客

## 5 Github Action自动部署

**Github创建一个新的仓库，用于存放Hugo的主文件**

**前往** `Setttings -> Developer Settings -> Personal access tokens`，创建一个 `token(classic)`

![image-20250307125757376](https://www.trrr.top/usr/uploads/2025/03/305508777.jpg)

**token选择永不过期，并勾选 **`repo` 和 `workflow` 选项

![image-20250307125850064](https://www.trrr.top/usr/uploads/2025/03/3321125752.jpg)

**为保证安全，将生成的token，保存到仓库的变量中，前往** `Settings -> Secrets and variables -> Actions`中设置

![image-20250307130008408](https://www.trrr.top/usr/uploads/2025/03/1917714540.jpg)

![image-20250307130228677](https://www.trrr.top/usr/uploads/2025/03/2156957236.jpg)

**在hugo主文件创建一个** `.github/workflows/xxxx.yaml`文件，将以下内容复制进去，想具体了解更多，可查看【[Github Action文档](https://docs.github.com/zh/actions)】

```
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名/你的仓库名
              PUBLISH_BRANCH: main
              PUBLISH_DIR: ./public
              commit_message: auto deploy
```

**在hugo主文件创建** `.gitignore`文件，来避免提交不必要的文件

```
# 自动生成的文件
public
resources
.hugo_build.lock
```

**将hugo的主文件上传到仓库，上传成功后会触发** `Github Action`，来自动部署你的静态页面

```
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin {你的github仓库地址}
git push -u origin main
```

最后修改：2025 年 03 月 08 日