换了新电脑，我终于把荒废的博客捡起来了

前言#

距离上次更新已经过去两个多月了，五月中旬我更换了我的电脑，从 M2 MacBook Air 升级到了 M5，契机是家里电脑老是出问题，于是把我的 M2 给家里人用，自己换了一台新的。现在看来这个动作非常正确，因为在使用了一个月后苹果就宣布所有 Mac 都涨价了……

换了新电脑后又逢中期，事情很忙，虽然之前把博客文件夹都备份了，但是一直没时间恢复我的博客。直到昨天，我成功通过谷歌的 Workspace 低价拿下了 smaritron.com 这个域名，就想着把博客重新捡起来并更换新的顶级域名。

环境重建#

我的 Fuwari 主题基于 Node.js，第一步就是重新安装环境。在这个网址下载 Node.js↗ ，根据自己的操作系统选择合适的版本。我选择的是 macOS 且使用 nvm 和 pnpm 的 Node.js，将安装代码复制到终端回车即可。安装完成后进入博客根目录，在该位置打开终端，安装依赖：

1
pnpm install

到这里 Fuwari 已经可以正常构建部署了。

工作流重建#

在之前我是通过 VS Code 来写博客和修改网站样式的，这非常方便，可以直接输入终端指令，直接 git 推到 GitHub。要实现这一步很简单，但是我踩了个小坑。我备份了原来电脑上访问 GitHub 的 SSH 密钥，并转移到新电脑里面，然后尝试通过 VS Code 推送，结果卡住了，怎么都无法推送成功。后面发现需要在本地终端先测试能不能远程连接 GitHub，完成后再在 VS Code 里面推送就没问题了。如果没有备份，其实直接重新配置一个新的 SSH 密钥就好了。

到这里，我已经可以正常写文章，修 bug，推到 GitHub了。

更换新域名#

这个操作也很简单，我的博客部署在 Cloudflare Pages，直接添加一个自定义域，做一个 CNAME 解析到 Pages 就可以了。不过由于这个域名是在国外注册商申请的，所以不能进行备案，也就不能用 EdgeOne 或者 ESA 这种国内 CDN，国内访问速度必然慢了很多。

优选 IP 加速访问#

Cloudflare 默认给的那两个任播 IP 国内访问速度比较慢，特别是移动用户，因此需要进行优选 IP。但是 Pages 的优选是比较麻烦的，因为我的域名托管在 Cloudflare，默认开启小黄云，无法直接 CNAME 到优选 IP 或优选域名。这里参考了 CM 大佬的视频教程↗ 。经过我的测试，CM 大佬的 cf.090227.xyz 电信用户访问比较快，而 www.visa.cn 则是移动用户访问比较快。所以我通过华为云国际版将电信分流到 cf.090227.xyz，将移动分流到 www.visa.cn，最终效果如下： ITDOG 测试结果至此，我的博客已经恢复，并且更换好了新域名，继续施工……

部署博客到 VPS（可选）#

在博客部署到 Pages 后，我对国内访问速度并不是很满意，我手头上还有一台 AWS 的香港 VPS，所以也尝试了一下将博客部署到 VPS 上。但是我这台 VPS 线路并不是很好，国内访问丢包比较严重，再加上 VPS 不像 Pages 那样抗打，所以最后还是切回 Pages 了。以下内容作为将博客部署到 VPS 的记录。现在我们的博客已经 git 到 GitHub 上了，所以我的想法是通过 GitHub Actions 进行自动构建，然后把构建产物推到我的 VPS 上的博客目录，然后通过 Nginx 部署。 Nginx 部署网站及申请 SSL 证书可以参考我的这篇文章↗ ，这里不具体展开。下面主要介绍一下 Actions 的配置——以 Astro 的 Fuwari 主题为例。

在 VPS 上准备 SSH 密钥#

为了让 GitHub 能够安全地把文件传到 VPS，需要生成一对 SSH 密钥。

1
ssh-keygen -t rsa -b 4096 -C "github-actions"

将公钥加入到授权列表中，允许使用该密钥登录：

1
cat ~/.ssh/id_rsa.pub >> ~/.ssh/authorized_keys

查看并复制私钥的内容，稍后要填到 GitHub 里：

1
cat ~/.ssh/id_rsa

在 GitHub 配置 Secrets#

为了安全，VPS 的 IP 和私钥不能明文写在代码里。

进入博客的 GitHub 仓库，点击顶部的 Settings。
在左侧菜单找到 Secrets and variables -> Actions。
点击 New repository secret，依次添加以下四个变量：

1
VPS_HOST：你的 VPS 的 IP 地址
2
VPS_PORT：你的 VPS 的 SSH 端口
3
VPS_USERNAME：你的 VPS 用户名
4
VPS_SSH_KEY：上一步复制的私钥全部内容

编写 Actions 工作流#

在博客的本地目录下，新建一个特殊的文件路径：.github/workflows/deploy.yml，然后填入以下代码：

1
name: Build and Deploy to VPS
2

3
# 触发条件：当 main 分支有 git push 时触发
4
on:
5
  push:
6
    branches:
7
      - main
8

9
jobs:
10
  build-and-deploy:
11
    runs-on: ubuntu-latest
12

13
    steps:
14
      - name: 检出代码
15
        uses: actions/checkout@v4
16

17
      - name: 安装 pnpm
18
        uses: pnpm/action-setup@v4
19

20
      - name: 配置 Node.js 环境
21
        uses: actions/setup-node@v4
22
        with:
23
          node-version: '22'
24
          cache: 'pnpm'
25

26
      - name: 安装依赖并编译
27
        run: |
28
          pnpm install
29
          pnpm run build
30

31
      - name: 部署到 VPS
32
        uses: easingthemes/ssh-deploy@main
33
        env:
34
          SSH_PRIVATE_KEY: ${{ secrets.VPS_SSH_KEY }}
35
          ARGS: "-avz --delete" # 自动同步，删除 VPS 上多余的旧文件
36
          SOURCE: "dist/"       # 同步的源文件夹
37
          REMOTE_HOST: ${{ secrets.VPS_HOST }}
38
          REMOTE_USER: ${{ secrets.VPS_USERNAME }}
39
          REMOTE_PORT: ${{ secrets.VPS_PORT }}
40
          TARGET: "/var/www/blog" # 你的 VPS 博客根目录

推送到 GitHub#

将刚才新增的 .github/workflows/deploy.yml 提交并 Push 到 GitHub。这时候，可以点开 GitHub 仓库顶部的 Actions，就能看到 GitHub 正在自动拉取代码、编译、并把文件传输到你的 VPS 上。只要你的 VPS 上配置好了 Nginx 指向 /var/www/mywebsite，部署就完成了。

后话#

至此，我终于把荒废的博客捡起来了。

我曾向我的朋友们分享我折腾的各种技术，包括 VPS、域名、博客等等，有的人觉得挺有意思也想研究研究，有的人觉得听过就罢了不是很感兴趣，也有人觉得不实用或没必要折腾这些东西。在我看来，这是我的爱好，在其中付出精力付出时间能让我得到满足感，就像我的签名一样 「因为我喜欢，所以我想做」，在折腾这些东西的时候我感觉不到时间的流逝。尽管生活中有各种各样的琐事和压力，但这是我的一片难得的“净土”。我想我会一直做下去的。