HowToMakeHub

Appearance

hub-web 搭建教程 ​

本教程将带你使用 HubWeb-template 模板仓库，通过 Fork 快速搭建一个 hub-web 画廊网站。

前置条件 ​

  • Node.js 18+
  • 一个已创建好的 Hub 仓库（参考 创建你的 Hub）
  • 一个 GitHub 账号

我们提倡 hub 和 hub-web 分开 ​

IMPORTANT

Hub（图片仓库）和 hub-web（画廊网站）应该是 两个独立的 GitHub 仓库。

  • Hub 仓库（如 NoWayToFix/NWTFhub）：纯图片存储，Bot 操作的对象
  • hub-web（如 NoWayToFix/NWTFhub-web）：画廊网站，展示图片

不要把 web 代码放进 Hub 仓库，也不要把图片放进 web 仓库。

为什么要分开？

  • 职责分离：Hub 只管图片，web 只管展示
  • 部署灵活：web 部署到 Cloudflare Pages / Vercel，Hub 保持在 GitHub
  • 审核不受影响：Bot 创建的 PR 在 Hub 仓库中审核，web 不参与
  • 独立迭代：改网站样式不需要动 Hub，加图片不需要动 web

步骤 1：Fork 模板仓库 ​

  1. 打开 HubWeb-template
  2. 点击右上角的 Fork 按钮
  3. 在弹出的页面中，Owner 选择你的 GitHub 账号，Repository name 填写你的 hub-web 仓库名（例如 NWTFhub-web）
  4. 点击 Create fork

Fork 完成后，你会得到一个属于自己的 hub-web 仓库，例如 your-username/NWTFhub-web。

步骤 2：配置 Hub 仓库地址 ​

进入你 Fork 后的仓库，编辑 package.json，找到 getphotos 脚本：

json
"getphotos": "shx rm -rf temp_repo public/imgs && (git clone --depth 1 https://github.com/YOUR-USERNAME/YOUR-HUB-REPO temp_repo && shx mkdir -p public/imgs && shx cp -r temp_repo/images/* public/imgs/ && shx rm -rf temp_repo) || shx mkdir -p public/imgs"

将 YOUR-USERNAME/YOUR-HUB-REPO 替换为你的 Hub 仓库地址，例如 NoWayToFix/NWTFhub。

提交修改：

bash
git add package.json
git commit -m "config: update hub repo address"
git push

步骤 3：本地运行 ​

克隆你 Fork 后的仓库到本地：

bash
git clone https://github.com/your-username/NWTFhub-web.git
cd NWTFhub-web

安装依赖：

bash
npm install

启动开发服务器：

bash
npm run dev

打开浏览器访问 http://localhost:5173，你应该能看到瀑布流画廊。如果 Hub 仓库里已经有图片，它们会被自动拉取并展示出来。

步骤 4：自定义画廊 ​

修改标题 ​

编辑 src/views/HomeView.vue，将 <h1> 标签中的文字改成你的 Hub 名称：

vue
<h1 class="hubname">你的 Hub 名称</h1>

添加背景 ​

在 App.vue 中添加背景元素：

vue
<template>
  <div class="background"></div>
  <div class="overlay"></div>
  <HomeView />
</template>

<style>
.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('你的背景图URL');
  background-size: cover;
  background-attachment: fixed;
  z-index: -2;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.6);
  z-index: -1;
}
</style>

使用镜像拉取图片 ​

如果 CI 环境无法直连 GitHub，可以修改 getphotos 脚本使用镜像：

json
"getphotos": "shx rm -rf temp_repo public/imgs && (git clone --depth 1 https://gh-proxy.org/https://github.com/YOUR-USERNAME/YOUR-HUB-REPO temp_repo && shx mkdir -p public/imgs && shx cp -r temp_repo/images/* public/imgs/ && shx rm -rf temp_repo) || shx mkdir -p public/imgs"

步骤 5：部署到 Cloudflare Pages ​

  1. 确保你的 hub-web 仓库已经推送到 GitHub
  2. 登录 Cloudflare Dashboard → Pages
  3. 创建项目，连接 GitHub 仓库

配置：

配置值
构建命令npm run build
输出目录dist
Node.js 版本18 或更高
  1. 部署完成后，Cloudflare 会给你一个 xxx.pages.dev 域名
  2. 你也可以绑定自定义域名

自动更新 ​

当 Hub 仓库合入新的 PR 后，需要重新构建 hub-web 才能看到新图片。你可以：

  • 手动触发：在 Cloudflare Pages 控制台点击 Retry deployment
  • 自动触发：在 Hub 仓库设置 GitHub Actions，合入 PR 后用 Cloudflare API 触发重新部署

模板维护与同步 ​

如果 HubWeb-template 模板仓库后续有更新，你可以通过 GitHub 的 Sync fork 按钮将上游更新同步到你的 Fork 仓库。

常见问题 ​

本地启动后看不到图片 ​

检查 package.json 中的 getphotos 脚本是否已正确替换为你的 Hub 仓库地址，并确认 Hub 仓库的 images/ 目录下存在图片。

构建失败提示缺少 imageList.json ​

imageList.json 是由 generateImageList.cjs 自动生成的，确保你运行的是 npm run dev 或 npm run build，而不是直接运行 vite。