用 AI 免費架出你的第一個個人網頁 — 零基礎保母級教學
這篇教學的前提
上一篇我們講了為什麼沒有個人網頁等於不存在。
這篇教你怎麼做。
你需要的東西：
- 一台能上網的裝置（手機或電腦都行）
- 一個瀏覽器
- Claude 免費帳號（claude.ai）
- 大約 1-2 小時的時間
你不需要的東西：
- 不需要會寫程式
- 不需要裝任何軟體
- 不需要花錢（網域除外，但也可以先不買）
全程在瀏覽器完成。開始吧。
第零步：先想清楚三件事
在開任何帳號之前，先回答這三個問題。拿紙筆寫下來，等一下要用。
1. 你是誰？（一句話）
不是你的人生故事。是一句話。
好的範例：
- 「自由接案的品牌設計師，專注餐飲業」
- 「全端工程師，擅長 AI 自動化和 SaaS 開發」
- 「財務顧問，幫 30-40 歲的人做退休規劃」
- 「插畫家，畫可愛動物風格的商業插畫」
不好的範例：
- 「熱愛生活的斜槓青年」（AI 讀不懂你到底做什麼）
- 「什麼都會一點的人」（等於什麼都不會）
2. 你做什麼？（列 3-5 項）
具體的服務或作品。不是形容詞，是名詞。
好的範例：
- Logo 設計（NT$5,000 起）
- 品牌識別系統（NT$15,000 起）
- 社群視覺設計（月訂 NT$3,000）
不好的範例：
- 提供優質的設計服務（講了等於沒講）
3. 怎麼聯繫你？
至少一個 email。有其他的更好：
- Email（必備）
- Instagram / Threads / LinkedIn（選你最活躍的）
- LINE（如果你的客戶習慣用）
把這三個答案寫好，下面每一步都會用到。
第一步：開帳號（15 分鐘）
你需要開三個帳號。全部免費。
1-1. GitHub 帳號
GitHub 是存放你網頁程式碼的地方。
- 打開 github.com
- 點 Sign up
- 輸入 email、密碼、使用者名稱
- 使用者名稱很重要 — 它會變成你的免費網址的一部分（例如
你的名字.vercel.app） - 選免費方案就好
1-2. Vercel 帳號
Vercel 是把你的網頁放到網路上的服務。
- 打開 vercel.com
- 點 Sign Up
- 選 Continue with GitHub — 用你剛開的 GitHub 帳號登入
- 選 Hobby（免費）方案
1-3. Claude 帳號
Claude 是幫你寫程式碼的 AI。
- 打開 claude.ai
- 註冊帳號（Google 登入最快）
- 免費版就夠用
三個帳號開好了？繼續。
第二步：在 GitHub 建立你的網站倉庫（5 分鐘）
「倉庫」（Repository）就是存放網站檔案的資料夾。
- 登入 GitHub
- 點右上角的 + → New repository
- Repository name 填：
my-website（或任何你喜歡的名字） - 選 Public
- 勾選 Add a README file
- 點 Create repository
好了。你現在有一個空的網站倉庫。
第三步：告訴 Claude 你要什麼（這是最重要的一步）
打開 claude.ai，開一個新對話。
第一個 Prompt — 告訴 Claude 你是誰
把下面的模板複製過去，把 [...] 的部分換成你自己的資訊：
我想架一個個人網頁。請幫我生成一個完整的 index.html 檔案。
關於我：
- 名字：[你的名字]
- 身份：[你的一句話介紹，例如：自由接案的品牌設計師，專注餐飲業]
- 服務項目：
1. [服務 1，例如：Logo 設計（NT$5,000 起）]
2. [服務 2，例如：品牌識別系統（NT$15,000 起）]
3. [服務 3，例如：社群視覺設計（月訂 NT$3,000）]
- 作品連結（如果有的話）：
1. [作品名稱 + 連結]
2. [作品名稱 + 連結]
- 聯繫方式：
- Email: [你的 email]
- Instagram: [你的 IG，如果有]
- LinkedIn: [你的 LinkedIn，如果有]
設計要求：
- 單頁式網站（one page）
- 深色背景（#0A0515），白色文字
- 簡潔、資訊密度高、專業感
- 手機要能正常顯示（RWD）
- 不要用任何外部 CSS 框架，純 HTML + 內嵌 CSS
無障礙要求（讓所有人都能使用你的網頁，包括視障者）：
- 使用語意化 HTML 標籤（nav, main, article, section, header, footer）
- 所有圖片加上描述性的 alt 屬性
- 互動元素（連結、按鈕）可用鍵盤 Tab 操作
- 文字與背景的色彩對比度符合 WCAG AA 標準（至少 4.5:1）
- 導覽區加上 aria-label
技術要求（很重要，請全部加上）：
- 完整的 <head> 區塊，包含：
- <title> 和 <meta description>
- Open Graph tags（og:title, og:description, og:image）
- Twitter Card tags
- JSON-LD schema（Person 或 ProfessionalService 類型）
- viewport meta tag
- canonical URL 先用 # 佔位
- robots.txt 的內容（另外給我，允許所有 AI 爬蟲）
- llms.txt 的內容（另外給我，用英文寫，介紹我是誰、做什麼）
請一次給我三個檔案的完整內容：
1. index.html
2. robots.txt
3. llms.txt
Claude 會回覆你三個檔案
它會給你完整的程式碼。你不需要看懂每一行。但你需要檢查幾個重點：
檢查清單：
□ 你的名字有沒有拼對
□ 你的服務項目有沒有列完
□ Email 和社群連結對不對
□ 在瀏覽器看起來順不順眼（等一下教你怎麼預覽）
第四步：微調風格（可選但建議做）
如果 Claude 第一次給的設計你不滿意，不要重新來。在同一個對話裡繼續調整。
調整顏色
背景太暗了，換成深藍色（#0F172A）。
主要強調色換成亮橘色（#FF6B35）。
調整版面
服務項目那區改成兩欄排列（桌面版），手機版維持單欄。
調整字體
標題用 Google Fonts 的 Noto Sans TC，內文用系統預設字體就好。
描述你想要的風格（如果你不知道具體參數）
這是很多人卡住的地方：「我不知道怎麼描述我要的風格。」
直接用感覺描述就好：
好的描述方式：
- 「我想要像 Apple 官網那種極簡風格，很多留白」
- 「我想要有科技感，像是電影裡的控制台介面」
- 「我想要溫暖一點，適合餐飲業的感覺，米色系」
- 「我想要像個人名片，乾淨俐落，三秒看完重點」
也可以直接貼參考網站：
- 「我喜歡這個網站的風格：[URL]，幫我做類似的」
不好的描述方式：
- 「幫我做好看一點」（什麼是好看？）
- 「隨便」（Claude 會真的隨便）
每次調整後都確認一下
確認：把修改後的完整 index.html 重新給我，不要只給修改的部分。
這很重要。讓 Claude 每次都給你完整檔案，不要給片段，你才不會拼錯。
第五步：把檔案放到 GitHub（10 分鐘）
現在你手上有三個檔案的內容。把它們放到 GitHub 上。
5-1. 建立 index.html
- 打開你的 GitHub 倉庫頁面（
github.com/你的帳號/my-website） - 點 Add file → Create new file
- 檔名輸入：
index.html - 把 Claude 給你的 index.html 內容，全部複製貼上到編輯區
- 滾到最下面，點 Commit changes
5-2. 建立 robots.txt
重複一樣的步驟：
- 回到倉庫首頁
- Add file → Create new file
- 檔名：
robots.txt - 貼上內容
- Commit changes
5-3. 建立 llms.txt
一樣：
- Add file → Create new file
- 檔名：
llms.txt - 貼上內容
- Commit changes
現在你的 GitHub 倉庫裡有三個檔案了。
第六步：用 Vercel 上線（5 分鐘）
這是最神奇的一步。
- 打開 vercel.com，登入
- 點 Add New → Project
- 它會列出你的 GitHub 倉庫 — 找到
my-website，點 Import - 所有設定都不用改，直接點 Deploy
- 等 30 秒
你的網站上線了。
Vercel 會給你一個網址，像是 my-website-xxx.vercel.app。
打開它。那就是你的個人網頁。全世界都看得到。
第七步：確認 AI 讀得懂你（5 分鐘）
網站上線後，做這幾個檢查：
檢查 OG 預覽
把你的網址貼到 Line、Discord、或任何聊天軟體裡。它應該會顯示：
- 你的標題
- 你的描述
- 預覽圖（如果有設的話）
如果沒有顯示，回 Claude 說：「OG tags 好像沒生效，幫我檢查 index.html 的 og:title, og:description, og:image 是不是都有寫對。」
檢查 robots.txt
在瀏覽器打開 你的網址/robots.txt。應該要看到允許 AI 爬蟲的規則。
檢查 llms.txt
在瀏覽器打開 你的網址/llms.txt。應該要看到你的英文自我介紹。
檢查 JSON-LD
在瀏覽器打開你的網址，按 Ctrl+U（或右鍵 → 檢視原始碼）。搜尋 application/ld+json。應該要找到你的結構化資料。
第八步：自訂網域（選做，NT$300-500/年）
免費的 xxx.vercel.app 可以先用。但如果你想要自己的網域：
- 去 Namecheap 或 Cloudflare 買一個網域
.com大約 NT$300-500/年，.tw大約 NT$800/年- 在 Vercel 的專案設定 → Domains → 加入你的網域
- 按照 Vercel 的指示設定 DNS
設定完之後，記得回 Claude 說：
我的網域是 [你的網域]。
請幫我更新 index.html 裡的 canonical URL、og:url、和所有絕對路徑。
同時更新 llms.txt 裡的網址。
第九步：之後怎麼更新？
以後要改內容，流程超簡單：
- 打開 Claude，在同一個對話裡說：「幫我更新 XXX」
- Claude 給你新的完整 index.html
- 去 GitHub 打開 index.html → 點筆（Edit）→ 全選刪掉 → 貼上新的 → Commit
- Vercel 自動重新部署（30 秒內生效）
就這樣。每次更新都是這四步。
常見問題
「Claude 免費版額度夠嗎？」
夠。整個流程大約需要 5-15 次對話。Claude 免費版每天的額度絕對夠用。如果一天用完了，明天繼續就好。
「我對 Claude 生成的設計不滿意怎麼辦？」
繼續在同一個對話裡調整。越具體越好：
✅ 「標題字太小了，改成 48px」
✅ 「服務區塊的間距太擠，每個項目之間加 24px」
✅ 「我想要像 [某個網站] 那樣的卡片式排版」
❌ 「再好看一點」（Claude 不知道你覺得什麼是好看）
「我要怎麼加圖片？」
- 把圖片上傳到 GitHub 倉庫（Add file → Upload files）
- 上傳後，點圖片 → 複製圖片的 URL
- 跟 Claude 說：「幫我在 [某個位置] 加一張圖片，URL 是 [貼上]」
「手機看起來跑版怎麼辦？」
跟 Claude 說：「手機版 [某個區塊] 跑版了，文字溢出螢幕。幫我修。」附上截圖更好。
「我想加更多頁面（作品集頁、關於頁）怎麼辦？」
先不要。一個頁面就夠了。等你確定需要更多頁面的時候再來，那時候可以考慮升級到更完整的框架。
完成後你得到了什麼？
✅ 一個你擁有的網址（vercel.app 免費 / 自訂網域 NT$300-500/年）
✅ 一句話說清楚你是誰、做什麼
✅ 你的作品 / 服務列表（附連結）
✅ 聯繫方式
✅ llms.txt — 給 AI 看的自我介紹
✅ JSON-LD schema — 結構化的你
✅ robots.txt — 允許 AI 爬蟲
✅ OG tags — 分享時有預覽圖和描述
✅ 無障礙友善 — 視障者的螢幕閱讀器也能讀懂你的網頁
全部達標。花費 $0。時間 1-2 小時。
你在 AI 的世界裡，從不存在變成了存在。
下一步
如果你想更進一步：
- 用 UltraProbe 掃描你的網站 — ultralab.tw/probe 的 SEO 和 AEO 掃描可以告訴你還有哪些可以優化的地方，免費
- 加入 Discord 社群 — 有問題可以問，有人一起做 → discord.gg/ewS4rWXvWk
- 持續更新內容 — 網頁不是做完就好。定期更新作品、調整服務項目，讓 AI 搜尋引擎知道你還活著
來自 Ultra Lab — 一人公司實驗室 Discord: 加入社群