简介
继之前对valaxy博客进行美化之后，觉得每次上传部署太过麻烦，因此对其进行了大改，现实现功能如下，数据改为储存于R2，数据库使用D1，文章页面，关于页面，友链页面等页面均储存在云端数据中，可以实现动态更改文章，发布文章，修改友链和其他页面数据等操作，而不需要重新部署，以下是部分截面预览截图 
开源地址
老样子，AIOVTUE-雪 将文件开源在github，顺便说一下，这个项目由于改为实时获取云端数据渲染，所以导致搜索引擎爬虫可能会获取到空页面导致seo收录效果不好，酌情考虑是否作为主要站点，这个项目配有专门的obsidian插件，可以使用obsidian编辑，并且给obsidian增加了一键上传文章到云端的功能，凭借这个你也可以做到分享自己的本地文章给别人，好啦，这是地址：点我前往开源地址，喜欢的话记得点个star哦
部署教程
这个不像静态，部署稍微有一点复杂，不过其实也还好，跟着一步步操作就行
克隆仓库
前往开源地址，fork克隆一份到自己的github，或者直接下载zip包也行，反正要下载下来修改的
本地运行
安装依赖
打开终端运行如下命令
bash
npm install配置本地密钥
复制示例文件并按需修改：
bash
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 启动后可访问：
初始化本地数据库
bash
# 清空本地模拟存储（可选）
# 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
bash
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 资源
bash
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-...）。
初始化远程数据库与内容
bash
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
构建并部署
bash
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 复制：
ini
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、绝对链接生成用
常用命令
bash
# 开发
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://zzhitao.site/posts/valaxy/valaxyblog-dongtai
- 版权声明：本博客所有文章除特别声明外，均默认采用 CC BY-NC-SA 许可协议。
