只需 2 步简单操作，一劳永逸解决静态博客添加朋友圈、说说之类的功能
静态博客添加说说或朋友圈页面，是一个老生常谈的话题了，以往很多方法要么搭建起来麻烦，要么用起来麻烦，为彻底解决这个问题，我今天试了下使用 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{{ define "main" }}
2<article class="main-article">
3
4
5 {{ $url := "https://api.github.com/repos/microsoft/vscode/issues/519/comments" }}
6 {{ $opts := dict
7 "headers" (dict "User-Agent" "Hugo Static Site Generator")
8 }}
9
10 {{ with resources.GetRemote $url $opts }}
11 {{ if and .Content (ne .Content "") }}
12 {{ $comments := .Content | transform.Unmarshal (dict "format" "json") }}
13 <div class="moments-feed">
14 {{ range $comments }}
15 <article class="moment-article">
16 <header class="article-header">
17 <div class="article-details">
18 <footer class="article-time">
19 <div>
20 {{ .created_at | time.Format "2006-01-02 15:04" }}</time>
21 </div>
22 </footer>
23 </div>
24 </header>
25
26 <section class="article-content">
27 <div class="moment-content">
28 {{ .body | markdownify }}
29 </div>
30 </section>
31 </article>
32 {{ else }}
33 <p>暂无动态</p>
34 {{ end }}
35 </div>
36 {{ else }}
37 <p class="no-content">内容为空</p>
38 {{ end }}
39 {{ else }}
40 <p class="error">⚠️ 无法获取评论</p>
41 {{ end }}
42</article>设置更新触发器
之前我曾打算用私有仓库测试，后发现私有仓库 issue 中的图片无法被远程读取，建议采用公开仓库操作。否则只能在私有化仓库的 issue 中使用远程图片。
区分两种情况：静态博客仓库与 issue 所在仓库相同；静态博客仓库与 issue 所在仓库不同。
博客与说说同仓库
只需要在原有仓库的部署文件上添加以下内容即可。
1on:
2 issue_comment:
3 types: [created, edited]博客与说说不同仓库
如果博客仓库本身是不公开的，最好就是新建一个说说专用的仓库使用。
- 在 Github 上新建一个公开仓库，用来发布说说内容
- 在仓库
.github/workflows路径添加一个issue.yml文件作为触发器 - 在 Github 账号设置
Personal access tokens中添加一个 token , 勾选repo权限，复制到说说仓库secrets and variables - action中，名称为PAT。
1name: Trigger Empty Commit on Issue Update
2
3on:
4 issue_comment:
5 types: [created, edited]
6
7jobs:
8 trigger-empty-commit:
9 runs-on: ubuntu-latest
10 steps:
11 - name: Check if the comment is on the target issue
12 id: check-issue
13 run: |
14 if [ "${{ github.event.issue.number }}" != "1" ]; then
15 echo "should_trigger=false" >> $GITHUB_OUTPUT
16 else
17 echo "should_trigger=true" >> $GITHUB_OUTPUT
18 fi
19
20 - name: Trigger empty commit in user.github.io
21 if: steps.check-issue.outputs.should_trigger == 'true'
22 uses: actions/github-script@v6
23 env:
24 PAT: ${{ secrets.PAT }} # 确保 PAT 已正确设置
25 with:
26 script: |
27 const { execSync } = require('child_process');
28 const repo = 'user/user.github.io'; // 改为自己 HUGO 仓库
29 const token = process.env.PAT;
30
31 try {
32 const repoUrl = `https://x-access-token:${token}@github.com/${repo}.git`;
33 console.log(`Cloning ${repo}...`);
34
35 execSync(`git clone ${repoUrl}`);
36 process.chdir('user.github.io'); // 改为自己 HUGO 仓库
37
38 execSync('git config user.name "github-actions[bot]"');
39 execSync('git config user.email "4189+github-actions[bot]@users.noreply.github.com"');
40
41 execSync('git commit --allow-empty -m "Trigger update from moments/issues/1"');
42 execSync(`git push ${repoUrl} master`);
43 console.log('✅ Empty commit pushed successfully!');
44 } catch (error) {
45 console.error('❌ Error:', error.message);
46 process.exit(1);
47 }#静态博客 #说说功能 #github issue #github action #极简搭建