# Halo 静态网页服务插件这是一个可以在 Halo 托管静态网页的插件，可以将静态网页上传到 Halo，然后提供访问路由。不仅如此，此插件还配套提供了一个 CLI 工具，用于在本地开发时，通过 CLI 快速发布到 Halo 服务，或者与 GitHub Actions 等 CI/CD 工具集成，一定程度上实现自动化部署。由于我目前不太确定此插件的实际需求，所以当前的版本仅为需求验证版本，我不能保证后续的维护情况。开发此插件的目的也只是解决我的部分需求（经常写网页 Demo，需要分享给小伙伴），目前能够想到的使用场景： 1. 如上所说，前端开发 er 可能经常需要写 Demo 页面，可以通过此插件快速发布 Demo 页面。这是编写此插件的初衷，也由于 Vercel、Cloudflare Pages、GitHub Pages 在某些地区难以访问，也实在找不到好的替代。 2. 作为 Halo 页面的补充，可以用于部署一些静态页面，比如个人简历、开发工具页面（比如：）等。 3. 调用 Halo 的业务 API，自行实现一些页面，比如调用图库插件的 API，单独部署一个图库页面，以解决部分主题没有图库模板的问题。 4. 利用插件提供的可视化编辑器，在不编写代码的情况下实现一些简单的展示页面。 ## 预览 ![项目](https://pic.imgdb.cn/item/664ca24dd9c307b7e9b37005.png) ![文件列表](https://pic.imgdb.cn/item/664ca24dd9c307b7e9b36f34.png) ![CLI](https://pic.imgdb.cn/item/664ca24cd9c307b7e9b36d84.png) ![可视化编辑](https://pic.imgdb.cn/item/664ca24ed9c307b7e9b370e5.png) > 可视化编辑为实验性功能，请谨慎使用，添加这个功能也是为 Halo 本身探索可视化编辑页面的实现方案。 ## 安装 ~~下载地址：~~ 更新：现在已发布到应用市场 https://www.halo.run/store/apps/app-gFkMn 如上所述，当前为需求验证版本，所以暂未开源。 ## 使用 ### 创建项目 ![创建项目](https://pic.imgdb.cn/item/664ca24cd9c307b7e9b36e74.png) - **名称**：项目名称，可以随意填写。 - **目录**：项目的目录，用于存放项目的文件和生成访问地址，目前只能挂载到 Halo 网站的二级目录。需要注意，由于目前静态网页只能挂载到 Halo 网站的二级目录，不支持绑定域名，所以请特别注意网页上的资源指向。如果你是自己编写的纯 HTML 页面，引入资源建议加上此目录名，比如项目目录填写为 `foo` 时，引入资源的路径应该为 `/foo/bar.js`，或者使用相对于 HTML 文件的路径，比如 `./js/bar.js`。不能写为 `/js/bar.js`，因为 `/` 相对于 Halo 根路径。如果你的静态网页使用构建工具构建，可以查阅构建工具的文档，修改基础路径，比如 [Vite](https://cn.vitejs.dev/config/shared-options#base)： ```ts 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 环境。 ```bash ❯ npx halo-static-pages-deploy-cli deploy --help Usage: halo-static-pages-deploy deploy [options] Deploy static pages Options: -f, --file Specify an input file # 文件路径 -e, --endpoint Halo API endpoint # Halo 的访问地址 -i, --id Static Page ID # 项目 ID，可以在项目详情中看到 -t, --token Personal access token # Halo 的个人令牌，需要勾选静态网页项目 -> 项目资源上传权限 -h, --help display help for command ``` 示例： ```bash 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 示例： ```yaml 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"#134 在业余时间开发，感谢 @"guqing"#134。如果此插件对你有帮助，可以在此帖进行反馈。

将静态网页部署到 Halo？静态网页服务插件介绍

清风不语

厉害

包子叔

牛逼啊大佬

huasui

牛批！

四方霸主

好东西！必须支持一下

wxyShine

mark

MaxBill

有人使用相对路径部署么好像相对路径不行，加项目目录的路径是可以的

webjing

MaxBill 我的纯html写的页面，资源引入路径用的目录名也是无法访问，后边看了看我确实改掉了，但是访问的页面的资源引入没有改，我不知道是不是缓存的问题刷新后也没用，只能目录名/index.html 这样访问

Stars-One

这个不错,支持一下👍

之前有过这样的想法,就是想要不依赖当前halo主题,提供一个自由的html网页供外部访问

比如说搞个类似app产品介绍页之类(但我又不希望在当前halo主题框架进行), 试了下这个,可以满足要求!

Ryan Wang 👍

已发布到应用市场：https://www.halo.run/store/apps/app-gFkMn

hanplus

所以为什么不挂到nginx下面，用宝塔之类的面板操作也很方便

zzj1965186613

大佬牛皮！我有一点点小小问题想请教一下，在项目文件夹下有js，css，json三个文件夹，我需要怎么引用这三个文件夹里的文件，我在index.html里使用 <link rel="stylesheet" href="./css/style.css"> <script src="./js/script.js" defer></script>感觉没有用。可能是我对设置那里不是很了解，那个目录和重写规则的设置。它目录是可以设置多个路径的吗？我最想知道的是，我想引用index.html同级目录下的js，css文件夹里的文件，怎么有效引用这些文件？膜拜大佬！

败犬

zzj1965186613 如果部署后的访问路径是/path，则在资源路径前加/path。