只用 Codex 客户端,把这个博客部署上线

这篇文章不是传统教程,更像一次现场记录。

一开始,我只是把一段 Dante Astro Theme 的安装流程丢给 Codex,然后说:

根据以上的流程帮我,就是怎么说呢,帮我部署一下这个我的静态博客的网站吧。

我的目标很直接:不要只告诉我怎么做,直接帮我把网站跑起来、部署出去。

从空目录开始

当时本地目录 /Users/chenjiahao/Documents/myblog 里几乎是空的,只有一个还没有提交记录的 Git 仓库。Codex 先检查了 Node 和 npm,再把 Dante Astro Theme 拉下来,保留原来的 .git,把主题文件复制进当前目录。

这一点挺舒服:我不用自己在不同目录之间来回移动,也不用担心把 Git 仓库弄乱。它先看环境,再动手。

关键步骤大概是这样:

npm install
npm run build

第一次构建成功后,dist/ 目录就生成了可以部署的静态文件。到这里,本地部分已经成型。

Cloudflare 授权:唯一需要我点一下的地方

接下来是 Cloudflare Pages。

Codex 先检查 Wrangler 是否已经登录。结果当然没有,于是它发起:

npx wrangler login

这一步浏览器会打开 Cloudflare 的 OAuth 页面。我第一次没看见弹窗,于是我说:

你可不可以重新授权一下?我刚刚可能没看见。

它就把旧的登录进程清掉,重新发起授权。等我在浏览器里点完允许,终端里出现了:

Successfully logged in.

后面部署时又遇到一个小插曲:my-blog 这个 Cloudflare Pages 项目还不存在。Codex 不是停下来让我自己去控制台点来点去,而是直接创建项目:

npx wrangler pages project create my-blog --production-branch=master

然后再部署:

npx wrangler pages deploy ./dist --project-name my-blog --commit-dirty=true --branch master

最后 Cloudflare 给了线上地址:

https://my-blog-3xy.pages.dev

从主题演示站,改成我的个人博客

部署成功后,站点还只是一个英文模板。于是我告诉 Codex:

我本人的名字叫做嘉豪,然后我是一个有十年写代码经验的程序员,然后我最近在 vibe coding 做一些自己的东西。

我还给了两个项目链接:

  • VibeHunt:我用 AI 搭建的 vibe coding 网站。
  • KnowUV:我提供的互联网服务。

Codex 做了几件事:

  • 把站点标题改成“嘉豪”。
  • 把首页介绍改成我的个人简介。
  • 把 About、Contact、Projects 都换成真实内容。
  • 删除主题自带的虚构项目和英文示例文章。
  • 新增第一篇中文博客。
  • 把整个站点界面中文化。

这是现在的首页:

嘉豪个人博客首页

中文化不是只改几段正文

我后来又补了一句:

这个网站一定要是对中文支持友好的,因为我看现在全都是英文界面。

这一步很重要。

很多模板表面上“能写中文”,但导航、按钮、分页、标签、日期格式、SEO 标题还是英文。Codex 把这些界面骨架都改了:

  • Home 改成 首页
  • Projects 改成 项目
  • Blog 改成 博客
  • Tags 改成 标签
  • Read Post 改成 阅读文章
  • View Project 改成 查看项目
  • 日期格式改成中文
  • HTML 语言改成 zh-CN

现在项目页看起来就是中文站点,而不是英文模板里塞了几段中文:

项目页截图

标签页也变成了中文语境:

标签页截图

本地预览:不用每次都发线上

部署之后我意识到一个问题:如果每改一次都要发布到 Cloudflare 才能看效果,那就太慢了。

于是我问:

这些怎么本地预览呢?我不想每一次都还要手动发布到线上才能够看到效果。

答案是启动 Astro 开发服务器:

npm run dev

通常它会跑在:

http://localhost:4321/

如果端口被占用,Astro 会自动换到另一个端口,比如这次截图时就跑到了 4322。本地预览最大的好处是:改内容后页面会自动刷新,确认满意了再部署。

我又直接说:

你直接帮我启动吧,我想直接能够在这里预览。

于是 Codex 直接启动了本地服务器。到这里,我就可以在 Codex 的内置浏览器里边看边改。

这是第一篇文章的本地预览:

第一篇博客预览

一次小改名:web coding 到 vibe coding

后面我又做了一个非常小但很真实的修改:

web coding -> vibe coding

这类修改如果自己手动找,可能会漏掉页面描述、标签、项目简介、博客标题、URL slug。Codex 做的是全站搜索,然后统一替换,还把文章路径从:

/blog/hello-web-coding/

改成:

/blog/hello-vibe-coding/

这就是我喜欢这种工作流的地方:小改动也可以做完整,不只是“替换眼前那一行”。

这次流程给我的感觉

这次建站像是一次很短的 pair programming。

我负责描述方向:

  • 我要部署静态博客。
  • 我叫嘉豪。
  • 我有十年写代码经验。
  • 我在做 vibe coding。
  • 我要放 VibeHunt 和 KnowUV。
  • 我要中文友好。
  • 我要本地预览。

Codex 负责把这些意图落到文件、命令、构建和部署上。

它不是只给我一份说明文档,而是实际完成了这些动作:拉代码、装依赖、构建、登录 Cloudflare、创建 Pages 项目、部署、改内容、删模板文章、中文化 UI、启动本地预览、截图验证。

当然,这里面也有需要人参与的地方,比如 Cloudflare 授权必须由我在浏览器里点允许。还有一些内容表达,最后还是应该由我自己审一遍。但整个过程已经不再是“我照着教程一步步复制命令”,而更像“我说我要什么,它把工程路径铺出来,然后我们一起校准”。

最后

现在这个博客已经上线,也可以在本地预览。

线上地址:

https://my-blog-3xy.pages.dev

本地开发:

npm run dev

部署:

npm run build
npx wrangler pages deploy ./dist --project-name my-blog --commit-dirty=true --branch master

这篇文章本身也算是这个博客的第二个内容实验:用一次真实对话,记录一个网站如何从空目录变成可以访问的个人站点。