目 录CONTENT

文章目录

【图文教程】全新的CloudFlare部署美化博客

传家宝VPS
2026-01-02 / 0 评论 / 0 点赞 / 13 阅读 / 0 字
RackNerd Mobile Leaderboard Banner

平台部署方案

在开始部署前,请确保您已经拥有 Cloudflare 和 GitHub 账号。

1.Fork 此项目

image-UGjS.webp

2.登录 Cloudflare 后台,点击左侧的 Compute > Workers,在右侧点击 Pages,然后点击 “Import an existing Git repository” 旁边的 Get Started。

3.在弹出的界面中点击 Connect GitHub。

image-LoIo.webp

4.如果您尚未登录 GitHub,请先完成登录。

登录后,在授权界面中找到 Repository access,选择 Only select repositories,然后点击 Select repositories,勾选刚刚 Fork 的项目,点击 Save 保存授权。授权成功后系统会自动返回 Cloudflare。

image-uEtk.webp

5.返回 Cloudflare 后,在 “Select a repository” 中选择刚授权的仓库,点击激活后的 Begin setup 继续

image-okWD.webp

6.设置构建参数:

  • Project name:填写任意项目名称

  • Build command:pnpm run build

  • Build output directory:/
    然后点击 Save and Deploy,Cloudflare 将自动构建并部署项目。

6.创建 Github App 链接仓库

在 github 个人设置里面,找到最下面的 Developer Settings ,点

image-XXjg.webp

进入开发者页面,点击 New Github App

GitHub App nameHomepage URL , 输入什么都不影响。Webhook 也关闭,不

image-OTWT.webp

只需要注意设置一个仓库 write 权限,其它

image-uKfA.webp

点击创建,谁能安装这个仓库这个选择无所谓。直接

image-tTFw.webp

7.创建密钥

创建好 Github App 后会提示必须创建一个 Private Key,直接创建,会自动下载(不见了也不要紧,后面自己再创建再下载就行)。页面上有个 App ID 需要复制

image-ulyj.webp

再切换到安装页面

image-XzbG.webp

安装页这里

image-lGam.webp

权当前

点击安装,就完成了 Github App 管理该仓库的权限设置了。下一步就是让前端知道推送那个项目,就是最开始提到的环境变量。直接改仓库文件 src/consts.ts

  • OWNER: process.env.NEXT_PUBLIC_GITHUB_OWNER || '替换1',改为你的github id名,比如你主页是https://github.com/woshidashuaibi,那么填写woshidashuaibi

  • REPO: process.env.NEXT_PUBLIC_GITHUB_REPO || '2025-blog-public',填入你命名的项目名称,如果没有修改就是这个

  • BRANCH: process.env.NEXT_PUBLIC_GITHUB_BRANCH || 'main',

  • APP_ID: process.env.NEXT_PUBLIC_GITHUB_APP_ID || '2567830',app id ,第6步有些

  • ENCRYPT_KEY: process.env.NEXT_PUBLIC_GITHUB_ENCRYPT_KEY || 'wudishiduomejimo',

设置完成后,Cloudflare会自动部署,让环境变量生效。

原文地址:https://www.nodeseek.com/post-567625-1

广告 广告
博主关闭了所有页面的评论