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

更新於 發佈於 閱讀時間約 1 分鐘
不知道你是否有以下困擾呢?
「自己寫好的程式,若要呈現在網路上,該怎麼辦?」
「手上有個html的檔案,但是要如何分享給朋友們?」
「做一個網站要花主機的錢,如何有個免費託管主機的地方呢?」
以上問題,將由github pages來幫你解決喔!
接下來將會說明github pages架設靜態網站的應用唷~

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

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

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

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

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

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

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

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

看完之後,是不是覺得容易許多呢~那就趕快動手操作吧!!
為什麼會看到廣告
avatar-img
32會員
98內容數
哈囉!我是冠彰,大家都叫我袋鼠。 從高中開始到現在不斷走在教育的道路上,意識到教育、社會與全球是息息相關,然而有太多結構性問題讓我感到困擾與煩憂。未來將成為#社會助人教育NPO工作者,期待在教育、社會、以負責、毅力與省思的方式,讓自己成為「助人的永續人才」道路前進。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
袋鼠Kangaroo's Blog 的其他內容
「你是否覺得電腦的那些固定字體已經看膩了呢?」 「你是否覺得每次電腦只能用黑體、標楷體或是新細明體呢?」 那麼今天要來介紹一下,如何在網路上安裝其他的字體,以及介紹幾種安裝字體的網站唷~
歡迎來到袋鼠的Blog! 由於最近google準備要將google雲端教育版的容量進行刪減,因此筆者開始尋找有什麼大容量的免費雲端是可以存放檔案的。也因此Microsoft365教育版推出了免費1TB的雲端空間,讓我們一同來看如何使用吧!
「你是否覺得電腦的那些固定字體已經看膩了呢?」 「你是否覺得每次電腦只能用黑體、標楷體或是新細明體呢?」 那麼今天要來介紹一下,如何在網路上安裝其他的字體,以及介紹幾種安裝字體的網站唷~
歡迎來到袋鼠的Blog! 由於最近google準備要將google雲端教育版的容量進行刪減,因此筆者開始尋找有什麼大容量的免費雲端是可以存放檔案的。也因此Microsoft365教育版推出了免費1TB的雲端空間,讓我們一同來看如何使用吧!
你可能也想看
Google News 追蹤
提問的內容越是清晰,強者、聰明人越能在短時間內做判斷、給出精準的建議,他們會對你產生「好印象」,認定你是「積極」的人,有機會、好人脈會不自覺地想引薦給你
Thumbnail
本篇文章將告訴如何解決寫作文時腦袋一片空白的狀況,透過「切題」的寫作技巧,能夠快速地讓你想出比原來多上好幾倍的寫作題材,快來看看具體到底該如何做吧!「切題」顧名思義就是將題目「切開」,將原先一段文字分割成不同小單元。接著透過每個切分出來的單元,再進行類似字詞的隨意發想,就能夠獲得許多寫作的元素。
Thumbnail
本文探討 LINE 通知未彈出的原因及其解決方法,問題主要源自 LINE 設定或手機系統影響。介紹了四種解決方案,包括檢查提醒設定、重啟裝置、關閉靜音功能及更新應用程式。若所有方法均無效,最終建議重新安裝 LINE 並備份聊天記錄。文章也分享了使用 LINE 備份的注意事項,幫助用戶順利解決相關問題
Thumbnail
在這系列文章中,將會深入淺出介紹,如何整合下列工具,快速建立你的AI線上應用 Bubble.io 主網站及伺服器 AWS - Lambda: 快速架設簡單邏輯的API,寫個小小的python function立刻就上線,不需要大費周章額外架backend - S3: 提供檔案存取,可透過Pr
Thumbnail
一分钟教你快速购买比特币操作教程 首次购买数字货币的新手用户,必须先完成KYC验证(新用户注册),然后使用欧易的快捷买币功能,简... 🚀 币安 - 全球最大加密货币交易所 💥 独家优惠 💥 💰 注册即享 20% 手续费返佣 🔑 专属邀请码: R851UX3N 一分钟教你快速购买
架設第一個網站是一個令人興奮且具有挑戰性的過程。這篇文章將詳細介紹如何從零開始,逐步完成一個基本的網站,並且涵蓋所需的主要步驟。 1. 計劃與構思 在開始技術工作之前,首先要明確網站的目的和目標受眾。問問自己以下問題: 這個網站的主要目的是什么?(例如,博客、電子商務、個人作品集等) 目標受
Thumbnail
一開始你先把你的專案push上去後,修改vite.config.ts ,要在裡面新增  base: "/Cart/" (/放自己的專案名稱/) build: {outDir: "docs"}, 接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
今天學習Git 的第一步: 取得與建立項目 Getting and Creating Projects [1]。 之前提到「儲存庫 Repository」就是儲存所有「檔案 File」的地方。 在Git 的邏輯裡,儲存庫是要儲存所有的「快照 Snapshots」。 什麼是快照
Thumbnail
一切都從思考作品集要怎麼準備開始,所謂的 one 是起頭難(?),在動手寫 code 之前,總覺得自己做不到,一直在自己煩惱,直到前輩們說:開始做看看吧,一頁式網站也好,不開始做永遠不知道自己哪些知識需要補強。 於是決定先幫我的繆思女神做一個網站,讓她可以介紹自己的工作,再放社群連結
Thumbnail
你也是在過年大吃特吃後,發現自己身材走樣嗎,沒關係今天分享兩招教你減肥、恢復苗條身材!
提問的內容越是清晰,強者、聰明人越能在短時間內做判斷、給出精準的建議,他們會對你產生「好印象」,認定你是「積極」的人,有機會、好人脈會不自覺地想引薦給你
Thumbnail
本篇文章將告訴如何解決寫作文時腦袋一片空白的狀況,透過「切題」的寫作技巧,能夠快速地讓你想出比原來多上好幾倍的寫作題材,快來看看具體到底該如何做吧!「切題」顧名思義就是將題目「切開」,將原先一段文字分割成不同小單元。接著透過每個切分出來的單元,再進行類似字詞的隨意發想,就能夠獲得許多寫作的元素。
Thumbnail
本文探討 LINE 通知未彈出的原因及其解決方法,問題主要源自 LINE 設定或手機系統影響。介紹了四種解決方案,包括檢查提醒設定、重啟裝置、關閉靜音功能及更新應用程式。若所有方法均無效,最終建議重新安裝 LINE 並備份聊天記錄。文章也分享了使用 LINE 備份的注意事項,幫助用戶順利解決相關問題
Thumbnail
在這系列文章中,將會深入淺出介紹,如何整合下列工具,快速建立你的AI線上應用 Bubble.io 主網站及伺服器 AWS - Lambda: 快速架設簡單邏輯的API,寫個小小的python function立刻就上線,不需要大費周章額外架backend - S3: 提供檔案存取,可透過Pr
Thumbnail
一分钟教你快速购买比特币操作教程 首次购买数字货币的新手用户,必须先完成KYC验证(新用户注册),然后使用欧易的快捷买币功能,简... 🚀 币安 - 全球最大加密货币交易所 💥 独家优惠 💥 💰 注册即享 20% 手续费返佣 🔑 专属邀请码: R851UX3N 一分钟教你快速购买
架設第一個網站是一個令人興奮且具有挑戰性的過程。這篇文章將詳細介紹如何從零開始,逐步完成一個基本的網站,並且涵蓋所需的主要步驟。 1. 計劃與構思 在開始技術工作之前,首先要明確網站的目的和目標受眾。問問自己以下問題: 這個網站的主要目的是什么?(例如,博客、電子商務、個人作品集等) 目標受
Thumbnail
一開始你先把你的專案push上去後,修改vite.config.ts ,要在裡面新增  base: "/Cart/" (/放自己的專案名稱/) build: {outDir: "docs"}, 接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
今天學習Git 的第一步: 取得與建立項目 Getting and Creating Projects [1]。 之前提到「儲存庫 Repository」就是儲存所有「檔案 File」的地方。 在Git 的邏輯裡,儲存庫是要儲存所有的「快照 Snapshots」。 什麼是快照
Thumbnail
一切都從思考作品集要怎麼準備開始,所謂的 one 是起頭難(?),在動手寫 code 之前,總覺得自己做不到,一直在自己煩惱,直到前輩們說:開始做看看吧,一頁式網站也好,不開始做永遠不知道自己哪些知識需要補強。 於是決定先幫我的繆思女神做一個網站,讓她可以介紹自己的工作,再放社群連結
Thumbnail
你也是在過年大吃特吃後,發現自己身材走樣嗎,沒關係今天分享兩招教你減肥、恢復苗條身材!