简介
继之前对valaxy博客进行美化之后，觉得每次上传部署太过麻烦，因此对其进行了大改，现实现功能如下，数据改为储存于R2，数据库使用D1，文章页面，关于页面，友链页面等页面均储存在云端数据中，可以实现动态更改文章，发布文章，修改友链和其他页面数据等操作，而不需要重新部署，以下是部分截面预览截图
开源地址
老样子，AIOVTUE-雪 将文件开源在github，顺便说一下，这个项目由于改为实时获取云端数据渲染，所以导致搜索引擎爬虫可能会获取到空页面导致seo收录效果不好，酌情考虑是否作为主要站点，这个项目配有专门的obsidian插件，可以使用obsidian编辑，并且给obsidian增加了一键上传文章到云端的功能，凭借这个你也可以做到分享自己的本地文章给别人，好啦，这是地址：点我前往开源地址，喜欢的话记得点个star哦
部署教程
这个不像静态，部署稍微有一点复杂，不过其实也还好，跟着一步步操作就行
克隆仓库
前往开源地址，fork克隆一份到自己的github，或者直接下载zip包也行，反正要下载下来修改的
本地运行
安装依赖
打开终端运行如下命令
npm install配置本地密钥
复制示例文件并按需修改：
cp .dev.vars.example .dev.vars注意.dev.vars 不要提交到 Git，否则可能泄露秘钥
本地预览
初次访问建议使用npm run dev:cf，后续预览使用npm run dev:cf:lite即可，区别是前者会迁移数据
| 命令 | 端口 | 说明 |
|---|---|---|
npm run dev |
4859 | Vite 热更新；API 走本地 content/ 插件，与云端行为不完全一致 |
npm run dev:cf |
8788 | 推荐：构建 + 本地 D1/R2 迁移 + wrangler pages dev，等同云端 |
npm run dev:cf:lite |
8788 | 仅重建前端并启动 wrangler，跳过数据迁移（改样式/UI 时用） |
dev:cf 启动后可访问：
- 首页：http://localhost:8788
- 后台：http://localhost:8788/admin
- API：http://localhost:8788/api/posts
初始化本地数据库
# 清空本地模拟存储（可选）
# Windows PowerShell: Remove-Item -Recurse -Force .wrangler
npm run d1:migrate:local
npm run migrate:posts:local
npm run migrate:links:local
npm run migrate:about:local
npm run migrate:gallery:local
npm run migrate:notice:local本地 D1/R2 数据保存在 .wrangler/state/v3/（已在 .gitignore 中）。
快速部署
建议使用这个部署，使用的终端操作，不难的
准备步骤
需要以下东西
- Cloudflare 账号
- Node.js 18+、npm 9+
- 本地已安装 Git
git clone https://github.com/AIOVTUE/aiovtueBlogUseR2
cd aiovtueBlogUseR2
npm install
npx wrangler login
cp .dev.vars.example .dev.vars # Windows: copy .dev.vars.example .dev.vars编辑 .dev.vars，填入本地开发用的示例或测试密码（勿提交 Git）。
创建 Cloudflare 资源
npx wrangler d1 create aiovtue-blog
npx wrangler r2 bucket create aiovtue-blog
npx wrangler pages project create aiovtue-blog --production-branch main将 d1 create 输出的 database_id 写入 wrangler.toml（替换占位符 00000000-...）。
初始化远程数据库与内容
npm run d1:migrate
npm run migrate:posts
npm run migrate:links
npm run migrate:about
npm run migrate:gallery
npm run migrate:notice配置 Pages 绑定与环境变量
登陆云端cloudflare，找到刚才部署的项目添加环境变量 在 Cloudflare Dashboard → Workers & Pages → aiovtue-blog： Functions → Bindings
| 绑定类型 | 变量名 | 资源名 |
|---|---|---|
| D1 | DB |
aiovtue-blog |
| R2 | BUCKET |
aiovtue-blog |
Settings → Environment variables（Production + Preview 均建议配置）
| 变量名 | 类型 | 示例值 |
|---|---|---|
ADMIN_USERNAME |
Variable | admin |
ADMIN_PASSWORD |
Secret | 强密码 |
ADMIN_API_TOKEN |
Secret | 随机长字符串 |
WEBDAV_PASSWORD |
Secret | 可选，WebDAV 相册用 |
SITE_URL |
Variable | https://example.com |
构建并部署
npm run build
npx wrangler pages deploy dist --project-name aiovtue-blog --commit-dirty=true绑定域名
Dashboard → Pages 项目 → Custom domains → 添加 example.com，按提示配置 DNS。
同步修改：
- Cloudflare 环境变量
SITE_URL→https://example.com site.config.ts中的urlcontent/notice.json/ 后台公告栏（若需展示你的域名）
个性化配置
| 文件 | 说明 |
|---|---|
site.config.ts |
站点标题、作者、社交链接、赞助 |
valaxy.config.ts |
主题色、Hero、公告栏、评论/统计插件 |
content/notice.json |
公告栏域名列表 |
content/about/index.md |
关于页正文 |
content/posts/ |
文章 demo |
content/links/index.md |
友链 |
wrangler.toml |
database_id、项目名称（若改名） |
网页部署
本节介绍不依赖命令行上传文件时，如何在 Cloudflare 网页后台完成部署与配置。
重要： 本项目包含
functions/（API、后台鉴权、RSS）。仅把dist文件夹拖进网页上传不会带上 Functions，站点会缺 API。推荐用 「关联 Git 自动构建」（下方方式 A），或在本地构建后用命令行wrangler pages deploy（上一节）。
登录并进入 Pages
- 打开 Cloudflare Dashboard
- 左侧选择 Workers 和 Pages（Workers & Pages）
- 若已有项目，点击 aiovtue-blog；否则点击 创建 → Pages → 连接到 Git
首次创建项目（关联 Git）
- 选择 连接到 Git，授权 GitHub/GitLab
- 选中本仓库
aiovtue-blog - 点击 开始设置，填写构建配置：
| 配置项 | 填写内容 |
|---|---|
| 项目名称 | aiovtue-blog |
| 生产分支 | main（或你的主分支） |
| 框架预设 | None（无预设） |
| 构建命令 | npm run build |
| 构建输出目录 | dist |
| 根目录 | /（仓库根目录） |
| 注意：wrangler.toml文件内数据库和R2相关信息需要先修改，并在网页创建对应数据库，否则会报错，具体步骤看下方 |
- 点击 环境变量 → 添加变量（见下文「四、配置环境变量」），然后 保存并部署
首次部署会自动 npm install + npm run build，并识别仓库根目录的 functions/ 作为 Pages Functions。
绑定 D1 与 R2
部署完成后，进入项目 aiovtue-blog → 设置（Settings） → 函数（Functions） → 绑定（Bindings）：
添加 D1 数据库绑定
- 点击 添加 → D1 database
- 变量名填：
DB（必须与wrangler.toml一致） - 选择数据库：
aiovtue-blog - 保存
若列表中没有 D1，需先到 Storage & databases → D1 → 创建数据库，名称 aiovtue-blog。
添加 R2 存储桶绑定
- 点击 添加 → R2 bucket
- 变量名填：
BUCKET - 选择存储桶：
aiovtue-blog - 保存
若尚无 R2，到 R2 → 创建存储桶，名称 aiovtue-blog。
绑定修改后，需在 部署（Deployments） 中 重新部署 一次生产环境，新绑定才会生效。
配置环境变量
路径：设置 → 环境变量（Variables and Secrets） → 添加
| 变量名 | 类型 | 生产环境值示例 |
|---|---|---|
ADMIN_USERNAME |
文本（Variable） | 你的后台用户名 |
ADMIN_PASSWORD |
加密（Secret） | 你的后台密码 |
ADMIN_API_TOKEN |
加密（Secret） | 随机长字符串（与密码不同） |
WEBDAV_PASSWORD |
加密（Secret） | 相册 WebDAV 密码（可选） |
SITE_URL |
文本（Variable） | https://example.com |
- Production 与 Preview 建议都配置（Preview 用于 PR 预览部署）
- 修改环境变量后，点击 重新部署 使配置生效
数据库迁移
关联 Git 不会自动执行 migrations/ 里的 SQL，首次部署或有新迁移文件时需处理表结构。
- Dashboard → Storage & databases → D1 → 选择 aiovtue-blog
- 打开 控制台（Console） 标签
- 将
migrations/下各.sql文件内容复制后按编号顺序粘贴进终端执行：0001_posts.sql0002_taxonomy.sql0003_pin_order.sql0004_notice.sql0005_admin_login_attempts.sql
绑定域名
- 进入项目 aiovtue-blog → 自定义域（Custom domains）
- 点击 设置自定义域 → 输入域名，如
example.com - 若域名已在当前 Cloudflare 账号下，按提示添加 CNAME 或自动配置
- 等待 SSL 证书生效（通常几分钟）
绑定后记得：
- 将
SITE_URL环境变量改为https://你的域名 - 更新仓库内
site.config.ts的url并推送（若用 Git 部署）
环境变量
从 .dev.vars.example 复制：
WEBDAV_PASSWORD=your_webdav_password
ADMIN_USERNAME=admin
ADMIN_PASSWORD=your_admin_password
ADMIN_API_TOKEN=your_admin_api_token
SITE_URL=http://localhost:8788| 变量 | 必填 | 说明 |
|---|---|---|
ADMIN_USERNAME |
是 | 后台用户名 |
ADMIN_PASSWORD |
是 | 后台密码 |
ADMIN_API_TOKEN |
推荐 | 用于 Authorization: Bearer 调用 API；未设置时用 ADMIN_PASSWORD 签 session |
WEBDAV_PASSWORD |
否 | WebDAV 相册代理 |
SITE_URL |
推荐 | RSS、绝对链接生成用 |
常用命令
# 开发
npm run dev # Vite 热更新 @4859
npm run dev:cf # 完整本地 Cloudflare 预览 @8788
npm run dev:cf:lite # 轻量预览（不迁移数据）
# 构建
npm run build # 生产构建 → dist/
# 数据库
npm run d1:migrate # 远程 D1 迁移
npm run d1:migrate:local # 本地 D1 迁移
# 内容同步（本地 content/ → 云端）
npm run migrate:posts
npm run migrate:links
npm run migrate:about
npm run migrate:gallery
npm run migrate:notice
# 部署
npx wrangler pages deploy dist --project-name aiovtue-blog --commit-dirty=true
- 本文链接： https://daily.yybb.us/posts/valaxyblog-dongtai/
- 版权声明： 本站所有文章除特别声明外，均采用 CC BY-NC-SA 许可协议。