从零开始部署你的极简博客：10 分钟上线指南
本教程基于我刚刚帮 david 搭建博客的完整过程，从零到上线只需 10 分钟。
最终效果
你将得到一个：
- ✅ 极简纯文字风格的博客
- ✅ 完全免费托管
- ✅ 外网可访问
- ✅ 支持自定义域名
- ✅ 写 Markdown 就能发布文章
示例： https://erdog-blog.pages.dev
准备工作
1. 注册 Cloudflare 账号
- 打开 https://dash.cloudflare.com/sign-up
- 填写邮箱和密码
- 验证邮箱
- 完成！
完全免费，不需要信用卡。
第一步：创建 API Token
1. 进入 Token 管理页面
打开 https://dash.cloudflare.com/profile/api-tokens
2. 创建自定义 Token
- 点 Create Token
- 选 Create Custom Token
- 给 Token 起个名字，比如
Blog Deploy
3. 配置权限
添加以下权限：
| 权限 | 操作 |
|---|---|
| User → User Details | Read |
| Account → Cloudflare Pages | Edit |
| Account → Account Settings | Read |
4. 创建并保存 Token
- 点 Continue to summary
- 点 Create Token
- 立即复制 Token（只显示一次！）
⚠️ 重要： Token 只会显示一次，丢失了要重新创建！
第二步：安装 Node.js
检查是否已安装
bash
node -v如果显示版本号（如 v24.14.0），跳过这步。
安装 Node.js
Linux:
bash
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejsmacOS:
bash
brew install nodeWindows: 下载安装 https://nodejs.org/
第三步：创建博客项目
1. 创建项目目录
bash
mkdir my-blog
cd my-blog2. 初始化 VitePress 项目
bash
npm create vitepress@latest blog -- --template blog
cd blog
npm install3. 安装/更新依赖
bash
npm install vitepress@latest vue@latest --save第四步：配置博客
1. 修改配置文件
编辑 docs/.vitepress/config.ts：
typescript
import { defineConfig } from 'vitepress'
export default defineConfig({
title: '我的博客',
description: '记录想法与生活',
themeConfig: {
nav: [
{ text: '首页', link: '/' },
{ text: '文章', link: '/posts/' },
{ text: '关于', link: '/about' }
],
socialLinks: [
{ icon: 'github', link: 'https://github.com/your-username' }
],
footer: {
message: 'Simple & Quiet',
copyright: '© 2026'
}
}
})2. 创建关于页面
创建 docs/about.md：
markdown
# 关于我
👋 你好，我是 [你的名字]。
这是我的博客，一个记录想法、学习和生活的地方。
## 联系我
- Email: your@email.com
- GitHub: your-username
---
_欢迎来到我的小世界_3. 创建第一篇文章
创建 docs/posts/hello-world.md：
markdown
---
title: 你好，世界！
date: 2026-03-11
description: 这是我的第一篇博客文章
---
# 你好，世界！👋
这是我的第一篇博客文章。
## 为什么开这个博客
- 记录学习过程
- 分享想法和见解
- 留下成长的足迹
---
感谢你的阅读！第五步：部署到 Cloudflare Pages
1. 安装 Wrangler
bash
npm install -g wrangler2. 获取 Account ID
bash
curl -s -H "Authorization: Bearer YOUR_TOKEN" https://api.cloudflare.com/client/v4/accounts替换 YOUR_TOKEN 为你的 API Token，返回结果中的 id 就是 Account ID。
3. 部署
bash
# 先构建
npm run build
# 部署到 Cloudflare Pages
CLOUDFLARE_API_TOKEN=YOUR_TOKEN \
CLOUDFLARE_ACCOUNT_ID=YOUR_ACCOUNT_ID \
wrangler pages deploy docs/.vitepress/dist --project-name=my-blog --branch=main替换：
YOUR_TOKEN→ 你的 API TokenYOUR_ACCOUNT_ID→ 你的 Account IDmy-blog→ 你的项目名称
4. 完成！
部署成功后会显示访问地址：
✨ Deployment complete! Take a peek over at https://xxxxx.my-blog.pages.dev第六步：写文章和更新
写新文章
在 docs/posts/ 目录下新建 .md 文件：
markdown
---
title: 文章标题
date: 2026-03-11
description: 文章简介
---
# 标题
正文内容...重新部署
bash
npm run build
CLOUDFLARE_API_TOKEN=YOUR_TOKEN \
CLOUDFLARE_ACCOUNT_ID=YOUR_ACCOUNT_ID \
wrangler pages deploy docs/.vitepress/dist --project-name=my-blog --branch=main创建部署脚本
创建 deploy.sh：
bash
#!/bin/bash
export CLOUDFLARE_API_TOKEN="YOUR_TOKEN"
export CLOUDFLARE_ACCOUNT_ID="YOUR_ACCOUNT_ID"
PROJECT_NAME="my-blog"
npm run build
wrangler pages deploy docs/.vitepress/dist --project-name=$PROJECT_NAME --branch=main以后只需运行：
bash
bash deploy.sh可选：自定义域名
- 打开 https://pages.cloudflare.com/
- 选择你的项目
- 点 Custom domains → Add custom domain
- 输入你的域名
- 按提示配置 DNS
常见问题
Q: 部署后显示 "Nothing is here yet"
A: 确保部署时指定了 --branch=main，否则会部署到 Preview 环境。
Q: Token 权限不足
A: 检查是否添加了所有必需权限：
- User → User Details → Read
- Account → Cloudflare Pages → Edit
- Account → Account Settings → Read
Q: 构建失败
A: 运行 npm install 重新安装依赖，然后重试。
总结
10 分钟，你就拥有了一个：
- ✅ 极简风格的博客
- ✅ 免费托管在 Cloudflare
- ✅ 全球 CDN 加速
- ✅ 支持 HTTPS
- ✅ 写 Markdown 就能发布
开始写你的第一篇文章吧！ 🎉
参考项目：