静态博客添加说说或朋友圈页面，是一个老生常谈的话题了，以往很多方法要么搭建起来麻烦，要么用起来麻烦，为彻底解决这个问题，我今天试了下使用 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>
|
设置更新触发器
在现有的 Github Action 模板上添加触发器。
1
2
3
4
5
6
7
8
|
on:
push:
branches:
- master
issues:
types: [opened, edited, deleted]
issue_comment:
types: [created, edited, deleted]
|
如果仓库本身已设置为不公开，或者担心安全问题，可以新创建一个仓库设置。
如果像我这样， Hugo 本身是私有仓库，issue 当前也没有其他用途，但网站同时部署在 VPS Vercel 和 CloudFlare Pages，搞起来比较麻烦的，则只需要创建一个触发器，当侦测到 issue 有变化时，在原仓库创建一个空提交即可。（此时需要在模板中增加一个token验证，否则无法读取私有仓库的issue）
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
|
name: Trigger Build on Issue Update
on:
issues:
types: [opened, edited, reopened]
issue_comment:
types: [created, edited]
jobs:
trigger-vercel:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Create empty commit
run: |
git config user.name "GitHub Actions"
git config user.email "actions@github.com"
git commit --allow-empty -m "Trigger Vercel build for issue ${{ github.event.issue.number }}"
- name: Push changes
uses: ad-m/github-push-action@v0
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
branch: master
|