基于 Astro 和 Cloudflare Pages 创建一个博客
🚀 使用 Astro + Cloudflare Pages 快速构建并部署一个现代博客网站。无需服务器，永久免费托管，支持 Markdown 写作，非常适合技术博主或创作者入门使用。
🎨 选择博客模板
从 Astro 官方提供的主题市场中，选择一个免费的博客模板：
复制想要的模板项目的 GitHub 链接。
🔐 私有化你的博客项目
- 登录 GitHub
- 点击右上角 ➕ > Import repository
- 输入模板项目的 GitHub 地址
- 为你的博客项目起个名字，并勾选为 Private
☁️ 使用 Cloudflare Pages 部署博客
- 访问：https://dash.cloudflare.com/
- 点击右上角 Pages
- 添加新项目，导入刚创建的 GitHub 仓库
- 设置项目名称
- 在“构建设置”中：
- 框架选择：Astro
- 构建命令：
npm run build - 输出目录：
dist
- 点击部署，稍等片刻即可获得你的博客地址 🎉
🖥️ 本地编辑与运行
npm install # 安装依赖
npm run dev # 启动本地开发服务器编辑页面样式或配置，浏览器中实时预览
🌐 配置站点 favicon（站点图标）
为让博客在不同设备和平台显示更专业，建议设置完整 favicon 支持：
推荐做法：
| 平台 | 图标尺寸 | 说明 |
|---|---|---|
| 浏览器通用 | 32×32 | favicon.ico |
| Apple 设备 | 180×180 | apple-touch-icon.png |
| Android | 192×192, 512×512 | 用于添加到主屏幕 |
| Windows 磁贴 | 150×150 | 需要额外的 browserconfig.xml |
| Safari | SVG 格式 | 支持固定标签页图标 |
图标生成步骤：
- 准备好站点图标（建议让 AI 根据主题设计）
- 使用工具：https://realfavicongenerator.net/
- 上传图片，生成一整套 favicon 资源和
<head>标签代码 - 将图标文件放入
public/文件夹，并在src/layouts/Layout.astro中添加相关<link>标签
🎯 初学者可只使用
favicon.ico，追求完整体验建议使用全部格式
✍️ 写博客文章
- 将你的 Markdown 博文放入：
src/pages/blog/ - 图片资源统一放入：
public/images/posts/ - 完成后直接
git push到 GitHub，Cloudflare 会自动重新部署！
✅ 总结
Astro + Cloudflare 是创建现代静态博客的绝佳组合：
- 🚀 极速构建，无服务器部署
- 💸 免费托管，支持自定义域名
- ✍️ Markdown 写作友好
- 🔒 支持私有仓库和自动部署
🛠️ 参考文档
- Astro 中文文档：https://docs.astro.build/zh-cn/install-and-setup/
- 安装流程一览：Astro 快速上手指南