---
# System prepended metadata

title: 20221130 github創建及部署(Joshua)

---

# Joshua 20221130 github創建及部署

### 於Github 創建專案

-> Sign in [Github](https://github.com/)
-> 進入預設畫面，點選左方New
![](https://i.imgur.com/iheET0Z.png)

-> 進入Create a new repository
![](https://i.imgur.com/IZY5nl5.png)

-> 輸入Repository name，選擇Public，Create
![](https://i.imgur.com/X75Ti54.png)

-> 進入專案畫面，即完成建置
![](https://i.imgur.com/vXLCfRP.png)
<br>
<br>
<br>

### Clone專案至VS code中

-> 於桌面創建一個資料夾
![](https://i.imgur.com/4ycuHUd.png)

-> 拖曳至VS code中
![](https://i.imgur.com/von0p0H.png)

-> Command+J 叫出Terminal
![](https://i.imgur.com/NpRWY7x.png)

-> 於Github專案頁面複製網址
![](https://i.imgur.com/7typh3m.png)

->下指令 git clone+空格 貼上網址
ex: git clone https://github.com/Jamixcs/20221130test.git
![](https://i.imgur.com/1UpdR23.png)

-> 下指令 cd+Tab鍵+空格
ex: cd 20221130test/ 
![](https://i.imgur.com/ZD2QfI8.png)

->enter
->專案就clone下來了
![](https://i.imgur.com/BOQejTg.png)

這時候左下角會有個master或main，代表你已和Git上的專案做連結，到時候推檔案就會推到這個分支中
(備註:Terminal只能左右鍵移動，不能用箭頭點選)
![](https://i.imgur.com/GQAmBEt.png)

<br>
<br>
<br>

### Push檔案上Github


-> 新增一個.html檔案
![](https://i.imgur.com/uQAJhdp.png)
<br>
-> 於檔案編輯，左邊“分支”icon會有數字出現，表示有更動過
![](https://i.imgur.com/fXmQxt1.png)
<br>
-> 點選進“分支”這頁
![](https://i.imgur.com/N03KDEW.png)
<br>
-> 點選檔案，右方窗格會呈現更動過什麼，紅色代表刪除，綠色代表新增
![](https://i.imgur.com/AcRgCKe.png)
<br>
-> 於檔案點選+ 確認要變更這些編輯的東西
![](https://i.imgur.com/3UMkWzL.png)
<br>
-> 檔案會跑到Staged Changes的階層下，表示已確認變更的檔案處
![](https://i.imgur.com/L106OEc.png)
<br>
-> 於Message處輸入這次變更了什麼，按下Commit，檔案就合併進入專案裡了
![](https://i.imgur.com/uqaNsfq.png)
<br>
-> 已Commit
![](https://i.imgur.com/sdDVVoG.png)
<br>
-> 下指令 git push

-> 至Github做確認，看見剛剛推上的檔案
![](https://i.imgur.com/v6i6a4v.png)

<br>
<br>
<br>

### 創立靜態頁面網域

-> 點選Setting
![](https://i.imgur.com/kZH7H1C.png)
<br>
-> 進入Github pages，點選Pages
![](https://i.imgur.com/vTQAhBJ.png)
<br>
-> Source 點選Deploy from a branch
![](https://i.imgur.com/MFwxgDy.png)
<br>
-> Branch 點選剛剛於VS code中使用的分支
![](https://i.imgur.com/1xiKeXT.png)
<br>
-> Save
![](https://i.imgur.com/SDQ2o9c.png)
<br>
-> 設置完成
![](https://i.imgur.com/mH1BnMb.png)
<br>
-> 回到Code頁面，版號左邊會出現一個小橘點，表示正在部署
![](https://i.imgur.com/L3BJfDU.png)
<br>
-> 跑完之後會出現綠色勾勾，點選它，會出現幾個列表，請點選Details
![](https://i.imgur.com/R9Iu6bJ.png)
<br>
-> 部署成功
![](https://i.imgur.com/jP254xc.png)
<br>
-> 回到Setting->Pages
![](https://i.imgur.com/eGwHbH6.png)
<br>
-> 就出現網址囉
![](https://i.imgur.com/UFZvAZs.png)
<br>
-> Click it！You 've done well！
![](https://i.imgur.com/zB2nYLO.png)







