Hugo 简明教程 04

May 29, 2024 Hugo

Hugo 简明教程 04

本文主要讲解 hugo 的部署方法。

build 命令

除了基础的 hugo build 其实 build命令支持不少参数，下面介绍一下比较有用的参数。

  -b, --baseURL string             绑定域名, 比如 https://fatesinger.com/
  -D, --buildDrafts                包含草稿
  -E, --buildExpired               包含过期内容
  -F, --buildFuture                包含日期在将来的内容
  -c, --contentDir string          content 目录，一班不需要改
      --disableKinds strings       禁用页面类型，同时生成多个站点时有用
      --gc                         构建完成后移除部分缓存
      --ignoreCache                忽略缓存
      --minify                     压缩html
  -t, --theme strings              要使用的主题，同时生成多个站点时有用

一般来说，默认 hugo build 就可以了，像我这种多平台多域名多主题部署这些参数才有意义。

手动部署

绝大部分人都推荐的方法是通过 github actions 自动部署，我个人觉的手动部署也很方便。自动部署也只不过在云端进行手动部署的步骤而已。简单来说 hugo 部署就两步

使用 hugo build 命令生成 html 文件
将生成的文件上传到托管平台或者服务器

执行完构建命令后你可以把生成的 html 文件上传到任何你喜欢的平台。如果你没有特别的需求甚至也不需要用 git 来原理仓库，毕竟对于普通用户来说，各种命令难以理解。

本地手动部署还有一个优点就是构建速度很快，一般 PC 的配置还是要比服务器的配置强一点，尤其 Mac 的 ssd，构建速度很快。手动上传也可以克服各种网络困难。如果你上传到自己的服务器，那么你还需要部署一个简单的 nginx 服务，因为是纯静态，所以只需要傻瓜配置。

自动部署

通过 github actions，联动各个平台进行自动部署，想自动部署都需要使用 git 仓库，需要学习一些基础的 git 命令，或者使用可视化工具，如果你不想学习命令，我推荐使用 github 官方的客户端。

自动部署的原理都是在云端执行 build 命令，然后通过密钥上传到平台。也可以在平台直接绑定 github 仓库，这样更懒人，但需要自己配置一下构建命令，还是那句话，普通用户直接默认配置足够。

Github pages

如果域名都懒得买，我最推荐这个托管平台，直接给你一个*.github.io的域名，虽然百度不收录，但也无所谓了。当然，github pages 是支持绑定域名的，但既然是有域名，我更推荐使用下面的 Cloudflare pages，网络上会更顺畅一些。

下面是自动部署 github pages 的 action 配置 .github/workflows/main.yml，在.github/workflows/下的 yml 就是 github actions 的配置文件

name: Bigfa

on:
    push:
        branches:
            - main # master 更新触发

jobs:
    build-deploy:
        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v3
              with:
                  submodules: recursive
                  fetch-depth: 0

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

            - name: Build
              run: hugo --gc --minify --cleanDestinationDir --ignoreCache

            - name: Deploy
              uses: peaceiris/actions-gh-pages@v3
              with:
                  personal_token: ${{ secrets.Bigfa }} # personal_token 这里新建一个 https://github.com/settings/tokens
                  PUBLISH_BRANCH: gh-pages # 推送到当前 gh-pages 分支
                  PUBLISH_DIR: ./public # hugo 生成到 public 作为跟目录
                  commit_message: ${{ github.event.head_commit.message }}

Cloudflare pages

有域名最推荐，推荐使用全家桶，下面是自动上传到 cloudflare pages 的配置文件.github/workflows/main.yml

name: Bigfa

on:
    push:
        branches:
            - main # master 更新触发

jobs:
    build-deploy:
        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v3
              with:
                  submodules: recursive
                  fetch-depth: 0

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

            - name: Build notability demo
              run: hugo --gc --minify --ignoreCache --cleanDestinationDir -b https://cl.wpista.com/

            - name: Publish to Cloudflare Pages
              uses: cloudflare/pages-action@v1
              with:
                  apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
                  accountId: d0a457cef81f6ea340f9ff6ca6b6ff7a
                  projectName: notability
                  directory: ./public
                  wranglerVersion: "3"

Vercel

Vercel 很棒，但还是和 next.js 是绝配。我的 vercel 版本，默认情况下国内访问速度一般，但能对付用。

Vercel 和前两个平台不同，vercel 默认是需要绑定 git 仓库，但是也仍然可以通过 github actions 进行更新。

默认情况下，vercel 绑定你的 github 仓库，选择 hugo 平台，然后默认输出即可。默认情况下 vercel 的 hugo 版本很低，推荐手动指定版本。项目根目录下创建文件 vercel.json

{
  "build": {
    "env": {
      "HUGO_VERSION": "0.125.4"
    }
  }
}

设置环境变量

Vercel -> Project-> Settings -> Environment Variables
————
HUGO_VERSION 0.125.4

这里建议重新设置下 build command,如果你的配置文件中已经配置绑定域名，则可忽略-b 参数。

hugo --gc --minify -b https://vercel.wpista.com/

阿里云 oss

有备案域名的话非常推荐，国内速度可以说是相当快了，不过也有缺点，就是需要计费。如使用阿里云 oss 则可以把图片一起放在项目目录下。

name: Bigfa

on:
    push:
        branches:
            - main # master 更新触发

jobs:
    build-deploy:
        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v3
              with:
                  submodules: recursive
                  fetch-depth: 0

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

            - name: Build notability demo
              run: hugo --gc --minify --ignoreCache --cleanDestinationDir -b https://cl.wpista.com/

            - name: upload files to OSS
              uses: fangbinwei/aliyun-oss-website-action@v1
              with:
                  accessKeyId: ${{ secrets.ACCESS_KEY_ID }}
                  accessKeySecret: ${{ secrets.ACCESS_KEY_SECRET }}
                  bucket: your-bucket-name
                  # use your own endpoint
                  endpoint: oss-cn-shanghai.aliyuncs.com
                  folder: ./public

总结

整套流程看上去比较复杂，其实只需要修改下变量即可，即使不理解也能正常使用，当项目有更新的时候即使 commit 和 push 即可。想深度自定义的话还是需要了解一下 git 的基本原理，github actions 本身还是非常强大的，而 cloudflare 全家桶更是良心的不行。把动态网站那一套移植过来完全不成问题，具体玩法可以参考我站内的其他文章。