最近想搭建一个个人博客来记录学习和思考的过程，经过一番调研，最终选择了 Astro + Cloudflare Pages 的组合。整个过程出乎意料的顺利，而且完全免费！

为什么选择这个技术栈？

Astro 的优势

• 性能出色：默认零 JavaScript，页面加载超快
• 开发体验好：支持 Markdown、TypeScript，组件化开发
• 生态丰富：可以混用 React、Vue 等框架组件
• SEO 友好：静态生成，搜索引擎优化效果好

Cloudflare Pages 的优势

• 完全免费：每月 25 万次请求，个人使用绰绰有余
• 全球 CDN：访问速度快，用户体验好
• 自动部署：Git 推送即部署，CI/CD 开箱即用
• 自定义域名：支持绑定自己的域名，还有免费 SSL

搭建步骤

1. 环境准备

如果不想在本地配置 Node.js 环境，强烈推荐使用 GitHub Codespaces：

1. 在 GitHub 创建新仓库
2. 点击 “Code” → “Codespaces” → “Create codespace”
3. 等待环境启动（已预装 Node.js）

2. 创建 Astro 项目

在 Codespace 终端中运行：

# 删除默认文件
rm README.md

# 创建 Astro 博客项目
npx create-astro@latest . --template blog --yes

# 安装依赖
npm install

# 启动开发服务器
npm run dev

几分钟后，你就有了一个功能完整的博客！

3. 自定义博客内容

修改网站信息

编辑 src/consts.ts 文件：

export const SITE_TITLE = 'Digital Garden 🌱';
export const SITE_DESCRIPTION = '记录学习与成长的数字花园';

自定义主页

修改 src/pages/index.astro，可以改成你喜欢的风格。我选择了 “Digital Garden” 主题，强调知识的成长和积累。

更新关于页面

修改 src/pages/about.astro，介绍你的博客定位和内容方向。

4. 写第一篇文章

在 src/content/blog/ 目录下创建 .md 文件：

---
title: '你的文章标题'
description: '文章描述'
pubDate: 'Aug 10 2025'
---

这里是文章内容...

5. 部署到 Cloudflare Pages

推送到 GitHub

git add .
git commit -m "Initial blog setup"
git push origin main

在 Cloudflare Pages 部署

1. 登录 Cloudflare Dashboard
2. 进入 “Pages” 页面
3. 点击 “Create a project”
4. 连接你的 GitHub 仓库
5. 配置构建设置：
   • 构建命令: npm run build
   • 输出目录: dist
6. 点击 “Save and Deploy”

几分钟后，你的博客就上线了！

进阶配置

自定义域名

在 Cloudflare Pages 项目设置中可以绑定自己的域名，还会自动配置 SSL 证书。

SEO 优化

Astro 默认已经做了很多 SEO 优化，你也可以：

• 在每篇文章中添加合适的 description
• 使用语义化的标题结构
• 添加 sitemap（Astro 有官方插件）

评论系统

可以集成 Giscus、Disqus 等评论系统，增加互动性。

总结

整个搭建过程大概花了 1-2 小时，大部分时间都在调整样式和内容。这个技术栈的优势在于：

• 学习成本低：Astro 语法简单，Cloudflare Pages 配置简单
• 维护成本低：静态站点，几乎不需要维护
• 使用成本低：完全免费（除非你要自定义域名）
• 性能很好：静态生成 + 全球 CDN

如果你也想搭建个人博客，强烈推荐试试这个方案。现在就开始你的数字花园之旅吧！🌱