极简主题丨部署到Vercel教程

经过一番折腾，我的 Hugo 博客正式从本地搬到了 Vercel 。这次部署不仅通过 package.json 实现了 Pagefind 全文搜索，还利用极简(jijian) 主题内置的“本地静态加密”方案实现了安全的文章访问控制。

为了方便以后查阅，也为了给有类似需求的朋友提供参考，特整理此文。

部署前的准备

为了让 Vercel 能够顺利执行构建任务，需要在根目录下放一个文件package.json。

我们需要通过package.json来管理搜索索引工具（Pagefind）和 YAML 配置解析库（js-yaml），其中 js-yaml 供构建脚本读取 Hugo 配置，文章加密则由 Node.js 内置的 crypto 模块完成。有了它，Vercel 才能在构建时自动安装正确的工具链。

当然你也可以用我准备的极简(hugo-jijian)配置工具-config-tools.html来傻瓜式生成package.json。

package.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

{
  "name": "your-repo-name",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "build": "hugo --gc --minify && node themes/jijian/assets/js/encrypt.js && npx pagefind --site public --output-path public/pagefind"
  },
  "dependencies": {
    "pagefind": "^1.4.0",
    "js-yaml": "^4.1.1"
  }
}

Vercel 配置与配置

在 Vercel 导入 GitHub 仓库时，关键配置如下：

• Application Preset: Hugo
• Root Directory: ./
• Build Command: npm run build
• Output Directory: public
• Install Command: 保持默认可以不填

在部署界面的 Environment Variables （环境变量）栏目添加如下：