如何透過Git Hub把自己寫好的網頁發布到網站呢?【免費平台】

手把手教學,網頁小白也可以輕鬆上手

by Yuan
發布於: 最近更新於: 425 次瀏覽
github教學

好不容易寫好了網頁代碼(Html,css,JavaScript)
卻不知道如何展現給朋友看?

這篇文章我要來教大家如何透過免費平台「Git Hub」
把自己寫好的網頁發布到網站上!

一個步驟一個步驟帶著做
網頁小白也可以輕鬆上手!

註冊一個github帳號

到github的官網註冊一個自己的帳號
(已經有帳號的朋友可以直接跳到下面的 “建立一個新的project” 步驟 )
github教學

輸入自己既有的email來註冊(比如說gmail)

輸入完自己的email帳號後點Continue

github教學

設定密碼後點Continue

github教學

設定自己的使用者名稱後點Continue

這邊會需要驗證是否為機器人 所以就是點「驗證」,並依照它的指示就可以了

會收到一封有驗證碼的email (會寄到剛剛用來註冊的email)
填入驗證碼就可以了

選一下符合自己的使用身分 並點Continue
(這邊不是很重要 只是github做的簡單調查)

選擇免費版就可以了

進到這個畫面就代表帳號註冊成功啦!


點creat repository 建立一個新的project

倉儲(Repository)是什麼?
可以參考網路上的這篇文章

只要填入檔案名稱 其他都不用更動
接著按creat repository

點creating a new file 來建立新檔案
﹝這裡可以自己選擇 建立新檔案 上傳既有檔案
我是直接 建立新檔案喔!﹞

將檔案名稱設為「index.html」★非常重要★
如果檔名不是index.html 很有可能無法正常顯示網頁喔!
然後在下面的區塊填入網頁的code

先點右上角綠色的 Commit Change
再點Pop up 出來的 Commit Change
這樣就成功提交code了

github教學

提交完之後點「Settings」

進到Settings的畫面後 點左下角的Pages

在Branch的地方點「None」 ,然後選「main」 ,再按「Save」

點完「Save」之後 需要在這個畫面等個3到5分鐘
然後可以按F5重新整理 看看這裡有沒有出現網頁的網址
如果沒有出現 就再等一下再重整 (需要耐心等候)

github教學

這邊可以看到 成功出現網頁的網址了!
出現網頁的網址後 就可以點擊網址前往自己上傳的網頁囉!
也可以將網址傳給朋友 讓朋友欣賞你的網頁!

github教學

https://yuanjptalker.github.io/demo_page/
這個就是我在github上傳的網頁喔!

github教學

這樣就順利將自己的網頁上傳到github啦!
有任何不瞭解的地方可以在下方留言給我

歡迎分享給我你的網頁喔 : )

相關文章

發布留言