零成本架站教學:如何用 GitHub Pages 輕鬆建立你的專屬網頁

Josh-avatar-img
發佈於學習
更新 發佈閱讀 4 分鐘
vocus|新世代的創作平台

無論你是想建立個人履歷、作品集,還是測試剛寫好的小專案,在 GitHub 上建立網頁最簡單且完全免費的方式就是使用 GitHub Pages。這項強大的功能可以讓你將存儲庫(Repository)中的程式碼直接轉化為公開的網站。

跟著以下的快速上手指南,只要三個步驟,你的第一個網頁就能順利上線!

🚀 步驟一:建立存儲庫 (Repository)

要建立網站,我們首先需要一個存放網站檔案的空間。

  1. 登入你的 GitHub 帳號,點擊右上角的 「+」,選擇 New repository(新增存儲庫)。
  2. 設定 Repository name(存儲庫名稱)
    • 如果你希望未來的網址是個人專屬的 帳號名稱.github.io,請務必將名稱設定為 你的帳號名稱.github.io(例如:你的帳號是 myname,就輸入 myname.github.io)。
    • 如果這只是一個特定專案的展示,名稱可以隨意設定(網址將會變成 帳號名稱.github.io/專案名稱)。
  3. 將可見度設定為 Public (公開),否則 GitHub Pages 無法免費使用。
  4. 勾選 Add a README file(這能幫助你初始化存儲庫),最後點擊 Create repository

📄 步驟二:上傳網頁檔案

有了空間後,接著要把網頁內容放進去。

  1. 在剛建好的存儲庫頁面中,點擊上方的 Add file,然後選擇 Create new file(建立新檔案)。
  2. 在檔名欄位輸入 index.html(請注意,網站的首頁一定要叫這個名字,系統才抓得到)。
  3. 在下方的編輯大框框中,輸入簡單的 HTML 測試內容,例如:
<h1>哈囉!這是我的 GitHub 網頁</h1>
<p>我的第一個網站成功上線了!</p>
  1. 滑到頁面最下方,點擊綠色的 Commit changes 按鈕來儲存檔案。

🌐 步驟三:啟動 GitHub Pages

檔案準備好後,最後一步就是把網站的「開關」打開。

  1. 進入該存儲庫,點擊頂部選單的 Settings (設定)。
  2. 在左側選單往下找,點選 Pages
  3. 在畫面中間的 Build and deployment 區塊下,找到 Branch(分支)的設定。將原本的 None 點開,改成 main,然後點擊旁邊的 Save 儲存。

✨ 成果驗收與進階玩法

設定完成後,請稍等約 1 到 3 分鐘。重新整理 Pages 的設定頁面,你會在頂部看到一行提示:

Your site is live at https://你的帳號.github.io/...

點擊那個連結,恭喜你,你的網頁已經正式發佈到全世界了!

💡 給新手的進階建議:

  • 本機端開發更方便:當你的網頁檔案變多(加入 CSS 或 JavaScript 檔案),建議下載 GitHub Desktop 或是直接在 VS Code 等編輯器中透過 Git 指令來推送檔案,效率會高很多。
  • 未來擴充性:當你熟悉了基本操作後,未來甚至可以在 Pages 設定中綁定專屬的個人網域,或是為網站加上 Google Analytics 來追蹤網站流量。如果你後續打算使用 React 或 Vite 等框架開發更複雜的網站,GitHub Pages 也能完美配合進行自動化部署。
留言
avatar-img
Josh的沙龍
15會員
119內容數
分享知識
Josh的沙龍的其他內容
2026/02/23
想掌握網站訪客動向?本文為你拆解最新 GA4 安裝流程。從建立資源、取得評估 ID,到寫入網頁原始碼完成埋碼,只需三個簡單步驟,就能帶你輕鬆開啟數據監測,精準掌握網站的流量密碼。
Thumbnail
2026/02/23
想掌握網站訪客動向?本文為你拆解最新 GA4 安裝流程。從建立資源、取得評估 ID,到寫入網頁原始碼完成埋碼,只需三個簡單步驟,就能帶你輕鬆開啟數據監測,精準掌握網站的流量密碼。
Thumbnail
2026/02/23
開發完 Chrome 擴充功能不知如何發布?本文完整解析 Chrome Web Store 上架流程,從 Manifest V3 規範、開發者帳號註冊、商店資訊設定到送審地雷,助你順利讓作品上線!
Thumbnail
2026/02/23
開發完 Chrome 擴充功能不知如何發布?本文完整解析 Chrome Web Store 上架流程,從 Manifest V3 規範、開發者帳號註冊、商店資訊設定到送審地雷,助你順利讓作品上線!
Thumbnail
2026/01/09
本文深入解析 Vercel 雲端平台核心功能,涵蓋自動化 CI/CD、全球 Edge 加速、AI SDK 與 Serverless 資料庫。帶你了解它如何實現零配置高效開發,成為現代前端工程師的首選神兵利器。
Thumbnail
2026/01/09
本文深入解析 Vercel 雲端平台核心功能,涵蓋自動化 CI/CD、全球 Edge 加速、AI SDK 與 Serverless 資料庫。帶你了解它如何實現零配置高效開發,成為現代前端工程師的首選神兵利器。
Thumbnail
看更多
你可能也想看
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
相信替影片配字幕是許多人心中的痛,本文帶你在三分鐘內能夠用你的電腦,實做聲音轉字幕網站,準備好了就來吧!
Thumbnail
相信替影片配字幕是許多人心中的痛,本文帶你在三分鐘內能夠用你的電腦,實做聲音轉字幕網站,準備好了就來吧!
Thumbnail
這篇文章提供新手一個零摩擦的學習寫程式的入門方法,使用GitHub Codespaces線上編輯器,無需設定複雜的本地開發環境,即可快速編寫和執行第一個程式碼。文章詳細介紹了Codespaces的使用方法、介面功能,以及如何編寫和執行一個簡單的 "Hello World!" 程式。
Thumbnail
這篇文章提供新手一個零摩擦的學習寫程式的入門方法,使用GitHub Codespaces線上編輯器,無需設定複雜的本地開發環境,即可快速編寫和執行第一個程式碼。文章詳細介紹了Codespaces的使用方法、介面功能,以及如何編寫和執行一個簡單的 "Hello World!" 程式。
Thumbnail
當你做好你的網站後,教大家把你的網站部署到雲端伺服器Vercel
Thumbnail
當你做好你的網站後,教大家把你的網站部署到雲端伺服器Vercel
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
學會如何利用 GitHub Pages 快速建置你的個人網站!此教學涵蓋檔案命名、可支援檔案類型、設定步驟、常見問題,以及免費架站的優勢,讓你在幾分鐘內擁有自己的網頁作品集或小型專案展示平臺。
Thumbnail
學會如何利用 GitHub Pages 快速建置你的個人網站!此教學涵蓋檔案命名、可支援檔案類型、設定步驟、常見問題,以及免費架站的優勢,讓你在幾分鐘內擁有自己的網頁作品集或小型專案展示平臺。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
對於前端工程師來說github上的gh-page是一個很適合放置自己作品的地方 尤其適合想要練練手感的時候可以方便地展示成果的地方 在過去使用手動commit至gh-page的分支上,或是使用deploy.sh檔來部署,對於我這種懶人來說都是多一個步驟,時常會覺得麻煩 現在能夠透過github ac
Thumbnail
對於前端工程師來說github上的gh-page是一個很適合放置自己作品的地方 尤其適合想要練練手感的時候可以方便地展示成果的地方 在過去使用手動commit至gh-page的分支上,或是使用deploy.sh檔來部署,對於我這種懶人來說都是多一個步驟,時常會覺得麻煩 現在能夠透過github ac
Thumbnail
怎麼會突然想架站呢? 其實是想找個地方放自己的「個人簡介與資料」,以前唸博士班時,系上都會給我們每個人一個空間,只要把網頁放到那個空間去,就可以在網路上查到我們個人的網頁。網站托管的伺服器 (虛擬主機) 也要錢,所以當我看到免費的 GitHub Pages 可以當「網頁伺服器」使用時,就選定它了。
Thumbnail
怎麼會突然想架站呢? 其實是想找個地方放自己的「個人簡介與資料」,以前唸博士班時,系上都會給我們每個人一個空間,只要把網頁放到那個空間去,就可以在網路上查到我們個人的網頁。網站托管的伺服器 (虛擬主機) 也要錢,所以當我看到免費的 GitHub Pages 可以當「網頁伺服器」使用時,就選定它了。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文介紹如何結合 Git 版本控制、GitHub 備份和 Cloudflare Pages 部署,建立一個高效、安全且成本效益的現代化網站開發工作流程,適合個人專案、作品集和部落格。詳細說明 GitHub 儲存庫建立和 Cloudflare Pages 部署步驟,並說明免費方案的限制。
Thumbnail
本文介紹如何結合 Git 版本控制、GitHub 備份和 Cloudflare Pages 部署,建立一個高效、安全且成本效益的現代化網站開發工作流程,適合個人專案、作品集和部落格。詳細說明 GitHub 儲存庫建立和 Cloudflare Pages 部署步驟,並說明免費方案的限制。
Thumbnail
本來說要利用 Hexo 框架來設計靜態網站,但還要安裝 IDE 跟下載套件,這就不太符合我的期待,其實我只是想要弄個網頁當自我介紹用而已,根本沒必要這麼複雜。單純想用最簡單的網路設定方式,不用下載任何套件,最好也不用寫啥程式,只要設定設一設就可以擁有自己的個人網頁。
Thumbnail
本來說要利用 Hexo 框架來設計靜態網站,但還要安裝 IDE 跟下載套件,這就不太符合我的期待,其實我只是想要弄個網頁當自我介紹用而已,根本沒必要這麼複雜。單純想用最簡單的網路設定方式,不用下載任何套件,最好也不用寫啥程式,只要設定設一設就可以擁有自己的個人網頁。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News