跟 AI 把一個空網站，從零長出來（建站篇 3/9）
有一個畫面，我到現在還記得：第一次貼上一行指令、按下 Enter，瀏覽器裡跳出我自己的網站——站名、文章、版面全都在，而我一行程式都沒寫。那一刻「我這種不會寫程式的人真的可以」不再是雞湯，是我電腦裡一個活生生的東西。
這一篇，就是帶你走到那個畫面。料備齊了（沒備的話，先回上一篇），我們動手——而且你會在這一篇，第一次看到自己的網站在你電腦上活起來。
你不會寫任何程式。你從頭到尾做的事，就是「用白話告訴 AI 你要什麼」，然後看它一塊一塊把站蓋出來。這是整個建站篇最核心、最「跟著做」的一篇，所以我會把每一句關鍵的話、和「為什麼這樣說」，都攤給你看——因為會不會下指令，決定了你蓋出來的是工寮還是宮殿。
怎麼叫 AI 把網站的骨架蓋起來？
直接給結論：打開 Claude Code，第一句話就一次把核心需求講齊，讓它把整個地基打好。
你可以這樣對 AI 說： 「幫我用 Astro 建一個繁體中文的部落格骨架，要有：SEO 用的 head、sitemap、RSS、一篇範例文章。先讓它能在我電腦上跑起來，我們再慢慢調。」
為什麼這樣說：兩個關鍵。① 一次把核心需求講齊（SEO、sitemap、RSS）——這些東西之後才補很麻煩，一開始一起講最省事。② 「先讓它能跑起來，再慢慢調」是在設階段目標：先求有、再求好。新手最容易卡在「想一次到位」，結果一步都跨不出去。 接下來會發生：它會建立一堆檔案、裝好需要的東西，然後告訴你幾個指令。你只要照它說的，把指令貼進終端機、按 Enter。看不懂那些檔案？完全沒關係——你是主人，不是工人。
💡 完全新手看這裡 骨架＝一個已經有基本結構、但還沒填內容的空網站。就像建商先把房子的牆和水電做好，你再進去裝潢。 專案資料夾＝AI 會把這個網站的所有檔案，集中放在你電腦的一個資料夾裡。那個資料夾，就是你的整個網站。
第二步：把它變成「你的」站
骨架是通用的。接下來用一句話，把它變成你的。
你可以這樣對 AI 說： 「把網站名稱改成『（你的站名）』、首頁描述改成『（一句話介紹你）』，網站語言鎖成繁體中文（
zh-Hant）。」為什麼這樣說：「語言鎖成繁體中文」這件事，新手九成會漏，但它很重要——它等於在網站上掛一塊牌子告訴 Google 和瀏覽器「我是繁中網站」，搜尋結果和顯示才會對。那些看不見、但很關鍵的設定，你要主動講出來，AI 才會幫你弄對；它不會通靈。 接下來會發生：它改幾個設定檔，你的站名、描述、語言就都對了。
第三步：寫下你的第一篇文章
網站的本體是文章，而文章就是一個個純文字檔（還記得上一篇說的 markdown 嗎）。每篇文章最上面，會有一小塊「資訊欄」，叫 frontmatter。
你可以這樣對 AI 說： 「幫我建一篇新文章。先給我一個 frontmatter 範本，每個欄位都註解它是做什麼的，我照著填。」
它會給你一個像這樣、可以直接複製的範本：
---
title: '你的文章標題'
description: '一句話描述。會出現在 Google 搜尋結果和社群分享的預覽'
pubDate: '2026-06-01'
tags: ['關鍵字一', '關鍵字二']
---
（這條線以下，開始用 markdown 寫正文：
# 是大標題、## 是小標題、**字** 是粗體，就這麼簡單）💡 完全新手看這裡 frontmatter＝文章開頭、用兩條
---框起來的那塊資訊（標題、日期、標籤）。它不會顯示在文章內文裡，是「寫給網站和 Google 看的」資料。 markdown＝最簡單的排版法：井字號#當標題、星號**當粗體。你不用學 HTML，這幾個符號就夠寫一輩子。
填好標題、貼上你的內文，第一篇文章就完成了。它現在躺在你的專案資料夾裡，等著被看見。
魔法時刻：讓網站在你電腦上活起來
這是我最想讓你親眼看到的一刻。
你可以這樣對 AI 說： 「怎麼在我自己電腦上預覽這個網站？給我指令。」
它會給你一行指令：npm run dev。把它貼進終端機、按 Enter，畫面會吐出一個網址：http://localhost:4321。
打開瀏覽器，貼上去——
你的網站，就在你眼前活了起來。 站名、第一篇文章、版面，全都在。它還沒上線、只有你看得到，但它是真的，是你的，而且是你剛剛用幾句話蓋出來的。
我永遠記得第一次看到那個畫面的感覺：原來「我這種不會寫程式的人，真的可以」這句話，不是雞湯，是真的。那一刻，自架網站從一個遙遠的技術名詞，變成你電腦裡一個活生生、會回應你的東西。
💡 完全新手看這裡
npm run dev＝「在我自己電腦上，把網站跑起來預覽」的指令。 localhost＝你電腦自己的網址，只有你看得到。它是你的試衣間——隨便改、隨便看，全世界都還看不到，等你滿意了才推出去。改了東西想看效果，回到這個網址重整就好。
把它調成你喜歡的樣子（順便學一個重要的下指令心法）
預設版面通常偏大、偏花。這時候，請忍住「自己當設計師逐項微調」的衝動——那是工人的活。你要做的是給方向。
你可以這樣對 AI 說： 「我要簡潔感：把字級整體縮小、全站改成置左對齊、拿掉花俏的東西。改完，幫我做一次手機版的閱讀測試，截圖給我看。」
為什麼這樣說：注意我給的是「方向」（簡潔、置左、小字），不是「把標題改成 24px、行高調 1.6」這種逐項指令。給方向、讓 AI 提案，你看著結果再微調——這比你自己當像素設計師快太多，也輕鬆太多。最後那句「手機版測試」千萬別省：現在一大半的讀者用手機看，桌機好看、手機爆版，等於白做。 接下來會發生：它調完，給你電腦版和手機版的樣子。不滿意就繼續用「感覺」跟它講——「標題再小一點」「段落間距再鬆一點」——它一輪一輪幫你逼近。
改完前後大概是這樣的差別：
| 改之前（預設） | 改之後（你要的簡潔） |
|---|---|
| 標題巨大、置中、塞滿裝飾 | 字級收斂、全站置左、乾淨留白 |
| 桌機好看、手機沒測過 | 手機上一樣好讀（測過了） |
💡 完全新手看這裡 你完全不需要懂 CSS（網頁的化妝術）。你只要會「形容你要的感覺」，AI 負責把感覺翻譯成 CSS。形容詞，就是你的設計語言。
你現在手上有什麼了？
盤點一下，你剛剛用幾段對話，蓋出了一個：
- 繁體中文、語言設定正確的部落格
- 內建 SEO、sitemap、RSS（之後被 Google 找到的底子）
- 版面乾淨、字級舒服、手機上也好讀
- 已經有第一篇文章
只差一件事：它還住在你電腦裡，只有你看得到。
下一篇，我們就把它推上網路、綁上你自己的網域，讓全世界打開那個網址，都看得到你蓋的這座宮殿。
常見問題 FAQ
Q：我看不懂 AI 建出來的那一堆檔案，正常嗎？ A：完全正常，而且你不需要懂。你是主人、AI 是工人——你只要會「描述你要什麼」和「看預覽對不對」。那些檔案的細節，交給 AI 管。真正要學的是怎麼下指令，不是讀懂程式。
Q：npm run dev 跑出來的網站，別人看得到嗎？
A：看不到。localhost 是只有你自己電腦看得到的「試衣間」，隨便改、隨便看都安全。要全世界看得到，得等下一篇把它推上網路。
Q：版面我不會調 CSS，怎麼辦？ A：不用會。你只要「形容你要的感覺」（簡潔、置左、字小一點），AI 負責翻譯成 CSS。形容詞就是你的設計語言——給方向、看提案、再微調，比自己當像素設計師快太多。
Q：一定要一次把網站做到完美才能繼續嗎？ A：不要。「先求有、再求好」是這篇最重要的心法。先讓網站能在電腦上跑起來，版面之後隨時能調。新手最容易卡在「想一次到位」，結果一步都跨不出去。
下一篇：把站推上網路 ＋ 綁上你自己的網域（建站篇 4/9）。
← 回上一篇：白話技術選型 ＋ 開工前準備清單