Halo 静态网页服务插件
这是一个可以在 Halo 托管静态网页的插件，可以将静态网页上传到 Halo，然后提供访问路由。不仅如此，此插件还配套提供了一个 CLI 工具，用于在本地开发时，通过 CLI 快速发布到 Halo 服务，或者与 GitHub Actions 等 CI/CD 工具集成，一定程度上实现自动化部署。
由于我目前不太确定此插件的实际需求，所以当前的版本仅为需求验证版本，我不能保证后续的维护情况。开发此插件的目的也只是解决我的部分需求（经常写网页 Demo，需要分享给小伙伴），目前能够想到的使用场景：
- 如上所说，前端开发 er 可能经常需要写 Demo 页面，可以通过此插件快速发布 Demo 页面。这是编写此插件的初衷，也由于 Vercel、Cloudflare Pages、GitHub Pages 在某些地区难以访问，也实在找不到好的替代。
- 作为 Halo 页面的补充，可以用于部署一些静态页面，比如个人简历、开发工具页面（比如：https://ryanc.cc/tools/）等。
- 调用 Halo 的业务 API，自行实现一些页面，比如调用图库插件的 API，单独部署一个图库页面，以解决部分主题没有图库模板的问题。
- 利用插件提供的可视化编辑器，在不编写代码的情况下实现一些简单的展示页面。
预览
可视化编辑为实验性功能，请谨慎使用，添加这个功能也是为 Halo 本身探索可视化编辑页面的实现方案。
安装
下载地址：https://ryanc.cc/upload/tmp/plugin-static-pages-1.0.0-alpha.1.jar
更新：现在已发布到应用市场 https://www.halo.run/store/apps/app-gFkMn
如上所述，当前为需求验证版本，所以暂未开源。
使用
创建项目
名称：项目名称，可以随意填写。
目录：项目的目录，用于存放项目的文件和生成访问地址，目前只能挂载到 Halo 网站的二级目录。
需要注意，由于目前静态网页只能挂载到 Halo 网站的二级目录，不支持绑定域名，所以请特别注意网页上的资源指向。
如果你是自己编写的纯 HTML 页面，引入资源建议加上此目录名，比如项目目录填写为 foo 时，引入资源的路径应该为 /foo/bar.js，或者使用相对于 HTML 文件的路径，比如 ./js/bar.js。不能写为 /js/bar.js，因为 / 相对于 Halo 根路径。
如果你的静态网页使用构建工具构建，可以查阅构建工具的文档，修改基础路径，比如 Vite：
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
export default defineConfig({
// 修改为项目目录
base: '/vue/',
plugins: [Vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
图标：项目的图标，可以随意填写。
描述：项目的描述，可以随意填写。
重写规则：用于重写页面的请求，可以适用于静态页面存在前端级路由管理的情况，比如 SPA 页面可能只有一个 index.html 文件，那么可以在这里将 源 设置为 /**，目标 设置为 /index.html，这样就可以让所有页面请求都指向 index.html 文件。
上传文件
此插件提供两种上传文件的方式，分别为手动在页面上传和通过 CLI 工具上传。
手动上传
进入文件管理之后，点击右上角的上传即可出现上传文件的对话框，选择文件后即可上传。
通过 CLI
为了方便使用者上传文件和持续部署，此插件提供了一个配套的 CLI 工具，用法如下：
此工具使用 Node.js 开发，所以需要安装 Node.js 环境。
❯ npx halo-static-pages-deploy-cli deploy --help
Usage: halo-static-pages-deploy deploy [options]
Deploy static pages
Options:
-f, --file <path> Specify an input file # 文件路径
-e, --endpoint <string> Halo API endpoint # Halo 的访问地址
-i, --id <string> Static Page ID # 项目 ID，可以在项目详情中看到
-t, --token <string> Personal access token # Halo 的个人令牌，需要勾选 静态网页项目 -> 项目资源上传 权限
-h, --help display help for command
示例：
npx halo-static-pages-deploy-cli deploy -e https://demo.halo.run -i project-FRGuW -t pat_abcd -f ./dist
此外，你也可以通过 GitHub Actions 和此 CLI 实现自动部署，GitHub Actions 示例：
name: Build and Deploy
on:
push:
branches: [main]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- uses: pnpm/action-setup@v3
with:
version: 8
- uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'pnpm'
- name: Install dependencies
run: pnpm install
- name: Build
run: pnpm build
- name: Deploy to Halo # 关键步骤
run: |
npx halo-static-pages-deploy-cli deploy -e ${{ secrets.ENDPOINT }} -i ${{ secrets.ID }} -t ${{ secrets.PAT }} -f dist
需要注意，你需要在仓库的 Secrets 中添加 ENDPOINT、ID 和 PAT 三个变量，分别对应 Halo 网站地址、项目 ID 和个人令牌（需要勾选 静态网页项目 -> 项目资源上传 权限），请不要将这些敏感信息暴露在公开仓库中。
最后
此插件由我和 @guqing 在业余时间开发，感谢 @guqing。如果此插件对你有帮助，可以在此帖进行反馈。
