Featured image of post 基于Hugo快速部署GihubPages个人博客

基于Hugo快速部署GihubPages个人博客

Hugo是什么？

Hugo是由Go编写的快速现代静态网站生成器，旨在让网站创建变得有趣。

Hugo是一个通用的网站框架。从技术角度来说，Hugo是一个静态生成器。与每个访问者请求动态构建页面的系统不同，Hugo在创建或更新内容时构建页面。由于网站被查看的频率远远多于编辑的频率，Hugo旨在为您的网站最终用户提供最佳的查看体验，并为网站作者提供理想的编写体验。

使用Hugo构建的网站非常快速和安全。Hugo网站可以托管在任何地方，包括Netlify，Heroku，GoDaddy，DreamHost，GitHub Pages，GitLab Pages，Surge，Firebase，Google Cloud Storage，Amazon S3，Rackspace，Azure和CloudFront，并且与CDN配合良好。Hugo网站运行无需数据库或Ruby、Python或PHP等昂贵运行时的依赖。

环境准备

下载Hugo

下载git

搭建博客

创建博客

解压 hugo_extended_0.134.2_windows-amd64.zip文件，里面包含一个 hugo.exe 可将其添加至环境变量..

点击进入并cmd打开命令行窗口，输入 hugo new site xxxx创建文件

显示如下界面创建成功：

在命令行中切换到已创建好的 dev文件夹，输入 hugo server -D，运行成功出现以下界面：

打开浏览器输入 http://localhost:1313/出现hugo即表示搭建成功

下载主题

在hugo官网中提供了很多主题demo和地址

挑选喜欢的主题，并且下载，本文主题选用的是hugo-theme-stack，通过github下载（或者git add submodule）

将文件解压存储在 dev\themes文件下，并将 exampleSite样例数据中的 Content 和 hugo.yaml 复制到主文件夹中，并删掉 hugo.toml

修改hugo.yaml配置文件，自定义页面配置等信息

此时运行 hugo server -D 并访问 localhost:1313 即可看见主题页面下的hugo网站

Github部署

这里演示的是通过Github Action自动部署的Github Page，也可通过push自己的public目录下静态文件来部署（只不过每次更新都需要重新hugo -D生成，比较麻烦）

  • 准备工作：创建一个自己的github账号。
  • 新建仓库，命名要用 {github用户名}.github.io，如果这是你搭建的第一个博客，这一步最好在前面用自己的用户名，这会避免很多Bug（创建后不需要动了）
  • Github上面重新建一个仓库，可以任意命名，用于存放Hugo的主文件，可以设置为 private
  • 前往 settings -> Developer Settings -> Personal access tokens，创建一个token(classic)。
  • token选择永不过期，并且勾选repo和workflow选项。
  • 为保证安全，将生成的token，保存的仓库的变量中，前往 Settings -> Secrets and variables -> Actions中设置。（ 注意：token只能显示一次，可事先保存 ）

  • 在hugo主文件创建一个 .github/workflows/xxxx.yaml文件，将以下内容复制进去，想具体了解更多，可查看【Github Action文档】。
 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


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
              submodules: recursive  # 添加这一行然后一次执行以下命令（会删除原本的主题文件，使用go modules进行管理，保证能读取所有的主题子模块）：
              # git rm -r --cached themes/hugo-theme-stack
              # rm -rf themes/hugo-theme-stack
              # git submodule add https://github.com/CaiJimmy/hugo-theme-stack.git themes/hugo-theme-stack
              # git add .
              # git commit -m "fix: correctly add theme submodule"
              # git push origin main
              # git submodule update --init --recursive

        - 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.ACTION_ACCESS_TOKEN }}
              EXTERNAL_REPOSITORY: ShifanShen/ShifanShen.github.io
              PUBLISH_BRANCH: main
              PUBLISH_DIR: ./public
              commit_message: auto deploy
  • 在hugo主文件创建 .gitignore文件，来避免提交不必要的文件
1
2
3
4
5
6
7

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

# hugo命令
hugo.exe
  • 将hugo的主文件上传到仓库，上传成功后会触发Github Action，来自动部署你的静态页面
1
2
3
4
5
6

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

之后博客更新部署只需要修改好你的文档，直接 push 到你的仓库，不需要手动去部署

至此，已经成功搭建了一个简单的Github Pages博客，也是本站的部署方式~

Licensed under CC BY-NC-SA 4.0