Simon Y.
open main menu
Part of series: life

用 Gatsby 重建博客

/ 6 min read

经过这几天的折腾，使用 Gatsby 重新搭建网站，终于成功了！

0. 出现的问题

这个过程中，有几个要点需要注意：

1.使用了 Gatsby 的插件，需要在 gatsby-config.js 中配置，否则无法使用。

2.替换主题文件时，只需要在 src/blog-theme/ 文件夹中新建与主题相同的 js 文件即可。

3.其他文件格式要与主题文件一致，否则无法正常 build。

第一点，如果按照插件说明文档操作，应该是不会出错的。重点是第二点和第三点。

我对 ts 并不熟悉，所以在一开始替换主题文件时，直接复制了原主题对应文件进行修改，在开发阶段并没有出现什么问题，但是在 build 时，直接报错，提示 'jsx' must be in scope when using JSX。我想可能是 ts 代码有问题，就直接把 tsx 文件改成 jsx 文件，但是依然报错。只好回去继续看官方文档，在官方文档示例中，刚好有举例 TypeScript 组件文件。

As long as the theme author imports components/files without the file extension, users are able to shadow these with other types of files. For example the theme author created a TypeScript file at src/components/bio.tsx and uses it in another file:

import Bio from "./bio"
/* Rest of the code */

You’ll be able to shadow the Bio file by creating e.g. a JavaScript file at src/gatsby-theme-blog/components/bio.js as the file extension wasn’t used in the import.

按照官方说明，把所有替换组件的文件后缀改成 js，重新运行，问题并没有解决。

这个时候，我发现原主题有一个 texts/hero.mdx 文件，显示主页 Hi. 的内容。我之前想让这个位置显示一张图片，所以把这个文件改成了 hero.jsx，问题会不会出现在这里？立即把这个文件改回 mdx 后缀，重新运行，成功。build 也成功。

1. 自动部署

解决了问题之后，就要开始部署。之前使用 VuePress 时，建立过一个自动部署，这次直接照搬。

在项目的 .github/workflows 文件夹下新建一个 ci.yml 文件。

name: CI
# 在master分支发生push事件时触发。
on:
  push:
    branches:
      - master
jobs: # 工作流
  build:
    runs-on: ubuntu-latest #运行在虚拟机环境ubuntu-latest
    strategy:
      matrix:
        node-version: [16.x]
    steps:
      - name: Checkout # 步骤1
        uses: actions/checkout@v1 # 使用的动作。格式：userName/repoName。作用：检出仓库，获取源码。 官方actions库：https://github.com/actions
      - name: Use Node.js ${{ matrix.node-version }} # 步骤2
        uses: actions/setup-node@v1 # 作用：安装nodejs
        with:
          node-version: ${{ matrix.node-version }} # 版本
      - name: run deploy.sh # 步骤3 （部署到github)
        env: # 设置环境变量
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN}} # toKen私密变量
        run: npm install && npm run deploy # 执行的命令
        # package.json 中添加 "deploy": "bash deploy.sh"

这里的 ACCESS_TOKEN 需要在个人 GitHub 的 Settings-Developer settings-Personal access tokens 中生成，生成后复制 token,到博客源码项目的 Settings-Secrets-Actions 中新建 secrets，名称为 ACCESS_TOKEN，内容为复制的 token。

需要注意的是，申请的 token 有过期时间，过期之后要更新 token，我之前在使用 VuePress 时就出来了这个问题，导致自动部署不成功，后来申请新的 token 时发现了这个问题。

我使用的这个自动部署方法，需要在项目根目录新建一个 deploy.sh 文件。

#!/usr/bin/env sh
set -e
npm run build:cypress
cd public

echo 'your.site' > CNAME

if [ -z "$ACCESS_TOKEN"]; then
  msg='deploy'
  [email protected]:yourgithubusername/yourgithubusername.github.io.git
else
  msg='来自github action的自动部署'
  githubUrl=https://yourgithubusername:${ACCESS_TOKEN}@github.com/yourgithubusername/yourgithubusername.github.io.git
  git config --global user.name "yourgithubusername"
  git config --global user.email "[email protected]"
fi
git init
git add -A
git commit -m "${msg}"
git push -f $githubUrl master # 推送到github

cd -
npm run clean

完成之后，把代码提交到 GitHub 仓库，在 GitHub 项目仓库中的 Actions 选项中，可以看到正在自动部署，自动部署成功之后，打开 GitHub Pages，就能看到新的页面了。

添加评论功能

Gatsby 官方提供了多种评论功能，不过都需要存储在第三方，对于个人博客来说，并不是很好。浏览了一番，找到两个方案，一个是使用 GitHub issues，另一个是使用 GitHub Discusions，似乎 Discussions 更好一些，所以直接使用 Discussions，对应的项目是 discus。

按照 discus 项目说明，安装、配置，成功运行。

需要说明的是，discus 在开发环境中无法运行，部署之后就能看到效果。

我原来一直想的是，评论的时候能直接评论，而不需要登录操作，现在觉得这个并不好，如果可以随意评论，可能存在无法回复评论者的问题，还可能存在评论质量不高的问题，所以还是需要登录评论。不过登录 GitHub 评论还是存在一点门槛。