目前React的線上課程進度到第一個靜態站台完成

然後課程教我們使用GitHub的Pages 免費服務架設站台

看到這其實蠻興奮的

雖然只有靜態網頁但是能夠將自己的作品上傳到網路空間給大家真的很開心

以下為操作步驟

====================================================

  1.  將VS Code 的專案簽入到自己的github空間(此功能就不贅述了)
  2. 安裝gh-pages套件用來快速發布到github空間
    • 指令=>yarn add gh-pages /npm install --save gh-pages
  3.  設定package.json
    • 設定home page ,路徑為 https://{github的帳號}.github.io/{github的專案名稱}
    • 於script裡新增2個腳本,分別為 predeploy 和deploy
      • "predeploy": "yarn build",
      • "deploy": "gh-pages -d build",
      • 根據課程解說這兩個腳本下完以後每次執行deploy的指令先前就會先run predeploy的指令,達到自動化的效果(但我目前還不能理解它的運作原理的說)
    • image
  4. 發佈到git hub
    • 回到控制台下指令 => yarn build
    • 此功能會跑一點時間,直定系統顯示 Compiled Successfully的字樣即表示完成
    • 再下指令 => gh-pages -d build
    • image
  5. 檢查git hub的設定&網頁
    • 登入git hub網頁,進入設定頁面
    • 尋找GitHub Pages的設定,檢查分支目前設定為gh-pages的選項,如果不是請手動切換
    • 點選上方網址欣賞自己的作品
    • image

==================================================================

 

以上為發佈到GitHub Pages的心得筆記

我的第一個React也已經完成  https://jayechen987.github.io/React_monster-rolodex/

後面老師說要架一個電子商務的站台還要串信用卡Api

非常期待我能完成課程

 

arrow
arrow
    文章標籤
    react
    全站熱搜
    創作者介紹
    創作者 JayeChen987 的頭像
    JayeChen987

    Jaye的碎碎念

    JayeChen987 發表在 痞客邦 留言(0) 人氣()