使用 GitHub Page 掛載靜態網頁

2024-05-15

tutorials

818 詞

如何使用 GitHub Page 掛載靜態網頁

使用 GitHub Page 可以永久免費的掛載自己的靜態網頁不用使用任何終端機或是指令也能輕鬆掛載你的部落格

這篇文章將假設已經擁有一個靜態網站需要掛載

範例:

所需工具:

靜態網站產生待更新教學

首先我們先登入 GitHub 創建一個 Repository

這邊用 GitHub Desktop 來處理檔案

這邊會自動開啟 GitHub Desktop 按下 Clone

這邊我的網頁目錄在 D:\Documents\GitHub\blog_for_test
請先記下 Local path 的路徑以便等下的操作

接下來打開檔案總管進入記下的路徑

這是我的靜態網頁的網站 , 如果你還沒有自己的網站 , 可以參考我的另一篇文章

接下來把網站的資料都丟到裡面

打開 GitHub Desktop 可以看到讀取到檔案在 Summary (required) 輸入 upload
點擊 Commit to main

然後,我們點擊 Publish branch

回到剛剛創建的 repo
依序點擊 Setting -> 下方的 Pages

將底下 Branch 底下的 None 改成 main

然後點擊 Save

等過幾分鐘後 , 重新整理一下頁面上面就會顯示你的網站網址

之後任何檔案刪除或改動都需要在剛剛放置檔案的資料夾做更動

舉個例子 : 假如我今天要增加一個網頁叫做 test.html

新增過後打開 GitHub Desktop
這邊會顯示你增加了test.html點擊底下藍色的 Commit to main

再點擊旁邊的 Push origin
等他跑完後 , 等待伺服器處理好大約三分鐘 ,即可完成改動

Q : 為何我的CSS載入不正確?