---
# System prepended metadata

title: Github upload & Github Pages

---

# Github upload & Github Pages
###### #git #github #github pages #web deploy #version control
Git是在軟體開發時常用的版本控制系統，能為專案儲存多個版本，也方便多人協作，而Github是其中一個可以上傳的平台。

## `開始使用Github`
### 1. 下載Git
官網: https://git-scm.com/downloads
### 2. 註冊帳號
官網: https://github.com/
用email直接註冊帳號
### 3. 新建Repository
點擊右上頭像裡的"Your repository"
![](https://i.imgur.com/02Tx104.png)
點擊右上綠色的"new"
![](https://i.imgur.com/Oq3psOj.png)
輸入專案名稱 點擊"Create repository"
![](https://i.imgur.com/jnekiCC.png)
### 4. key設定
上傳的認證可用https或SSH兩種方式，我是使用SSH，方便好用
別人的SSH設定教學: https://www.youtube.com/watch?v=CeC_qyQHiCE
### 5. 上傳
在自己電腦上專案的根目錄使用終端機 
首次上傳 輸入:
```
git init 
git add .
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:userName/projectName
git push -u origin main
```
後續更新 輸入:
```
git add .
git commit -m "更新說明"
git push
```
## `Github Pages with Create-React-App`
Github Pages是Github提供的功能，能讓你架設靜態的網站
### 1. 安裝Github Pages到專案
在自己電腦上專案的根目錄使用終端機 
輸入:
```
npm add gh-pages
```
### 2. 修改package.json
在專案的package.json新增:
```
"homepage": "https://userName.github.io/projectName/",
```
在scripts裡面新增
```
"deploy": "gh-pages -d build"
```
![](https://i.imgur.com/hyzh7vf.png)

### 3. push專案
```
git add .
git commit -m "更新說明"
git push
```
### 4. Deploy專案
```
npm run build
npm run deploy
```
### 5. 開始使用
到github的專案網頁 
點擊setting/Pages
點擊中間的網址
![](https://i.imgur.com/K0EzQkf.png)

