快速教你使用github部署你的網站

更新 發佈閱讀 2 分鐘
raw-image

不知道你是否有以下困擾呢?

「自己寫好的程式,若要呈現在網路上,該怎麼辦?」

「手上有個html的檔案,但是要如何分享給朋友們?」

「做一個網站要花主機的錢,如何有個免費託管主機的地方呢?」

以上問題,將由github pages來幫你解決喔!

接下來將會說明github pages架設靜態網站的應用唷~

網站:https://github.com/

第一步:進入github的網站,點選右上角,註冊一個新的帳號。(如果已經有帳號了,就可以直接點sign in登入即可。)

raw-image

第二步:進來之後,點選右上角的「+」號,然後點選「New Repository」

raw-image

第三步:填寫專案名稱(只能填寫英文與數字喔),然後設定你要公開還是要設為私人(建議用公開),最後按下綠色按鈕「create repository」。

raw-image

第四步:點選你要「creating a new file(建立新檔案)」或是「uploading an existing file(上傳新檔案),完成後按下綠色按鈕「commit change」。

【✨重要:不論是哪種方式,最主要的那個首頁的檔案名稱務必改為index才可以喔

raw-image
raw-image

第五步:點選上面那排的「setting」。

raw-image

第六步:點選右邊的「pages」,然後看到「Branch」。

raw-image

第七步:接著將「none」改成「main」,最後按下「save」。

raw-image

看完之後,是不是覺得容易許多呢~那就趕快動手操作吧!!

留言
avatar-img
袋鼠Kangaroo's Blog
42會員
96內容數
哈囉!我是冠彰,大家都叫我袋鼠。 從高中開始到現在不斷走在教育的道路上,意識到教育、社會與全球是息息相關,然而有太多結構性問題讓我感到困擾與煩憂。未來將成為#社會助人教育NPO工作者,期待在教育、社會、以負責、毅力與省思的方式,讓自己成為「助人的永續人才」道路前進。
袋鼠Kangaroo's Blog的其他內容
2023/12/31
在我無意見看見網路上有人討論三模的國文寫作時,讓我特別留下深刻的印象。其中,題目設計更是引人入勝。首題以一場關於失敗實驗的小遊戲為核心,讓我不禁反思,為何台灣的學生在全球範疇中展現最高的「害怕失敗」指數?這背後的原因值得我們深入剖析。
Thumbnail
2023/12/31
在我無意見看見網路上有人討論三模的國文寫作時,讓我特別留下深刻的印象。其中,題目設計更是引人入勝。首題以一場關於失敗實驗的小遊戲為核心,讓我不禁反思,為何台灣的學生在全球範疇中展現最高的「害怕失敗」指數?這背後的原因值得我們深入剖析。
Thumbnail
2023/12/18
最近在網路上看到關於武敬凱的最新影片-「你之所以窮,就是因為你窮。|階級複製, 富人思維」。而在各大臉書或是論壇當中,我時常看到這個社會時常說到「讀書」可以翻轉階級。但是,過去以往可以用讀書翻轉,但是面對未來變化莫測的世界,對於用讀書來翻轉階級已經是很困難了,不然你想想,大家都想翻轉階級,但是到底有
Thumbnail
2023/12/18
最近在網路上看到關於武敬凱的最新影片-「你之所以窮,就是因為你窮。|階級複製, 富人思維」。而在各大臉書或是論壇當中,我時常看到這個社會時常說到「讀書」可以翻轉階級。但是,過去以往可以用讀書翻轉,但是面對未來變化莫測的世界,對於用讀書來翻轉階級已經是很困難了,不然你想想,大家都想翻轉階級,但是到底有
Thumbnail
2023/12/15
引言: 在台灣,教育一直是社會關注的焦點之一。儘管108課綱的實施意圖良好,但社會上普遍存在對其評價褒貶不一的聲音。這種評價的背後,是一系列教育體制和政策的問題。本文將以專業的態度,從政府教育目的、心態導向、升學競爭、差別待遇等角度深入探討,旨在促使對台灣教育體制進行更深層次的反思和改革。 政府
Thumbnail
2023/12/15
引言: 在台灣,教育一直是社會關注的焦點之一。儘管108課綱的實施意圖良好,但社會上普遍存在對其評價褒貶不一的聲音。這種評價的背後,是一系列教育體制和政策的問題。本文將以專業的態度,從政府教育目的、心態導向、升學競爭、差別待遇等角度深入探討,旨在促使對台灣教育體制進行更深層次的反思和改革。 政府
Thumbnail
看更多
你可能也想看
Thumbnail
在 vocus 與你一起探索內容、發掘靈感的路上,我們又將啟動新的冒險——vocus App 正式推出! 現在起,你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔,或一天結束後的放鬆時刻,都能自在沈浸在內容宇宙中。
Thumbnail
在 vocus 與你一起探索內容、發掘靈感的路上,我們又將啟動新的冒險——vocus App 正式推出! 現在起,你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔,或一天結束後的放鬆時刻,都能自在沈浸在內容宇宙中。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
還在苦惱怎麼樣把你的檔案上傳到Github嗎?這裡教大家簡單上傳你的檔案可以沿用到如何上傳整體專案到Github並展示你的作品集
Thumbnail
還在苦惱怎麼樣把你的檔案上傳到Github嗎?這裡教大家簡單上傳你的檔案可以沿用到如何上傳整體專案到Github並展示你的作品集
Thumbnail
不知道你是否有以下困擾呢? 「自己寫好的程式,若要呈現在網路上,該怎麼辦?」 「手上有個html的檔案,但是要如何分享給朋友們?」 「做一個網站要花主機的錢,如何有個免費託管主機的地方呢?」 以上問題,將由github pages來幫你解決喔!
Thumbnail
不知道你是否有以下困擾呢? 「自己寫好的程式,若要呈現在網路上,該怎麼辦?」 「手上有個html的檔案,但是要如何分享給朋友們?」 「做一個網站要花主機的錢,如何有個免費託管主機的地方呢?」 以上問題,將由github pages來幫你解決喔!
Thumbnail
Step1: 打開github登入 https://github.com/ 創立一個Repositories把網頁檔案丟上去 之後點我圈起來的地方 把你的網頁檔案放上去 要注意把檔案都正確上傳(通常會有29個檔案) 並點擊下面確認按鈕 Step2: 打開netlify登入 https://app.n
Thumbnail
Step1: 打開github登入 https://github.com/ 創立一個Repositories把網頁檔案丟上去 之後點我圈起來的地方 把你的網頁檔案放上去 要注意把檔案都正確上傳(通常會有29個檔案) 並點擊下面確認按鈕 Step2: 打開netlify登入 https://app.n
Thumbnail
對於前端工程師來說github上的gh-page是一個很適合放置自己作品的地方 尤其適合想要練練手感的時候可以方便地展示成果的地方 在過去使用手動commit至gh-page的分支上,或是使用deploy.sh檔來部署,對於我這種懶人來說都是多一個步驟,時常會覺得麻煩 現在能夠透過github ac
Thumbnail
對於前端工程師來說github上的gh-page是一個很適合放置自己作品的地方 尤其適合想要練練手感的時候可以方便地展示成果的地方 在過去使用手動commit至gh-page的分支上,或是使用deploy.sh檔來部署,對於我這種懶人來說都是多一個步驟,時常會覺得麻煩 現在能夠透過github ac
Thumbnail
程式碼建置後的結果一樣在build下面,我們只需要{專案資料夾}/build/js/packages/{專案名}/kotlin/裡的四個檔案。 我另外開了一個gh_pages的Git分支,命名由來是GitHub的pages,除了initial的commit以外,只新增剛剛的四個檔案。
Thumbnail
程式碼建置後的結果一樣在build下面,我們只需要{專案資料夾}/build/js/packages/{專案名}/kotlin/裡的四個檔案。 我另外開了一個gh_pages的Git分支,命名由來是GitHub的pages,除了initial的commit以外,只新增剛剛的四個檔案。
Thumbnail
本文目標是用 gh-pages 來部署靜態網頁達成需求 最近有人剛好有兩個版本的問卷,需要在使用者進入時隨機給予其中一份。他也找了程式碼,只差部署到一個地方來做隨機派發的需求。 簡單看一下發現其實用 Github Pages 就能達成(單純的前端而已),可是程式碼內容比較不符個人習慣,所以就改了一下
Thumbnail
本文目標是用 gh-pages 來部署靜態網頁達成需求 最近有人剛好有兩個版本的問卷,需要在使用者進入時隨機給予其中一份。他也找了程式碼,只差部署到一個地方來做隨機派發的需求。 簡單看一下發現其實用 Github Pages 就能達成(單純的前端而已),可是程式碼內容比較不符個人習慣,所以就改了一下
Thumbnail
操作筆記、安裝git、下載github專案
Thumbnail
操作筆記、安裝git、下載github專案
Thumbnail
不過因為網站和 repo 都是託管在 GitHub,就想說是不是可以直接在 GitHub 上讓他自動部署就好,我只要把文件上傳上去,接著 CI 就幫我弄好了。剛好之前 GitHub 就有推出 GitHub Actions,就是 GitHub 自己的 CI/CD 服務。剛好可以來試試看,
Thumbnail
不過因為網站和 repo 都是託管在 GitHub,就想說是不是可以直接在 GitHub 上讓他自動部署就好,我只要把文件上傳上去,接著 CI 就幫我弄好了。剛好之前 GitHub 就有推出 GitHub Actions,就是 GitHub 自己的 CI/CD 服務。剛好可以來試試看,
Thumbnail
搞清楚 Git 與 GitHub 的差別並學會必會操作 什麼是 Git? Git 是一個軟體,可藉由它產生一個數據庫(repository),並且做到分散式版本控制。由於可在多處放置同一份程式碼、歷史紀錄追蹤與回朔,讓協同開發變得容易。(關於不同版本控制系統的介紹,請參閱 Git 官方教學文件)
Thumbnail
搞清楚 Git 與 GitHub 的差別並學會必會操作 什麼是 Git? Git 是一個軟體,可藉由它產生一個數據庫(repository),並且做到分散式版本控制。由於可在多處放置同一份程式碼、歷史紀錄追蹤與回朔,讓協同開發變得容易。(關於不同版本控制系統的介紹,請參閱 Git 官方教學文件)
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News