从零构建Hugo主题 - IV

这是一个系列博客，记录了我从零开始构建Hugo主题https://github.com/tomowang/hugo-theme-tailwind 的过程。全系列包括四篇文章，这是第四篇：

持续集成

处理完系列博客之前文章中描述的功能后，大部分的代码工作做完了。但是作为一个期望给其他人使用的项目，还有一些额外的工作需要处理。

作为一款hugo的主题仓库，持续集成可以包含几个方面，如示例站点的自动化部署，基于git标签的自动化版本发布等。关于示例站点，hugo生成的静态站点可以很方便地发布到GitHub Pages中，而GitHub Action 提供操作GitHub Pages的actions。这里我使用了三个actions：

actions/configure-github-pages - 配置GitHub Pages并获取一些元信息，如base_url
actions/upload-pages-artifact - 上传资源至GitHub Pages
actions/deploy-pages - 部署至GitHub Pages

GitHub Pages相关的工作流需要额外的权限：

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

同时hugo编译参数--baseURL需要使用GitHub Pages的元信息：

- name: Setup Pages
  id: pages
  uses: actions/configure-pages@v3

- name: Build with Hugo
  env:
    # For maximum backward compatibility with Hugo modules
    HUGO_ENVIRONMENT: production
    HUGO_ENV: production
  run: |
    hugo -s exampleSite --minify --gc --themesDir ../.. \
      --baseURL "${{ steps.pages.outputs.base_url }}/"

GitHub Actions的代码放在.github/workflows/目录中，通过提交代码自动化触发。

同时，我配置了指向GitHub域名的DNS解析hugo-theme-tailwind.tomo.dev -> tomowang.github.io，这样用户就可以通过https://hugo-theme-tailwind.tomo.dev 访问示例网站。

推广

如果期望让更多人了解到我构建的主题，最好的方式是将其提交的官方的主题站点。 hugo提供GitHub仓库来构建官方主题站点https://themes.gohugo.io/ ，同时详细地描述如何提交。

在config.toml配置文件中描述支持的hugo版本
使用theme.toml文件描述主题的一些元信息，包括名称、版权、标签、作者等
一份描述性的README文档，用作GitHub的主页，同时用来展示主题的在站点的详情页
主题的截图与缩略图，尺寸要求如下
1. 截图 (screenshot.png 或者 screenshot.jpg)，尺寸要求至少1500×1000像素
2. 缩略图 (tn.png 或者 tn.jpg)，尺寸要求至少900×600像素

做完这些后，参考git的流程对官方主题仓库进行fork、改动、commit以及提交PR。我提交了我的PR#391 。幸运的是PR很快被合并到仓库，最后在官方的主题站点能够访问到我构建的主题：https://themes.gohugo.io/themes/hugo-theme-tailwind/ 。

其他的推广渠道包括官方的论坛，新主题的讨论有单独的版块new theme ，我创建了新的话题对主题进行介绍。

另外，一些三方的主题站点会根据GitHub仓库的topics配置进行数据采集，如builtatlightspeed ，在GitHub仓库配置hugo-theme topic，可以使一些主题站点对仓库进行爬取和收录。我配置的完整的Topics有theme hugo-theme hugo gohugo hugo-blog hugo-blog-theme tailwind tailwindcss tailwind-theme hugo-blog-template

目前被自动收录的站点有：

当然还有其他的一些主题站点可以通过PR进行提交，如https://jamstackthemes.dev/ 。