跟著做
30 分鐘做出你的個人網站
零基礎、不用寫程式、跟著步驟就能完成
做完你會有一個真的網站，可以分享給任何人
你會做出什麼？
30 分鐘
一個有你名字、自我介紹、經歷的個人網站
真的上線
有一個網址，可以傳給朋友、放在 LinkedIn
網站會包含
- 你的名字和一句話介紹
- 關於我（自我介紹、背景）
- 經歷或作品（工作、專案、興趣）
- 聯絡方式
Step 1：準備材料
先準備一個關於你的檔案，Claude 會根據它幫你做網站
履歷 / CV
PDF 或 Word 都行
LinkedIn 頁面
截圖或存成 PDF
隨便的筆記
簡單寫幾行自我介紹也行
有什麼就用什麼 — 不需要特別準備，丟給 Claude 它會幫你整理
Step 2：打開「黑色視窗」
Claude Code 在一個叫「終端機」的地方運作 — 就是一個打字的黑色視窗，不用怕
Mac
按 Cmd + 空白鍵
打字搜尋 Terminal
按 Enter 打開
Windows
按鍵盤的 Windows 鍵
打字搜尋 PowerShell
按 Enter 打開
打開後你會看到一個黑色（或白色）的視窗，有一個游標在閃。貼上以下文字，按 Enter：
# 在桌面建一個資料夾，然後進去（整段複製貼上）
mkdir ~/Desktop/my-website && cd ~/Desktop/my-website
這就是你以後跟 Claude Code 對話的地方 — 像聊天室一樣，只是用打字
Step 3：放入你的資料 + 啟動 Claude
把你的履歷/自介檔案放進資料夾
打開桌面，找到 my-website 資料夾，把檔案拖進去
回到黑色視窗，打字啟動 Claude Code
claude
畫面會變成 Claude 的對話模式 — 接下來你只要用中文跟它聊天就好
Step 4：第一句話 — 讓 Claude 認識你
你> 這個資料夾裡有我的履歷，請讀一下。
然後幫我做一個簡單好看的個人網站，
包含自我介紹、經歷、和聯絡方式。
做成一個 HTML 檔案就好。
Claude 會先讀你的檔案，了解你的背景，然後根據內容生成網站
沒有履歷？也可以直接打：
你> 幫我做一個個人網站。我叫[你的名字]，
我是[你的職業]，擅長[你的專長]。
請做成一個簡單好看的 HTML 檔案。
Step 5：打開你的網站！
Claude 會建立一個 index.html 檔案。打開它：
Claude> Done! I've created index.html with your info.
你> 幫我打開這個檔案
Claude> [opens index.html in your browser]
你的網站出現了！
還只在你電腦上，等一下會教你上線
從你的資料到一個完整網站 — 大概 1-2 分鐘。這就是 Claude Code 的威力
Step 6：客製化 — 用你的話調整
不滿意？直接用中文說你想改什麼
你> 顏色太亮了，換成深色背景
Claude> [改成深色主題]
你> 字體太小，而且我想要更有設計感
Claude> [調整字體大小 + 加入設計元素]
你> 自我介紹那段太正式了，改得輕鬆一點
Claude> [改寫語氣]
你可以說的
- 「加一張我的照片」
- 「排版像 Apple 官網那種感覺」
- 「加一個作品集的區塊」
也可以很主觀
- 「感覺怪怪的」
- 「太無聊了」
- 「可以更酷嗎？」
Step 7：加更多內容
基本的做好了？來加更多區塊
作品集
你> 加一個作品集區塊，放 3-4 個
我做過的專案，有圖片和說明
推薦語
你> 加一個推薦語區塊，我先放
兩段同事對我的評價
時間軸
你> 把我的經歷做成時間軸，
從最近的排到最早的
部落格
你> 加一個 blog 頁面，我想寫
一些學習筆記
一次加一個區塊，確認滿意再加下一個
Step 8：確認手機上也好看
你> 確認一下手機上看起來也正常，
不要跑版或字太小
怎麼在電腦上模擬手機畫面？
在瀏覽器打開你的網站
就是那個 index.html
按 F12（或 Cmd+Option+I）
會打開「開發者工具」— 不用怕，只是看看
點左上角的「手機圖示」
畫面會變成手機大小，看看有沒有跑版
跑版了？截圖丟給 Claude，它會幫你修
Step 9：把程式碼放上 GitHub
上線之前，先把你的網站程式碼存到 GitHub（免費的程式碼倉庫）
你> 幫我把這個專案上傳到 GitHub，
建一個新的 repo 叫 my-website
Claude> 好的，我來幫你：
[初始化 git、建立 repo、上傳程式碼]
Done! 你的程式碼在：
github.com/你的帳號/my-website
github.com 免費註冊一個
Step 10：上線！讓全世界看到
用 Vercel（免費）把你的網站放上網路
註冊 Vercel
到 vercel.com，用你的 GitHub 帳號登入（免費）
新增專案
點 Add New... → Project
選擇你的 GitHub repo
在列表中找到 my-website，點右邊的 Import
按 Deploy！
其他設定不用改，直接點 Deploy 按鈕。等大約 30 秒...
以後更新網站？改完檔案 push 到 GitHub，Vercel 會自動重新部署
你的網站上線了！
你的網址
https://my-website-xxx.vercel.app
任何人都可以打開這個網址看到你的網站
放在 LinkedIn
個人網站欄位貼上你的網址
傳給朋友
「看，我自己做的網站！」
放在履歷上
讓面試官留下深刻印象
以後要更新？改完檔案，push 到 GitHub，Vercel 會自動更新
想要自己的網域名稱？
選擇性的進階步驟 — 讓網址更專業
買一個網域
推薦用 Namecheap 或 Cloudflare，一年大約 $10-15 美金
在 Vercel 設定
到 Vercel dashboard → Settings → Domains → 加入你的網域
做完了，接下來呢？
你已經證明自己可以做出一個網站。接下來可以試試...
加部落格功能
「幫我加一個部落格頁面，可以寫文章」
做攝影作品集
「幫我做一個照片 gallery，可以點開放大」
自動整理資料
「幫我寫一個 script，每天把 Excel 資料整理好」
做給別人
「幫我朋友的咖啡店做一個簡單的網頁」
你已經學會最重要的技能：用自然語言讓 AI 幫你做事。接下來什麼都能做
30 分鐘前你什麼都沒有。
現在你有一個全世界都能看到的網站。
行程式碼（你寫的）
花費時間
全新的網站
跟著做：30 分鐘做出你的個人網站 — 完
Use arrow keys to navigate