---
# System prepended metadata

title: 使用Github Pages上傳網頁
tags: [git]

---

# 使用Github Pages上傳網頁
- [x] 用GitHub 上傳網頁

打開iterm 輸入`cd mission`(前往我們剛剛存放已vscode寫好的網頁的資料夾）並輸入`ls`確定檔案有在資料夾裡
![image](https://user-images.githubusercontent.com/68895587/98394770-361d3880-2096-11eb-8fcf-3bbcd4a875cf.png)

輸入git status確認狀態，看到呈現的結果是**紅色**的，代表檔案還沒被加入git
![image](https://user-images.githubusercontent.com/68895587/98398079-51d70d80-209b-11eb-81e7-0a0f73594d34.png)



接著輸入 `git add firstDemo.html` 將html加入，並再次輸入`git status`確認狀態，可以發現檔案狀態變成綠色
![image](https://user-images.githubusercontent.com/68895587/98398123-69ae9180-209b-11eb-851b-782a2eaecf11.png)


接著準備git commit (commit代表我們將檔案從暫存提交至檔案庫)
輸入 `git commit -m "add fristDemo.html"` (" " 裡盡量放動詞＋名詞讓人知道你做了啥）
![image](https://user-images.githubusercontent.com/68895587/98398137-7206cc80-209b-11eb-8ef7-1ed23416d038.png)

輸入`git status`確認狀態clean
![image](https://user-images.githubusercontent.com/68895587/98398222-92cf2200-209b-11eb-9ad5-3ca412619a4a.png)

- 建造一個branch (gh-pages)
git branch 創建一個branch 
輸入`git branch gh-pages`
![image](https://user-images.githubusercontent.com/68895587/98396716-23583300-2099-11eb-9b70-c57585628379.png)

查看`git branch`( 按q結束）
![image](https://user-images.githubusercontent.com/68895587/98396675-11769000-2099-11eb-9da0-9382977ef0b1.png)

切換到gh-pages
輸入`git checkout gh-pages`就可以切換到gh-pages
![image](https://user-images.githubusercontent.com/68895587/98396954-8c3fab00-2099-11eb-8f01-8c035ed61a74.png)

輸入`code .` 開啟vscode在專案資料夾創建一個index.html的檔案 存擋
![image](https://user-images.githubusercontent.com/68895587/98399967-34f00980-209e-11eb-9267-2e9dce60f24a.png)

回到iterm輸入`git add .` 將index.html加入並輸入`git status`確認狀態由 紅 變成 綠 
![image](https://user-images.githubusercontent.com/68895587/98399935-29044780-209e-11eb-9ebe-3c6c16aedc25.png)

到自己的github 創造一個repo，並給定名稱hello_git
![](https://i.imgur.com/3rp6yfJ.png)


回到vscode 再輸入`git remote add origin git@github.com:Chrislinlin/hello_git.git`

## 推上git 
輸入 `git push`
![image](https://user-images.githubusercontent.com/68895587/98404542-bf883700-20a5-11eb-9856-fca25662b7b3.png)

創造的repo裡面就有我們剛剛創立的網頁了
![image](https://user-images.githubusercontent.com/68895587/98404572-d0d14380-20a5-11eb-9e50-4e3eaed467ac.png)
![](https://i.imgur.com/WbGbOrL.png)


###### tags: `git`
