博客

用 AI 搭建 Astro 博客:GitHub 与 Cloudflare 自动部署

从一句建站需求到网站上线,这次我几乎没碰配置。

方饼猫接通 Astro、CSS、Cloudflare Pages 和 GitHub
一句需求把 Astro、样式、GitHub 和 Cloudflare Pages 接到了一起。

起因

上周我想搭个个人博客。要求很简单:极简、快、能免费部署,还要绑定自己的域名。以前这种事得占掉一个周末,选框架、调样式、配 CI、处理 DNS,一样都绕不开。

这次我打开 AI 助手,打了一句话:

做一个 Blog,部署到 Cloudflare 上,我的域名是 ohmyself.com,风格类似 Bear Blog,顺便帮我填充五篇博文。

然后去倒了杯咖啡。

发生了什么

回来时,站点已经有模有样了。大致是这样:

选型:AI 问了三个问题:框架偏好、语言和部署方式。我选了 Astro、中英混合、直接部署,没花多久。

搭建:它用 Astro 5 建了一个静态博客项目,写了全局样式(CSS 变量 + 暗色模式,不到 100 行),配好了 Cloudflare 适配器。没有用任何 UI 框架,没有 Tailwind,没有组件库。纯 HTML + CSS,我想保留的是 Bear Blog 那种少而简单的页面。

写文章:它先放进五篇示例博文,有技术向的(Astro 搭建记录、Cloudflare 踩坑),也有随笔向的(数字花园、工具清单)。内容不是 Lorem ipsum,占位之外还能看出页面和排版的效果。

部署:我给了一个 Cloudflare API Token,它用 wrangler 创建了 Pages 项目、上传构建产物、绑定自定义域名。从 npm installohmyself.com 可访问,大概四分钟。

代码托管:整个项目推到了 GitHub 仓库,再在 Cloudflare Pages 后台连上这个仓库。之后每次 git push,Cloudflare 会拉代码、构建并部署,平时不用手动跑 wrangler。

技术栈

最后用的是:

  • Astro 5:静态输出,零客户端 JS
  • Cloudflare Pages:免费托管,全球 CDN,连接 GitHub 自动部署
  • GitHub:代码托管 + 版本管理,push 即发布
  • Markdown + Content Collections:写文章就是新建一个 .md 文件
  • CSS 变量 + prefers-color-scheme:暗色模式不需要 JS

项目没有数据库、没有后端逻辑,也没有构建时的 API 调用。astro build 输出静态 HTML,部署到 CDN 就行。

日常更新流程

现在发一篇文章的全部操作:

  1. src/content/blog/ 下新建一个 .md 文件
  2. 写好 frontmatter(title、date、description)和正文
  3. git addgit commitgit push

Cloudflare 检测到仓库更新后会自动构建,过一会儿新文章就上线了。

我平时不用打开 Cloudflare 后台。发布流程只有三步:写 Markdown、push、上线。

如果愿意,也可以把这三步交给 AI。我现在会直接说“写一篇关于 XX 的文章”,再看一遍稿子,让它提交并推送。

你需要准备什么

只需要四样:

  1. 一个域名(DNS 托管在 Cloudflare 上最方便)
  2. 一个 Cloudflare 账户(免费)
  3. 一个 GitHub 账户(免费)
  4. 一句话描述你想要什么

这次的选型、编码、构建、部署、DNS 配置和仓库初始化,我都交给它处理了。

这不是广告

我没有收 Astro 或 Cloudflare 的钱。选它们是因为这个站点只需要静态输出:Astro 默认不带客户端 JS,适合文字博客;Cloudflare Pages 也正好能托管自定义域名。

让我意外的是,搭博客里最耗时间的那些零碎事,已经能一次交代清楚。框架选择、配置和部署里总会有小坑,但 AI 把大部分来回试错接过去了。

你仍然要知道自己想做什么,也要看懂最后上线的东西。不过第一次把站点跑起来,确实轻松了很多。

下一步

这套博客当时确实上线了。想搭一个类似的,把需求发给你的 AI 助手,换成自己的域名,再按它的问题补充信息就行。

当然,想自己折腾一个周末也完全没问题。