使用 GitHub Discussions 管理博客

我的博客

分享一下我搭建博客的方案:

  1. 使用 Astro 作为静态博客框架(本地启动速度快)。
  2. 部署在 GitHub Pages 服务上(免费)。
  3. 自动同步 GitHub Discussion 到博客内容(可以使用 GitHub 手机客户端编辑 Discussion)。
  4. 使用 giscus 做为博客的评论插件(直接评论到 Discussion,完美!)。

缺点:

  • 仅支持标题搜索,无法根据博客内容搜索文章。Astro 可以集成 algolia 搜索,因为我的博客文章还很少,暂时没有研究。

创建 GitHub Pages 项目

参考 GitHub 官方文档 创建 Pages 项目。

其中 Build and deployment 中的 Source 选择为 GitHub Actions,这是 Astro 发布到 GitHub Pages 的前提条件。

开启项目的 Discussion 功能。

giscus 配置到 GitHub Pages 项目。建议把用不到的 Category 删掉。创建几个 Announcement 类型的 Category,确保只有仓库的管理员有权限新增 Discussion,避免其他人发的帖子被同步到仓库。

创建 Astro 项目

参考 Astro 官网说明创建项目,有很多主题可以选择。

我使用的 AstroPaper 主题。

配置 Astro 发布到 GitHub Pages 的功能

官方文档

本博客的实例

编写将 Discussion 同步到本地目录的脚本

我在 scripts 目录中新建了 process-discussions.mjs 文件。

然后在 packages.json 文件里新增了一个命令。

json 复制代码
{
  "scripts": {
    "process": "node scripts/process-discussions.mjs"
  }
}

process-discussions.mjs 脚本接收一个文件参数,这个文件是 GitHub Action 的 Payload,具体的信息可以参考 GitHub 文档

因为 Payload 中的内容有限,所以又通过 GitHub 的 GraphQL API 查询出变更的 Discussion 的内容。

其中,在 <!----- -----> 之间的内容,是 Astro Markdown 文件的 front matter 的内容。

文章的标题、描述、发布时间和修改时间如果没有指定,会从 Discussion 的对应属性里取得。 Discussion 的 Label 会转为博客的 tag 属性。 Discussion 被置顶后,博客的 featured 属性会标记为 true

例如:

markdown 复制代码
<!-----
slug: manage-blog-posts-with-github-discussions
description: 文章描述
----->

配置 Discussion 同步到仓库

写完前面的脚本后,还需要在 Discussion 有变更的时候,运行前面的脚本,把 Discussion 的内容转为 Astro 博客的 Markdown 文件,然后提交到仓库的主分支,触发博客的自动部署功能。

这样一来,编辑博客只需要在 GitHub Discussion 页面在线操作就可以了,图片和文件也是放到了 GitHub assets 里,不会增加仓库的体积。

新增一个 GitHub Workflow 配置文件。

yaml 复制代码
name: Generate blog based on discussions

on:
  discussion:
    types: [created, edited, deleted, pinned, unpinned, labeled, unlabeled, category_changed]

permissions:
  contents: write
  pages: write
  id-token: write

jobs:
  process-payload:
    # 只有这里配置的 Category 中的 Discussion 才会同步到仓库。多个 Category 用英文逗号 "," 分割。
    if: contains(fromJson('["release", "memo"]'), github.event.discussion.category.slug)
    name: Process payload
    runs-on: ubuntu-latest
    env:
      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
    steps:
      - uses: actions/checkout@v3
        name: Checkout
      - uses: actions/setup-node@v3
        name: Install Node.js
        with:
          node-version: 18
      - run: npm i -g pnpm
        name: Install pnpm
      - run: pnpm install --frozen-lockfile
        name: Install dependencies
      - run: pnpm run process "${{github.event_path}}"
        name: Process discussion payload
      - name: Commit & Push changes
        uses: actions-js/push@master
        with:
          branch: master
          github_token: ${{ secrets.GITHUB_TOKEN }}
      - name: Install, build, and upload your site
        uses: withastro/action@v1
        with:
          path: .
          node-version: 18
          package-manager: pnpm@latest

  deploy:
    needs: process-payload
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1

实例

这篇博客,就是先在名为 Draft 的 Category 里编辑,等觉得差不多可以发布了,再移动到 Release 这个 Category。

因为 Workflow 的配置,Category 是 release 或者 memo 时才会同步到仓库,然后正式发布到博客网站。

相关推荐
前端 贾公子7 分钟前
Monorepo + vite 怎么热更新
前端
然我43 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台2 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹2 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux