从零搭建个人品牌站

起因

事情是这样的：我手里有一本期权交易的 epub 电子书，想把它拆成教程系列，发到微信公众号和 X 上。

听起来简单对吧？拆书、改写、发布，三步搞定。但我很快意识到——内容发出去了，落在哪？公众号文章沉在时间线底部，X 长文没几个人翻。我需要一个自己的阵地，把所有东西聚在一起。

于是”做个教程”变成了”建个站 + 做教程 + 记录整个过程”。典型的 scope creep。但这次我接受了。

技术选型：三个决定

Astro，不是 Next.js，不是 Hugo。 原因很直接：这是个内容站，不是 web app。Astro 天生为 Markdown 优化，静态输出，零 JS runtime。Next.js 太重——加载一堆 React 运行时只为渲染一篇文章，浪费。Hugo 倒是快，但 Go template 的学习曲线让我不想碰。

Cloudflare Pages，不是 Vercel。 全球 CDN 是基本要求，但关键在中国大陆的访问速度。Vercel 在国内慢得明显，Cloudflare 好很多。免费额度也够用。

三语支持从第一天就规划。 英文、简体中文、繁体中文。i18n 如果不在架构层面第一天解决，后面改造是噩梦——路由结构、内容目录、hreflang 标签、UI 文案，全都要重来。

还有个意外：我计划用 Astro 5，但 create-astro 直接给我装了 Astro 6。Tailwind 集成方式从 @astrojs/tailwind 变成了 @tailwindcss/vite，Tailwind CSS 4 用 CSS 原生的 @theme 配置，不再需要 tailwind.config.js。这倒是个好变化。

从 epub 到教程：意外不断

期权书有 PDF 版和 epub 版。我先试 PDF——结果是扫描版，文字提取出来全是乱码。

转战 epub。用 ebooklib + BeautifulSoup 解析，epub 里是干净的 HTML，提取出 10 个章节和 86 张图片。图片批量转 WebP，体积缩小一大半。这步倒是顺利。

YouTube 视频转录稿就没这么走运了。我找了两个播放列表作为补充素材。第一个播放列表（美投君，20 个视频）——全部字幕被禁用。20 个视频，一条转录稿都拿不到。

第二个播放列表好得多，17 个视频拿到了 16 条转录稿。教训：永远准备备选数据源。

最终把 epub 内容和可用的视频转录稿合并，改写成 3 篇教程文章。每篇 3 个语言版本，一共 9 个文件。

设计

配色：深海军蓝主色（65%），冷灰辅助（25%），琥珀色强调（10%）。没用渐变，没用紫色——这两个是 AI 生成网站的标志性审美，刻意回避。

字体：标题用 Space Grotesk，几何感强但不冰冷。正文高可读性优先。没选 Roboto，辨识度太低。

布局不对称，sticky header 加了 backdrop blur。克制地用动效——一个精心设计的入场动画比满屏微交互有用得多。

发布工具链

内容写好了，还得发出去。装了两个 Claude Code skill：

• WeWrite：微信公众号排版和发布
• x-article-publisher：X 长文发布

这样从 Markdown 源文件到多平台发布，整个流程在一个工作环境里闭环。

回头看

整个项目从”拆本书”膨胀到”建站 + 内容生产 + 发布管道”，花的时间比预期多。但每一步都是有意的选择，不是失控。

几个数字：10 个章节提取、86 张图片转换、16/17 条转录稿成功获取、9 个教程文件产出、3 种语言覆盖。

这是第一篇 build log。站点本身就是最好的演示——你正在看的这个页面，就是用上面描述的整套工具链生成的。