In Lesson 1 you published a website. But who actually writes the HTML? The answer is AI — and there are two very different ways it can help you. The difference becomes obvious the moment your site grows from one page to twenty.
第一課你把網站發佈出去了。但 HTML 到底是誰寫的?答案是 AI——而 AI 幫你的方式有兩種,差別很大。等你的網站從一頁變成二十頁,這個差別就會立刻浮現。
Picture a website with 20 pages and a menu of 4–5 buttons at the top of every page. That's the moment people freeze. One page is easy — the hard part is keeping all 20 in step:想像一個有 20 頁的網站,每一頁最上面都有一排 4~5 個按鈕的選單。很多人就是在這裡卡住。一頁很簡單——難的是讓 20 頁彼此一致:
How easily you handle all this depends a lot on which kind of AI you use. There are two.這一切處理起來輕不輕鬆,很大程度取決於你用的是哪一種 AI。共有兩種。
Both write good HTML. The difference is who manages the files — you, or the AI.兩種都能寫出好的 HTML。差別在於誰來管理檔案——是你,還是 AI。
You chat, it hands you code. e.g. Gemini, ChatGPT (free), Claude.ai chat.你聊天,它給你程式碼。例如 Gemini、ChatGPT(免費)、Claude.ai 對話。
The AI writes code inside the chat window. You copy it out, paste it into a file on your computer, and save. The AI never touches your files or GitHub — you do all of that yourself.AI 在對話視窗裡寫程式碼。你把它複製出來、貼進電腦裡的檔案、存檔。AI 不會碰你的檔案或 GitHub——這些都由你自己來。
You ask for each page, copy each one into its own .html file, and keep the menu identical across all 20 yourself. Then you upload everything to GitHub the Lesson 1 way.你一頁一頁地問,把每一頁分別複製到自己的 .html 檔,並自己讓 20 頁的選單保持一模一樣。然後用第一課的方法,把全部檔案上傳到 GitHub。
It works on your files directly. e.g. Claude Code, OpenAI Codex.它直接動你的檔案。例如 Claude Code、OpenAI Codex。
The AI works right on your computer (or workspace). It can create files and folders, edit many pages at once, and even make your GitHub repo and publish it for you.AI 直接在你的電腦(或工作區)裡運作。它能建立檔案和資料夾、一次編輯很多頁,甚至幫你建立 GitHub repo 並發佈。
You describe the site once. It builds all 20 pages with the same menu and one shared style — and can push them to GitHub. Want to change a button? One instruction updates all 20 pages.你只要描述一次。它就把 20 頁都建好,選單相同、共用同一套樣式——還能推上 GitHub。想改一個按鈕?一句話就同時更新 20 頁。
| Non-agent (e.g. Gemini)非代理人(例如 Gemini) | Agent (e.g. Claude Code)代理人(例如 Claude Code) | |
|---|---|---|
| Where the code appears程式碼出現在哪 | In the chat — you copy it out在對話裡——你自己複製出來 | Directly in your files直接寫進你的檔案 |
| Who creates the files誰建立檔案 | You, by hand你,手動 | The AIAI |
| 20 pages, same menu20 頁、相同選單 | You keep them matching你自己維持一致 | Done automatically自動完成 |
| Publishing to GitHub發佈到 GitHub | You upload (Lesson 1)你自己上傳(第一課) | The AI can publish itAI 可以幫你發佈 |
| Cost費用 | Usually free通常免費 | Often a paid plan常需付費方案 |
| Best for最適合 | Learning, small sites學習、小型網站 | Big or growing sites大型或會長大的網站 |
Whichever AI you use, these four habits keep a big site under control:不管你用哪一種 AI,這四個習慣都能讓大網站好管理:
styles.css. Every page links to it, so all 20 pages share one look. Change it once, and every page updates together.維持單一個 styles.css。每一頁都連到它,所以 20 頁共用同一個外觀。改一次,所有頁面一起更新。
index.html is always the home page. Use clear lowercase names like about.html, lessons.html. Link between pages using those file names.index.html 永遠是首頁。其他用清楚的小寫檔名,例如 about.html、lessons.html。頁面之間就用這些檔名互相連結。
.html files and styles.css live in one folder. That whole folder is exactly what goes to GitHub.你所有的 .html 檔和 styles.css 都放在同一個資料夾。整個資料夾就是要上 GitHub 的東西。
If you're starting out with free tools, Gemini (non-agent) is genuinely fine for a few pages — and a great way to learn. As your site grows toward 10–20 pages, or you get tired of keeping everything in sync by hand, an agent like Claude Code saves enormous time. Most teachers start with the chat way and move to an agent when the site gets bigger. There's no wrong choice.如果你剛起步、用的是免費工具,Gemini(非代理人)做幾頁是完全夠的——也是很好的學習方式。等你的網站長到 10~20 頁,或你受不了一頁頁手動同步時,像 Claude Code 這樣的代理人能省下大量時間。多數老師都是先用對話式,等網站變大再轉用代理人。沒有錯的選擇。