今天查看Stellar文档，发现Giscus可以自建服务，想着也好久没有水文章了，便顺便记录一下折腾过程。

创建一个GitHub App

前往这个页面创建一个Github App

注册一个新的 GitHub App

image-20240411162146774

填入回调函数地址

image-20240411162400664

  • 使用 https://[YOUR-DOMAIN-HERE]/api/oauth/authorized 这样的格式作为回调地址，将中括号里的内容替换成你的域名。

    例如： https://giscus.app/api/oauth/authorized

  • 将“Expire user authorization tokens”取消勾选。

编辑权限

为Discussions开启读写权限：

image-20240411162855808

用户权限

选当前用户就行了：

image-20240411162935813

其他设置

  • Webhook，不需要使用取消勾选Active
  • Post installation，不需要使用

创建GitHub App

image

点击这个按钮

生成并下载Private keys

image-20240411163318459

生成并记录Client secrets

image-20240411163342018

记录app id 和 client id 备用

image-20240411163426135

安装APP

image-20240411163507793

配置 Supabase 以缓存访问令牌（可选）

GitHub 应用程序安装访问令牌的 TTL 为 60 分钟。您可以配置 giscus 将令牌缓存在 Supabase 表中。这减少了对 GitHub 的令牌请求数量，有助于防止应用程序达到速率限制。

  • 登录Supabase。

  • 创建一个新项目。

  • 在项目中创建一个新表。表名可以是任意的，但giscus使用installation_access_tokens作为默认值。

  • 按以下字段创建一个表：

    installation_id: int8, no default value, primary key, uncheck Is Identity
    token: varchar, no default value
    expires_at: timestamptz, no default value
    created_at: timestamptz, default value NOW()
    updated_at: timestamptz, default value NOW()

    None of the columns are nullable (uncheck Is Nullable via the gear icon).
    Only installation_id is the primary key.

    image-20240411163929694

  • 记下您的 Supabase 项目的 URL (https://xxxxx.supabase.co) 和您的 API 密钥。

  • 确保：

    • 禁用表上的行级安全性 (RLS)
    • 使用秘密 service_role API 密钥。

在Vercel部署Giscus

fork giscus项目

首先将giscus项目fork到自己仓库。

image-20240411164133004

在vercel部署

登录vercel，选择刚fork的giscus仓库，直接使用默认的参数部署。

配置域名

将前面预设好的域名映射一下。

image-20240411165053003

添加配置

在Setting页面，增加相关配置参数。

image-20240411164448843

这些参数全部来自前面步骤记录下来的内容，字段参考如下：

NEXT_PUBLIC_GISCUS_APP_HOST=https://yourdomain.com
NEXT_PUBLIC_REVALIDATE_FIRST_PAGE=true
GITHUB_APP_ID=APP ID
GITHUB_CLIENT_ID=APP CLIENT ID
GITHUB_CLIENT_SECRET=GITHUB CLIENT SECRET
GITHUB_PRIVATE_KEY="-----BEGIN RSA PRIVATE KEY-----\nENTER-KEY-HERE-WITHOUT-LINE-BREAKS\n-----END RSA PRIVATE KEY-----" # vercel可以直接将复制下来的值拷贝进去
ENCRYPTION_PASSWORD= # 这个好像可以随便写
SUPABASE_KEY= # SUPABSE的KEY
SUPABASE_URL= # SUPABSE的项目URL
SUPABASE_INSTALLATION_ACCESS_TOKENS_TABLE=installation_access_tokens
# The following values are only for CORS-related stuff in the API.
# The usage is different from the values in giscus.json.
ORIGINS=["https://yourdomain.com", "https://yourdomain.com", "https://www.yourdomain.com"]
ORIGINS_REGEX=["http://localhost:[0-9]+"]

在Stellar中应用

修改主题配置文件，将Giscus的src属性改成自己的域名就可以了。

######## Comments ########
comments:
  service: giscus # beaudar, utterances, giscus, twikoo, waline, artalk
  # giscus
  # https://giscus.app/zh-CN
  giscus:
    src: https://yourdomain.com/client.js # https://giscus.app/client.js

修改Giscus字体

在stellar应用之后发现评论区字体与博客正文的字体不一样，所以需要进一步搞一搞。

创建@font-face样式

本博客使用ZFont字体。

cayzlh-zfont-style.css
@font-face {
  font-family: “ZFont”;
  src: url("https://gcore.jsdelivr.net/gh/cayzlh/psychic-potato@master/font/zfont/ZFonts.woff2") format("woff2");
}

创建字体使用样式

cayzlh-zfont.css
@import url("//giscus.cayzlh.com/themes/preferred_color_scheme.css");

@import url("//gcore.jsdelivr.net/gh/cayzlh/psychic-potato@master/css/cayzlh-zfont-style.css");

body {
  font-family: “ZFont”;
}

以上俩文件都存储在我的GitHub仓库中：cayzlh/psychic-potato

将字体应用到Giscus中

修改Stellar主题配置文件：

comments:
  service: giscus
  giscus:
    data-repo: #
    data-category: #
    data-theme: "https://gcore.jsdelivr.net/gh/cayzlh/psychic-potato@master/css/cayzlh-zfont.css"

请注意，您需要将 [在此输入仓库] 和 [在此输入分类名] 的占位符替换为您的存储库和分类的正确值。

参考资料

友善评论, 随缘回复…