用 Claude Chat 與 ChatGPT 進行初步發想
我先把自己的想法丟給 AI,讓它協助我收斂成一套可行的做法。
因為這是一個個人部落格,後續會持續新增與更新文章,所以我希望採用一種方便維護、也方便擴充的架站方式。
我參考了以下教學影片的做法:
最後我確定採用以下流程來完成網站架設:
AI 生成網站 → 本機測試 → GitHub 版控 → Vercel 部署 → 自訂網域綁定 → DNS 設定完成後正式上線
購買網域
市面上有很多網域商可以選擇,我最後選擇了 Gandi 來申請自己的專屬網域。
一年費用大約是 360 元台幣。
網站風格與 AI 生成程式碼
網站風格方面,我參考了以下設計網站。這個網站可以直接複製喜歡的風格 prompt,再依照自己的需求進一步調整:
為了配合科幻終端機風格的設計,中文字體我選用了像素風格的開源字體 俐方體 11 號。
整理好 prompt 之後,我使用 Claude Code CLI,直接在終端機環境中請 AI 產出網站程式碼。
整個產出過程大約只花了 10 分鐘。
程式碼產出後,我先在本機啟動專案進行測試:
- 進入專案資料夾
- 執行
npm install - 執行
npm run dev - 在瀏覽器中檢查網站版面與功能是否正常
確認網站風格與功能都沒有問題後,就可以進入下一步。
建立 GitHub Repository
接著,我先在自己的 GitHub 上建立 Repository,再透過 git push 將本機專案推送到 GitHub,方便後續進行版本控管。
Vercel 部署
將專案推上 GitHub 之後,就可以到 Vercel 建立新專案,並直接連結 GitHub Repository 進行部署。
完成部署後,再進一步設定自訂網域,並回到 Gandi 設定 DNS。等 DNS 設定生效後,整個網站就正式上線了。
為什麼我選擇 Astro 框架
我最後選擇 Astro,主要原因是它很適合用來架設以內容為主的個人部落格。
對我來說,後續會持續新增文章,因此「好維護」比「功能複雜」更重要。Astro 可以很方便地搭配 Markdown 來管理文章內容,我只需要持續新增 .md 檔案,就能快速更新網站,不需要每次都去修改很多前端程式碼。
除此之外,Astro 本身也很適合做靜態網站,整體速度快、架構清楚,部署到 Vercel 也相對直覺。對於想要長期經營部落格的人來說,是一個維護成本低、擴充性也不錯的選擇。