打造你的免費個人網站 Build Your Free Personal Website
使用 GitHub Pages，完全免費、無需伺服器、無需任何程式經驗。 Using GitHub Pages: Completely free, no server needed, no coding experience required.
1 準備工作 Preparation
註冊 GitHub Sign Up for GitHub
- 前往 GitHub 官網，點擊 "Sign up"。 Go to GitHub website and click "Sign up".
- 輸入 Email、密碼與使用者名稱 (Username)。 Enter Email, password, and Username.
- 注意：使用者名稱會出現在網址中 ([https://你的帳號.github.io](https://你的帳號.github.io))。 Note: Your username becomes your URL ([https://username.github.io](https://username.github.io)).
建立網頁檔案 Create Web File
在電腦建立一個純文字檔，命名為 index.html (副檔名必須是 .html)。貼上以下代碼：
Create a text file on your PC named index.html (extension must be .html). Paste this code:
<!DOCTYPE html> <html> <head> <title>My First Website</title> </head> <body> <h1>Welcome to my website</h1> <p>Hello, World!</p> </body> </html>2 建立雲端倉庫 (Repository) Create Cloud Repository
Repository (簡稱 Repo) 就像是 GitHub 上的一個「專案資料夾」。 A Repository (Repo) is like a "project folder" on GitHub.
-
點擊右上角的
+號 -> New repository。 Click the+icon top-right -> New repository. -
Repository name: 輸入
my-website或任何英文名稱。 Repository name: Entermy-websiteor any English name. - Visibility: 務必選擇 Public (公開)，這樣 GitHub Pages 才能運作。 Visibility: Must select Public so GitHub Pages works.
3 上傳網頁檔案 Upload Web Files
- 建立 Repo 後，點擊 "uploading an existing file" 連結。 After creating the Repo, click the "uploading an existing file" link.
-
將你的
index.html拖曳到灰色區域。 Drag and drop yourindex.htmlinto the gray area. -
捲動到下方 "Commit changes" 區塊，直接點擊綠色按鈕。
Scroll down to "Commit changes" and click the green button.
"Commit" 就是「存檔」的意思。 "Commit" simply means "Save".
4 設定並發布 Settings & Deploy
這是把「檔案」變成「網站」的關鍵步驟。前往 Repo 的 Settings (設定) > 左側選單 Pages。 This is key to turning files into a website. Go to Repo Settings > Side menu Pages.
| 設定項目 Setting Item | 選擇值 Value to Select |
|---|---|
| Source | Deploy from a branch |
| Branch | main |
| Folder | / (root) |
| Action | 點擊 Save 按鈕Click Save |
5 見證奇蹟 Witness the Miracle
等待約 1-2 分鐘，然後重新整理頁面 (F5)。 Wait about 1-2 minutes, then refresh the page (F5).
除錯指南 (Debug) Troubleshooting Guide
- A: 等待時間不夠，請再等幾分鐘並重新整理。Wait time insufficient. Wait a few mins and refresh.
- B: 檔名錯誤。必須是
index.html(全小寫)。Wrong filename. Must beindex.html(all lowercase). - C: 檔案位置錯誤。必須在最外層 (Root)，不能在資料夾內。Wrong location. Must be in Root, not a subfolder.
Ctrl + F5 強制重新整理，或使用無痕模式。
Browser Cache issue. Press Ctrl + F5 to force refresh or use Incognito mode.
Photo.jpg 和 photo.jpg 是不同的)。
Verify image is uploaded to Repo. Check case sensitivity (Photo.jpg != photo.jpg).