從零搭建個人品牌站

起因

事情是這樣的：我手裡有一本期權交易的 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。站點本身就是最好的展示——你正在看的這個頁面，就是用上面描述的整套工具鏈生成的。