静态博客添加说说或朋友圈页面，是一个老生常谈的话题了，以往很多方法要么搭建起来麻烦，要么用起来麻烦，为彻底解决这个问题，我今天试了下使用 Github Issue 来搭建，只需要简单两步，即可搭建一个能够即时动态更新的说说页面。
主要原理
使用 Github issue 作为说说内容发布平台，通过在静态博客上新建页面引用 Github issue 内容，实现页面发布。使用 Github Action 跟踪 issue 变化情况，在有变动时触发博客页面更新。
优点：
- 基于 Github 搭建，操作简单，维护容易。不懂的直接找 AI ，100% 都能解决。
- Github 提供手机 APP ，可以将 issue 作为快捷方式添加到桌面进行快速操作，跟微信发朋友圈没啥区别。
- 内容安全可控，随时可迁移，没有容量焦虑，理论上可发布内容数量无上限。
缺点：暂时没有想到。
搭建方法
在博客模板中新建一个说说页面
例如，Hugo 可以在 layouts 文件夹中新建一个 monents.html 之类文件名的文件，使用 resources.GetRemote 远程获取你想要将说说页面。一般是 https://api.github.com/repos/microsoft/vscode/issues/519/comments 这种格式链接。
复制一个博客上的静态页面模板内容，适当修改，完成必要的主题设置。
示例：
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
| {{ define "main" }}
<article class="main-article">
{{ $url := "https://api.github.com/repos/microsoft/vscode/issues/519/comments" }}
{{ $opts := dict
"headers" (dict "User-Agent" "Hugo Static Site Generator")
}}
{{ with resources.GetRemote $url $opts }}
{{ if and .Content (ne .Content "") }}
{{ $comments := .Content | transform.Unmarshal (dict "format" "json") }}
<div class="moments-feed">
{{ range $comments }}
<article class="moment-article">
<header class="article-header">
<div class="article-details">
<footer class="article-time">
<div>
{{ .created_at | time.Format "2006-01-02 15:04" }}</time>
</div>
</footer>
</div>
</header>
<section class="article-content">
<div class="moment-content">
{{ .body | markdownify }}
</div>
</section>
</article>
{{ else }}
<p>暂无动态</p>
{{ end }}
</div>
{{ else }}
<p class="no-content">内容为空</p>
{{ end }}
{{ else }}
<p class="error">⚠️ 无法获取评论</p>
{{ end }}
</article>
|
设置更新触发器
之前我曾打算用私有仓库测试，后发现私有仓库 issue 中的图片无法被远程读取，建议采用公开仓库操作。否则只能在私有化仓库的 issue 中使用远程图片。
区分两种情况：静态博客仓库与 issue 所在仓库相同；静态博客仓库与 issue 所在仓库不同。
博客与说说同仓库
只需要在原有仓库的部署文件上添加以下内容即可。
1
2
3
| on:
issue_comment:
types: [created, edited]
|
博客与说说不同仓库
如果博客仓库本身是不公开的，最好就是新建一个说说专用的仓库使用。
- 在 Github 上新建一个公开仓库，用来发布说说内容
- 在仓库
.github/workflows 路径添加一个 issue.yml 文件作为触发器 - 在 Github 账号设置
Personal access tokens 中添加一个 token , 勾选 repo 权限，复制到说说仓库 secrets and variables - action 中，名称为 PAT 。
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
44
45
46
47
| name: Trigger Empty Commit on Issue Update
on:
issue_comment:
types: [created, edited]
jobs:
trigger-empty-commit:
runs-on: ubuntu-latest
steps:
- name: Check if the comment is on the target issue
id: check-issue
run: |
if [ "${{ github.event.issue.number }}" != "1" ]; then
echo "should_trigger=false" >> $GITHUB_OUTPUT
else
echo "should_trigger=true" >> $GITHUB_OUTPUT
fi
- name: Trigger empty commit in user.github.io
if: steps.check-issue.outputs.should_trigger == 'true'
uses: actions/github-script@v6
env:
PAT: ${{ secrets.PAT }} # 确保 PAT 已正确设置
with:
script: |
const { execSync } = require('child_process');
const repo = 'user/user.github.io'; // 改为自己 HUGO 仓库
const token = process.env.PAT;
try {
const repoUrl = `https://x-access-token:${token}@github.com/${repo}.git`;
console.log(`Cloning ${repo}...`);
execSync(`git clone ${repoUrl}`);
process.chdir('user.github.io'); // 改为自己 HUGO 仓库
execSync('git config user.name "github-actions[bot]"');
execSync('git config user.email "4189+github-actions[bot]@users.noreply.github.com"');
execSync('git commit --allow-empty -m "Trigger update from moments/issues/1"');
execSync(`git push ${repoUrl} master`);
console.log('✅ Empty commit pushed successfully!');
} catch (error) {
console.error('❌ Error:', error.message);
process.exit(1);
}
|
