今天我們要將專案推上 github！
先在建立裡面只有 index.html 的專案。
並依序進行：

1. 初始化 git：git init：
2. 將 index.html 加到 staged：git add .
3. 將 staged 的變更加到 repository 中：git commit -m "feat: init index.html"
4. 初始化 npm：npm init
5. 安裝 SCSS：npm i scss
6. 安裝 stylelint：npm install --save-dev stylelint stylelint-config-standard
7. 讓 stylelint 看懂 SCSS：npm i -D stylelint postcss stylelint-config-sass-guidelines
8. stylelint 判斷 CSS 寫法的標準：.stylelintrc.json

   {
     "extends": [
       "stylelint-config-standard",
       "stylelint-config-sass-guidelines"
     ]
   }
   

9. 在 pacjage.json 的 scripts 中新增：

   // package.json
   "scripts": {
       "compile-SCSS--watch": "sass --watch ./css/input.scss ./css/output.css",
       "compile-and-fix": "sass ./css/input.scss ./css/output.css && stylelint \"**/*.{css,scss,sass}\" --fix"
   },
   

   • compile-SCSS--watch：在開發的時候可以跑起來，當變更 input.scss 後，會同步更新 output.css 的內容
   • compile-and-fix：先將 ipnut.scss 編譯成 output.css 後，再透過 stylelint "**/*.{css, scss, sass}" --fix 對樣式檔進行整理
10. git add .
11. 這時候會發現 staged 中有一個很龐大的資料夾：node_modules，裡面是 npm 透過 package.json 所載下來的套件，在進行版控的時候一般會將它忽略，不讓 git 對這個資料夾進行追蹤。為此，我們需要建立 .gitignore 並把 node_modules/ 加入檔案中：

    //.gitignore
    node_modules/
    

12. git commit -m "core: 初始化 npm、設定 scss 開發環境、新增 .gitignore"
13. 到目前為止的檔案與 commit：
    
    

推到 github 上

我們到 github 的 repository 頁面中，點選右邊的 New 來新增 repository

填入專案名稱後可以選擇 public 就好，再來就可以往下建立 repository

之後可以看到這個畫面：

現在已經有建立一個專案了，所以這邊我們選中間的 push an existing repository from the command line 就好，然後把上面的指令複製貼到終端機上

// 在遠端（git remote）的 url（git@github.com...）新增（add）數據庫（origin）
git remote add origin git@github.com:zoeGuava/ithome2022-github-demo.git

// 將分支重新命名為 main（原本是 master）
git branch -M main

// 推到（git push）遠端數據庫（origin）的分支（main）上
// 第一次推這個分支上去的時候，要透過 -u(--set-upstream) 讓 local 端的分支可以追蹤推到遠端的這個分支，之後就不用了，只要 `git push` 就可以
// git push -u <遠端數據庫名稱>/<分支名稱>
git push -u origin main

（這邊有個小意外...第一次貼的時候不小心打了兩個字導致錯誤，再貼第二次的時候因為已經跑過建立 repo 的指令，所以報錯）

之後重整頁面就可以看到剛剛推上去的專案了
ithome2022-github-demo

參考

git branch -u origin main 的 -u 是什麼：
設定 Upstream