惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

GbyAI
GbyAI
爱范儿
爱范儿
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
月光博客
月光博客
腾讯CDC
Last Week in AI
Last Week in AI
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
博客园_首页
量子位
博客园 - 聂微东
Jina AI
Jina AI
小众软件
小众软件
The Cloudflare Blog
有赞技术团队
有赞技术团队
V
V2EX
博客园 - 司徒正美
Apple Machine Learning Research
Apple Machine Learning Research
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
大猫的无限游戏
大猫的无限游戏
博客园 - 三生石上(FineUI控件)
WordPress大学
WordPress大学
阮一峰的网络日志
阮一峰的网络日志
B
Blog
MongoDB | Blog
MongoDB | Blog
L
LangChain Blog
宝玉的分享
宝玉的分享
C
Check Point Blog
H
Hackread – Cybersecurity News, Data Breaches, AI and More
IT之家
IT之家
N
Netflix TechBlog - Medium
I
InfoQ
J
Java Code Geeks
S
SegmentFault 最新的问题
V
Visual Studio Blog
Microsoft Security Blog
Microsoft Security Blog
博客园 - 叶小钗
D
DataBreaches.Net
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
B
Blog RSS Feed
S
Schneier on Security
Webroot Blog
Webroot Blog
P
Proofpoint News Feed
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
T
Threatpost
Project Zero
Project Zero
Scott Helme
Scott Helme
C
CERT Recently Published Vulnerability Notes
P
Privacy International News Feed
T
The Exploit Database - CXSecurity.com
D
Darknet – Hacking Tools, Hacker News & Cyber Security

流动

对口型视频合成方案对比:Wav2Lip、VideoReTalking 与 MuseTalk 2026 音色克隆方案对比:IndexTTS-2、CosyVoice、GPT-SoVITS、Fish Speech、VoxCPM 部署与实测 AI Agent折腾记(OpenClaw / Hermes Agent) 我的2025年 大连之行 回家收麦 六一儿童节爬长城 Golang database/sql 数据库断线自动重连机制解析 Golang默认Http Client导致的cannot assign requested address错误 清明踏春,爬山看海 购入小牛G400T电动车 北京的三月飞雪 wrenAI本地LLM模型部署 天津一日游 2024年终总结 停止使用staticfile.org服务 使用 ImageMagick 自动添加水印,保护图片版权 如何注册一个.sol域名 奥森公园半日游 昌平42公里骑行绿道打卡 十月一日爬慕田峪长城 当Hugo遇上AVIF,优化图片加载 博客被恶意镜像 Github Pages 部署流程解析 搭建个人锻炼页面 你好 Follow 中秋爬山 Google Adsense的审核之旅 让你的IPFS站点持久在线:接入Filebase的Names(IPNS)服务 一次简短的青岛之行 解决 "undeclared name: any (requires version go1.18 or later)" 编译错误 搭建自托管IPFS Gateway服务,替代Cloudflare的IPFS Gateway 302跳转的跨域问题(CORS) GORM增加sqlcommenter特性 源码分析:GORM是如何生成sql的 工银亚洲网银密码重置 加速Cloudflare访问 2023年终总结 2023年12月北京暴雪记录 使用Hugo实现响应式和优化的图片 加速Google Analytics 使用Google Indexing API加速博客收录 利用Github Actions定时抓取微博 北大口腔牙周刮治记录 故乡回忆之旅 解决Golang使用go get安装包后找不到可执行文件的问题 修正Hugo的JSON Feed格式 我的学车之路 将博客部署到星际文件系统(IPFS) 新冠疫情后的第一个春节 第一次清理键盘 2022年终总结 去掉Cloudflare烦人的email-decode.min.js请求 累计布局偏移修复方案改进 —— 自动生成图片宽高 优化博客的累计布局偏移(CLS)问题 将博客部署到Cloudflare Pages 奥林匹克公园向日葵之旅 记第二次洗牙 记录2022年海淀幼升小 Golang解析json的一个问题 疫情下的生活 整理下博客的一些调整 疫情下的五一假期 自己动手,更换thinkpad x1硬盘 二刷百望山 带娃游颐和园 博客架构说明 难得的清明假期 十一年的等待,终于拿到了liudon.com域名 被隔离的一周 mysql中字符串和整型自动转换的问题 一次惊心动魄的Mysql更新操作 如何在北京公积金网站上修改婚姻状况 PHP7.2编译安装后没有php.ini文件的问题 检测网站支持的SSL/TLS协议版本 记一次难忘的手术经历 十一假期经历 Swoft 框架运行分析(五) —— ConsoleProcessor模块分析 Swoft 框架运行分析(四) —— EventProcessor模块分析 一个git submodule update引发的问题 一个Curl的耗时长的问题 Swoft 框架运行分析(三) —— BeanProcessor模块分析 Swoft 框架运行分析(二) —— AnnotationProcessor模块分析 Swoft 框架运行分析(一) BCMath 与 科学计数 Flink Could Not Resolve Resourcemanager Address 解决Sublime Text安装包时"There Are No Packages Available for Installation"的报错 关于本站 2019,新开始
在Netlify上部署Twikoo评论系统
Liudon · 2023-10-19 · via 流动

在本篇文章里,我会介绍如何在Netlify上部署Twikoo评论系统,如何接入到静态博客Hugo,以及如何实现Twikoo系统版本自动更新。

2024年7月30日更新:因为Github接口策略调整,原有的匿名通过接口获取版本号方法失效,已更改为带token方式请求接口获取版本号,详见workflow里Get twikoo version步骤配置。

背景

博客之前通过Vercel部署了Twikoo评论系统,但是最近发现加载很慢。

Twikoo官网文档NetlifyVercel国内访问会更优一些,于是搞了一把迁移。

迁移过程中遇到了一些问题,网上搜了一番,发现Netlify下部署Twikoo的信息很少,这篇文章我会介绍整个操作过程。

部署

参考官网文档,部署即可。

这里一开始Fork成了https://github.com/twikoojs/twikoo,导致部署后访问404。

注意,正确的仓库是https://github.com/twikoojs/twikoo-netlify

Netlify部署Twikoo

使用同一个MongoDB,配置原来的地址,这样已有的评论也不会丢。

部署后,通过https://comment.liudon.com访问,返回200。

但是访问https://liudon.com,提示CORS跨域错误,搜索一番网上资料也没找到相关信息。

CORS报错

一般跨域错误都是返回头里缺少跨域相关的字段导致,因此决定使用Netlify来新增返回头规避。

仓库下新增netlify.toml文件,针对根目录返回跨域头,内容如下。

[[headers]]
  # Define which paths this specific [[headers]] block will cover.
  for = "/"
    [headers.values]
    Access-Control-Allow-Origin = "*"
    Access-Control-Allow-Headers = "Content-Type"
    Access-Control-Allow-Methods = "*"

再次刷新页面,报错又变成了404,但是直接访问https://comment.liudon.com地址是返回的200。

404报错

经过一番定位,发现了问题所在:

twikoo-netlify库根目录地址是通过Location跳转到的/.netlify/functions/twikoo接口,/.netlify/functions/twikoo才是真正处理的接口。

twikoo-netlify根目录返回

vercel-netlify库是通过rewrite将所有请求转发到了/api/index接口。

twikoo-vercel转发

博客里写的Twikoo环境id填的是https://comment.liudon.com,更换为Netlify后,需要更换环境id,补齐后面的/.netlify/functions/twikoo

twikoo环境id

因为Netlify也支持Rewrite转发,所以决定还是通过netlify.toml文件增加转发配置解决,内容如下:

[[redirects]]
  from = "/"
  to = "/.netlify/functions/twikoo"
  status = 200
  force = true

注意一定不要漏了force参数,因为根目录文件是存在的,不带这个参数的话Rewrite是不生效的,必须指定这个。

这下访问彻底ok了。

不过很快又发现另外一个问题,看到别人博客上Twikoo版本已经是1.6.22,自己的还是1.5.11

搜索一番后,Twikoo已经给出了更新操作:

针对 Netlify 部署的更新方式

1. 登录 Github,找到部署时 fork 到自己账号下的名为 twikoo-netlify 的仓库
2. 打开 package.json,点击编辑
3. 将 "twikoo-vercel": "latest" 其中的 latest 修改为最新版本号。点击 Commit changes
4. 部署会自动触发

不过这样操作,每次版本更新,都需要手动去改一下package.json文件的版本,重新构建。

对于一个程序员,我们的追求就是自动化。

自动版本更新

  1. 服务端版本自动更新

这里利用Github Actions定时任务,通过接口拉取twikoo最新的版本,然后更新到package.json文件,从而实现版本自动更新。

在自己twikoo-netlify仓库下,新增Actions,代码如下:

# This is a basic workflow to help you get started with Actions

name: CI

# Controls when the workflow will run
on:
  # Triggers the workflow on push or pull request events but only for the "main" branch
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:
  schedule:
    - cron: '0 2 * * *' # 每天定时2点执行一次

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest
  
    permissions:      
      contents: write

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v3

      # Runs a single command using the runners shell
      - name: update version
        env:
          github_token: ${{ secrets.TOKEN }}
        run: |
          response=$(curl -sf -H "Authorization: token $github_token" -H "Accept: application/vnd.github+json" https://api.github.com/repos/twikoojs/twikoo/releases/latest)
          version=$(echo $response | jq -r '.tag_name')
          if [ -n "$version" ]; then
            sed -i "s/\"twikoo-netlify\": \".*\"/\"twikoo-netlify\": \"$version\"/" package.json
          fi
        shell: bash
        
      # Runs a set of commands using the runners shell
      - name: Commit changes
        uses: EndBug/add-and-commit@v9
        env:
          github_token: ${{ secrets.TOKEN }}
          add: .

这里会把修改后的package.json文件提交到仓库,所以需要申请一个Token,可以参考我上一篇文章申请,然后添加到仓库变量里。

  1. 博客引用版本自动更新

这里一开始想到在前端去查服务端最新版本号,然后引用对应版本的js文件来实现。

但是这样就会导致每次页面加载都要去查一次版本,会导致加载时间变长。

因此还是决定在服务端部署时,获取最新版本号更新服务。

  • 引用版本配置化

comments.html文件修改:

<script src="https://cdn.staticfile.org/twikoo/{{ .Site.Params.twikoo.version }}/twikoo.all.min.js">

config.tml配置修改:

params:
  env: production # to enable google analytics, opengraph, twitter-cards and schema.
  
  ... # 其他配置

  assets:
    disableHLJS: true # to disable highlight.js
    
  twikoo:
    version: 1.5.11 # 配置twikoo版本号
  • 获取最新版本号部署

Actions新增步骤:

    - name: Setup Hugo
    uses: peaceiris/actions-hugo@v2
    with:
        hugo-version: 'latest'

    ####
    - name: Get twikoo version
    id: twikoo
    run: |
        version=$(curl -s https://raw.githubusercontent.com/Liudon/twikoo-netlify/main/package.json | jq -r '.dependencies."twikoo-netlify"')
        echo "Twikoo version: $version"
        echo "twikoo_version=$version" >> $GITHUB_OUTPUT

    - name: Update config.yml version
    uses: fjogeleit/yaml-update-action@main
    with:
        valueFile: 'config.yml'
        propertyPath: 'params.twikoo.version'
        value: ${{ steps.twikoo.outputs.twikoo_version }}
        commitChange: true
    ####
        
    - name: Build
    run: hugo --gc --minify --cleanDestinationDir 

####内代码即为获取版本号,更新config.tml版本号逻辑,然后再进行hugo部署。

需要将https://raw.githubusercontent.com/Liudon/twikoo-netlify/main/package.json这个url里的Liudon/twikoo-netlify改为你的仓库名。

这下后面Twikoo官方更新版本,博客的Twikoo也会跟着自动更新。