Hugo + Aliyun OSS + Github Action 快速构建网站

发布时间 2023年11月7日 (更新时间 2023年12月21日) • 3 分钟 读完 • 470 字
分享链接

今天分享 Hugo + Aliyun OSS + Github Action 5分钟快速构建网站，写完文章仅需一条命令就可以完成自动部署。

Hugo + Aliyun OSS + Github Action 快速构建网站
Photo by rayhennessy on Unsplash

文章没写几篇，工具折腾的确不少，早起使用 Hexo 后面发现文章数量达到一定量级后，文档的编译速度会很慢，后面就转到了 Hugo，今天分享一下使用 Hugo + Aliyun OSS + Github Action 快速构建网站，每次写完文章后，一条命令 git push 将文章推送到版本库，通过 Github Action 就会文章的自动部署，具体怎么做，跟住我的步骤咱们现在就开始吧。

1. 前期准备

  1. 一个域名，可以在阿里云 或者 godaddy上购买，比如我在阿里云上购买的 codingbing.com
  2. 一个 Github 账号，用于托管你的小作文，写完后并且使用其提供的 Action 完成自动部署你的小作文
  3. 一个 OSS 静态资源托管平台账号，用于存放打包成静态文件的小作文，可以是阿里云、也可是其他平台如七牛云等，或者不用 OSS 使用 GitHub Pages，但是国内访问速度会打折扣

2. Hugo 安装

  1. 本文使用 hugo 构建网站，所以要现在本机电脑上安装 hugo 和 git

安装方法这里就不啰嗦了，点击对应链接查看具体安装方法。

安装后就可以使用其命令，例如查看其版本

(base) ➜ hugo version
hugo v0.119.0-b84644c008e0dc2c4b67bd69cccf87a41a03937e+extended darwin/amd64 BuildDate=2023-09-24T15:20:17Z VendorInfo=brew
(base) ➜ git version
git version 2.21.0

3. Hugo 快速入门

运行这些命令创建一个带有 Ananke 主题的 Hugo 站点，其他详细请参考官方 快速入门 文档。

hugo new site quickstart
cd quickstart
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo "theme = 'ananke'" >> hugo.toml
hugo server

如果这个不是你喜欢的，可以在官网寻找自己喜欢的主体 hugo themes，我选择的是 gethinode 主题。

4. 文章编写

在 content 目录下创建 Markdown 文件来编写你的文章。使用以下命令可以快速创建一篇新文章：

hugo new posts/my-first-post.md

然后编辑 my-first-post.md 文件，填写你的文章内容。

5. Git 提交

将你的小作文内容，连同整个项目一起提交到 GitHub 保存，一是版本控制二是可以在多台电脑协作，比如家里电脑和公司电脑都可以协作。

git add .
git commit -m "Add new post"
git push origin main

Git 命令的其他高级用法这里就不做过多介绍了。

6. GitHub Action 自动部署

在你的 GitHub 仓库中，点击上方导航栏中的 “Actions”，选择 “Set up a workflow yourself”。在弹出的编辑器中，粘贴以下配置：

name: github pages

on:
  push:
    branches:
      - main  # Set a branch to deploy
      - master
  pull_request:

jobs:
  deploy:
    runs-on: ubuntu-22.04
    concurrency:
      group: ${{ github.workflow }}-${{ github.ref }}    
    steps:
      - uses: actions/checkout@v4
        with:
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

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

      - name: Build
        run: hugo --minify  
               
      - name: Deploy HTML to OSS
        uses: fangbinwei/aliyun-oss-website-action@v1
        with:
            accessKeyId: ${{ secrets.OSS_KEY_ID }}
            accessKeySecret: ${{ secrets.OSS_KEY_SECRET }}
            bucket: codingbing
            # e.g. "oss-cn-shanghai.aliyuncs.com"
            endpoint: oss-cn-hongkong.aliyuncs.com
            folder: ./public

或者手动在项目内创建文件.github/workflows/deplay.yml，并粘贴以上配置内容，该文件下 .github/workflows/deplay.yml 就是描述 Action 流程的配置文件。

其中 ${{ secrets.OSS_KEY_ID }} 和 ${{ secrets.OSS_KEY_SECRET }} 是 Action 执行时所需的变量，配置位置 /settings/secrets/actions

以我的 deplay.yml 文件为例，提交到内容到 main 和 master 分支后，会自动触发 jobs 执行以下流程 Setup Hugo–Build–Deploy HTML to OSS

Setup Hugo

  • 使用 peaceiris/actions-hugo@v2 指定 hugo 版本

Build

  • 运行 hugo –minify 将网站打包成静态 HTML ，默认输出至 public 文件下

Deploy HTML to OSS

  • 使用 fangbinwei/aliyun-oss-website-action@v1 其将 ./public 文件下所有内容，上传至阿里云 OSS

7. 配置 OSS

默认的阿里云 OSS 是不能解析静态的，接下来配置阿里云 OSS 使其可以解析 HTML 内容，如图所示：

8. 集成评论插件

评论插件

gethinode 主题默认支持 github 评论的插件如：utterances，config/_default/params.toml配置项开启并授权 github 评论仓库即可，详情参考

[comments]
    enabled = false
    repo = "" # Replace with your repository.
    #issueTerm = "pathname" # pathname, url, title, og:title
    #label = "comment"
    # By default, light and dark mode correspond to github-light and github-dark, respectively.
    # Optional values: github-light, github-dark, preferred-color-scheme, github-dark-orange, icy-dark, dark-blue, photon-dark.
    #theme = ""

以上配置来自 gethinode exampleSite

但是因为这个评论前需要 github 授权登录后才能评论，我不想要这样的，于是选择了 twikoo，主体默认不支持 twikoo 评论插件，为该主题增加了评论页面 layouts/partials/assets/comments.html，复制如下内容：

{{- $params := .Site.Params.comments -}}
{{- with $params -}}
<h2>{{ T "comments" }}</h2>
<div id="tcomment"></div>
<script src="https://cdn.staticfile.org/twikoo/1.6.25/twikoo.all.min.js"></script>
<script>
twikoo.init({
  envId: {{ $params.envId }},
  el: '#tcomment', // 容器元素
  // region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
  // path: location.pathname, // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
  lang: {{ $params.lang }}, // 用于手动设定评论区语言，支持的语言列表 https://github.com/twikoojs/twikoo/blob/main/src/client/utils/i18n/index.js
})
</script>
{{- end -}}

twikoo 有很多种部署方式，我选择了 Netlify 部署 的部署形式，部署成功后会给拿到一个评论地址 netlify-host，其他部署方式参考twikoo 部署方式

在 config/_default/params.toml 配置文件中增加 $params.envId 和 $params.lang 配置选项值。

[comments]
    enabled = true
    ## twikoo
    envId = "netlify-host"
    path = "location.pathname"
    lang = "zh-CN"

该评论插件还支持 垃圾邮件过滤、邮件通知等等，好了，截止到这就结束了 :)

评论

On this page
关注我

我的工作是编码和发布开发者表情包