10分钟搭建自己的个人博客

如标题所示，这会是一次很简短的分享，10分钟的时间大家就能迅速搭建自己的个人博客、实现文章上床、图床、域名、https部署等等功能。

我们将使用CloudFlare全家桶实现上述的所有功能，体验CF的生态闭环。

购买域名

首先，我们需要先购买一个域名，非热门域名的价格普遍在每年100元以内，这将是我们唯一所需要的支出。

首先登录CloudFlare控制台，选择左侧的【域】，然后选择右侧的【购买域】

然后输入自己感兴趣的域名点击搜索即可：

找到自己想要的域名，点击确认，进入账单页面：

添加自己的银行卡信息，经过测试，Visa、万事达等外币卡和银联信用卡都可以完成购买。

购买完成后，我们就可以在自己的【域】下看到域名了：

创建代码仓库

我们选择用VuePress构建自己的博客网站，大家也可以选择其他的技术方案，这里不过多展开。这一步想必大家都不模式。我们快速略过，只讲一下基本步骤

1. 创建VuePress项目

pnpm create vuepress vuepress-starter

2. 初始化项目

git init

3. 创建gitignore

# Dependencies
node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

# VuePress build output
docs/.vuepress/dist/
docs/.vuepress/.cache/
docs/.vuepress/.temp/

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

# OS files
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
ehthumbs.db
Thumbs.db

4. 去Github创建代码仓库

5. 将代码推送到仓库上

git remote add origin git@github.com:eater-altria/documents-test.git
git branch -M main
git push -u origin main

这样，我们就完成了一个基本的开发框架。

创建Pages应用

然后，我们回到控制台，展开【计算和AI】，选择【Workers和Pages】，然后点击创建应用程序

然后选择【Continue with GitHub】：

第一次连接GitHub需要授权登录，登录之后选择我们刚刚创建的那个仓库：

点击下一步，填写一下构建和发布命令：

以下几点需要注意：

项目名称：项目名称随意填写
构建命令：VuePress的默认构建命令是npm run docs:build，如果你采取其他技术方案，填写对应的构建命令即可。
部署命令：我采取的部署命令是：npx wrangler deploy --assets=./docs/.vuepress/dist --name="documents" --compatibility-date 2026-01-06
- --assets: 指定构建打包的静态文件的路径
- --name: 和项目名称保持一致
- --compatibility-date：兼容性日期，这个命令我不太了解，但是参阅文档，填写当天的日期就行，后续CF建议开发者定期更新一下。

填写完成之后点击部署即可完成部署！

我们点开刚刚创建的Worker，点击【设置Tab】，可以看到它自动帮忙添加了一个域名：