NavSphere 部署到 Cloudflare Pages 完整流程（精简版）

本教程是基于孟晨的 免费开源的网址导航系统的部署指南，最新版，重点解释登录配置问题 这篇教程基础上进行的二次优化，目的在于缩短部署时间，以及优化部署的时候全站部署，接入了cf的钩子，对特定目录修改后，进行更新的操作。

一、前置准备

二、GitHub OAuth App 配置

1. GitHub → Settings → Developer settings → OAuth Apps → New OAuth App

2. 填写：

   • Application name: NavSphere

   • Homepage URL: https://您的域名

   • Authorization callback URL: https://您的域名/api/auth/callback/github

3. 保存，记录 Client ID 和 Client Secret

三、wrangler.toml 配置（核心）

在仓库根目录修改 wrangler.toml：

name = "navsphere"
compatibility_date = "2024-11-11"
compatibility_flags = ["nodejs_compat"]
pages_build_output_dir = ".vercel/output/static"

[env.production.vars]
# GitHub 配置
GITHUB_CLIENT_ID = "您的Client ID"
GITHUB_OWNER = "您的GitHub用户名"
GITHUB_REPO = "NavSphere"
GITHUB_BRANCH = "main"

# NextAuth 配置（注意：/api/auth 必须保留）
NEXTAUTH_URL = "https://您的域名/api/auth"
NEXT_PUBLIC_API_URL = "https://您的域名"

# 构建加速与依赖冲突解决
NODE_VERSION = "22.16.0"
PNPM_VERSION = "10.11.1"
NPM_CONFIG_LEGACY_PEER_DEPS = "true"

⚠️ 关键：NEXTAUTH_URL 必须包含 /api/auth，NEXT_PUBLIC_API_URL 只写到域名。

四、Cloudflare Dashboard 配置

4.1 添加敏感环境变量

Pages 项目 → 设置 → 环境变量 → 添加（加密）：

4.2 配置构建设置

4.3 启用构建缓存

设置 → 构建与部署 → 构建缓存 → 启用

五、GitHub Actions 自动部署（可选）【本身cloudflare 是自动部署的，这步确实有点多余】

5.1 创建 Cloudflare 部署钩子

Pages 项目 → 设置 → 部署钩子 → 创建 → 复制 Webhook URL

5.2 添加 GitHub Secret

仓库 → Settings → Secrets → Actions → 添加：

• Name: CF_PAGES_WEBHOOK_URL

• Secret: 粘贴 Webhook URL

5.3 创建工作流文件

路径：.github/workflows/deploy-on-data-change.yml

name: Auto Deploy on Data Change

on:
push:
paths:
- 'navsphere/content/**/*.json'
- 'src/navsphere/content/**/*.json'
branches: [main]
workflow_dispatch:

jobs:
trigger-deploy:
runs-on: ubuntu-latest
steps:
- run: curl -X POST "${{ secrets.CF_PAGES_WEBHOOK_URL }}"

六、触发部署

提交所有配置 → 推送到 main 分支 → Cloudflare Pages 自动构建部署

至此就算完成了加速优化的动作。