极简主题·部署到各家云平台的教程

经过一番折腾，终于将原本是WordPress的网站，转移到了现在由 Hugo + 极简(jijian)主题 构建的静态网站。部署到了Vercel、EdgeOne、Netlify和Cloudflare等云平台。

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

为了让所有云平台的构建任务能够顺利执行，需要在博客根目录下放一个文件package.json。

我们需要通过package.json来管理搜索索引工具（Pagefind）和 YAML 配置解析库（js-yaml），其中 js-yaml 供构建脚本读取 Hugo 配置，文章加密则由 Node.js 内置的 crypto 模块完成。

建议

当然你也可以用我准备的 极简(hugo-jijian)配置工具 来傻瓜式生成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
• Build Command: npm run build
• Output Directory: public
• Install Command: 保持默认不填
• Development Command：保持默认不填

部署到edgeone

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

• 框架预设：Other
• 根目录：./
• 输出目录：public
• 编译命令：npm run build
• 安装命令：npm install

部署到netlify

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

• Base directory: ./
• Build command: npm run build
• Publish directory: ./public
• Function directory: 保持默认或为空不填

部署到cloudflare pages

进入Workers和Pages页面，点击右边的创建应用程序按钮。然后点击下面的小字“想要部署 Pages？开始使用”，这cloudflare改版之后这个Pages藏的有点隐蔽，如下图:

然后在 Cloudflare Pages 导入 GitHub 仓库时，关键配置如下：

• 框架预设: Hugo
• 构建命令: npm run build
• 构建输出目录: public
• 根目录: 保持默认或为空不填