快速教你使用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
留言分享你的想法!
avatar-img
袋鼠Kangaroo's Blog
41會員
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
每年 12 月,我最期待的就是蝦皮的 雙12狂歡生日慶! 身為每個月都會在蝦皮買生活用品的創作者,真的有太多值得分享的愛用品。 這篇整理了我: ✔ 實際買過、覺得必須分享的 6 項愛用開箱 ✔ 今年雙12準備補貨及購入的購物清單 ✔ 省錢攻略+蝦皮分潤計畫,新手也能邊買邊賺! 📌現在加入領$1
Thumbnail
每年 12 月,我最期待的就是蝦皮的 雙12狂歡生日慶! 身為每個月都會在蝦皮買生活用品的創作者,真的有太多值得分享的愛用品。 這篇整理了我: ✔ 實際買過、覺得必須分享的 6 項愛用開箱 ✔ 今年雙12準備補貨及購入的購物清單 ✔ 省錢攻略+蝦皮分潤計畫,新手也能邊買邊賺! 📌現在加入領$1
Thumbnail
各位被生活壓得喘不過氣的勇者們,請停下你匆忙的腳步! 你是不是常常覺得:錢包是個黑洞,時間是個幻覺,每天都在執行「重複昨天的厭世」這個艱難的任務?這不是你的錯,這是你的人生被施加了幾道咒語! 今天,身為資深(但還沒躺平成功)的魔法道具蒐集家,我要公開這份能讓你的人生瞬間充滿「微幸福感」的魔法清單
Thumbnail
各位被生活壓得喘不過氣的勇者們,請停下你匆忙的腳步! 你是不是常常覺得:錢包是個黑洞,時間是個幻覺,每天都在執行「重複昨天的厭世」這個艱難的任務?這不是你的錯,這是你的人生被施加了幾道咒語! 今天,身為資深(但還沒躺平成功)的魔法道具蒐集家,我要公開這份能讓你的人生瞬間充滿「微幸福感」的魔法清單
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