如何使用 GitHub Pages 來架設網頁

Lawrence Yi-Hsuan Chuang
7 min readAug 28, 2023

--

Photo by Kevin Ku on Unsplash

作為開發者,你是不是有時候會煩惱如何把開發好的網站分享給別人或是當作自己的 side project 進行 demo 或是測試呢?

如果你有這方面的困擾的話, GitHub Pages 會是一個解決你的煩惱又不需要花費金錢的好工具!

那麼就讓我們來了解一下什麼是 GitHub Pages吧!

  1. 什麼是 GitHub ?
Photo by Rubaitul Azad on Unsplash

GitHub 是一個基於網路的程式碼託管平台,源自為 Git 的技術為主軸,即為分散式的版本控制系統,其主要目的是在解決多人協作以及程式碼管理的問題。

而 GitHub 在這理念上更發揚光大,除了提供程式碼的儲存與管理之外,還提供了開發者豐富的協作和功能,其中的 GitHub Page 也就是稍後會介紹的功能。

2. 註冊 GitHub

要使用到 GitHub 的功能,首先我們需要先註冊 GitHub 帳號。

註冊的流程筆者這邊就不再多加贅述了,跟著網站上的註冊流程即可完成。

3. 透過 GitHub Desktop 將程式碼部署到 GitHub

在我們註冊完畢 GitHub 後,要如何將我們寫的程式碼部署上去呢?基本上有兩種方式可以進行:

(1) 使用 Command Line Interface:

意即使用 Terminal 輸入指令的方式,但對剛接觸 Git 的初學者來說,稍有難度。

(2) 下載 GitHub for Desktop 的軟體:

GitHub for Desktop 提供圖形化介面的方式來幫助使用者完成程式碼的管理,故在此我們會先以此方式進行後續的說明。

GitHub for Desktop

前往 GitHub for Desktop 的下載頁面後,以筆者來說,使用的是 MacOS Apple Silicon ,因此這邊要確保下載相對應的軟體系統版本。接著,在下載完成後,打開 GitHub Desktop ,並登入我們註冊的 GitHub 帳號。

而在上傳程式碼上去之前,我們需要先到個人的 GitHub 上,創建一個GitHub Repository,也就是之後程式碼儲存的地方,因此在個人的 GitHub頁面上點選,Repositories 後,點選右側的綠色 New 按鈕。

又或是在進入 GitHub 首頁時,點選右上角的 “+” 按鈕,點選 [ New repository ] 新增也行。

接下來,進入到輸入 Repository 的資訊頁面,要特別注意的是 Repository name 必須為不重複的專案名稱,這個名稱也需要記起來,因為稍後在GitHub Desktop 時會用到。

接著下方的設定選擇為 Public,其餘地方維持原設定即可,接著點選下方的[ Create repository ] 即可。

接著,打開 GitHub Desktop,點選 [ Add ],然後選擇 [ Clone Repository ]

接下來,輸入我們剛剛在 GitHub 頁面上建立的 Repository 名稱,筆者這裡以 testing 作為範例,系統會自動搜尋關鍵字跳出相對應的選項,選擇最符合的即可,然後點選下方的 [ Clone ] 按鈕。

其中,下方的 Local Path 為要將下載下來的 Repository 存放在本機端的哪個路徑下。

Clone 完成後,右側就會多出一個我們剛剛下載下來的專案名稱

點選進入後的介面如下,由於還沒有上傳任何資料,所以為空是很正常的

4. 部署網站

在完成上述設定後,接下來我們需要把我們撰寫完成的網頁程式碼,複製到我們剛剛 Clone Repository 裡面的 Local Path之下,貼上之後重新回到GitHub Desktop 後,原本為空的內容在貼上檔案後,會自動偵測到新增的檔案資料。

確定檔案新增完成無誤後,我們可以在下方的 Summary 跟 Description 中輸入相對應的內容,輸入完畢後點選 [ Commit to main ]

在點選完 [ Commit to main ] 後,會發現系統剛剛偵測到的新增檔案會全部消失,那是因為版本控制的關係,亦即上一次的版本已經被 Commit 了。

除非檔案有任何的新增或修改,才會再出現相對應的訊息,如果要確認是否有Commit 成功,可以到 History 頁籤中查看。

在準備就緒後,我們還需要把程式碼上傳到 GitHub 的 Repository 才算真正的把檔案新增上去。

因此,在確認無誤後,點選上方的 [ Publish branch ],即可把所有檔案上傳到我們剛建立的 Repository 中,上傳的速度快慢則依網路與檔案大小有關。

點選後,就會出現進度條,提示目前上傳的進度與檔案數量

完成後,回到 GitHub 網頁中我們新建立的 Repository 檢視是否有檔案上傳若有看到類似下方的內容,即代表檔案有上傳成功,接下來就可以設定GitHub Pages 了。

GitHub Pages,是 GitHub 提供的一個能夠免費 Host 網頁的空間,可以很快速的讓我們將網頁呈現出來,並且提供外部的人員進行測試、Demo、或是營運。

接下來,我們來看看如何設定吧!

5. 設定 GitHub Pages

在 GitHub Repository 中,點選上方一排頁籤中的 [ Settings ]

進入後,左側的選單中,選擇 [ Pages ]

進入 Pages 後,在 Branch 下,選擇名為 main 的 branch,其餘維持預設即可,接著點選 [ Save ]

Save 之後,通常會需要幾秒鐘或甚至幾分鐘後 Pages 才會更新完成,這段時間可以重新刷新頁面來查看是否更新完成。

在更新完成後,會看到一串 URL,恭喜你,網頁已經部署完成了,點選 URL 我們就可以存取到所開發的網頁了。

這就是我們設定完成的成果囉!是不是非常方便且簡單呢?

GitHub Pages 的功能就介紹到這邊了,如果有幫助到你的話,不坊留下一個掌聲給我一個鼓勵,讓我有更多的動力來紀錄更多的文章吧!

那我們下次見,Bye Bye 囉👋 !

--

--

Lawrence Yi-Hsuan Chuang

擁有超過9年工作經驗的工程師,目前在University of Nevada, Reno就讀Computer Science的碩士生,曾在軟體、銀行顧問和物聯網產業服務並擁有豐富的經驗。在這裡主要分享個人在學習技術方面的心得與知識。此外,我也是攝影愛好者,如果有任何關於技術、職場或攝影的問題,都歡迎一起討論、交流!