[Git Note] — React 部署至 GitHub Page 超級淺入遷出

發表於 更新於 分類於 ， ， 文章字數： 1.4k 所需閱讀時間 ≈ 1 分鐘

Introduction & 前言

Create React App + Github Pages

如果你正在尋找如何將 React 部署上 Github Page，那就可以參考此篇文章，整個流程可在幾分鐘不到的時間學會。

Summary & 摘要

Vue 和 React 的部署方式不同，故紀錄流程方便日後查看或供需要的人學習。

本篇文章預設學習前的基本條件需求

  • 會使用 Git 並且能推 Code 上 Github
  • 知道 Create-React-App 且可以建立出基本 React 專案
  • 會使用 Npm 或 Yarn 安裝 package

前置作業

基本上預設您已經有一個專案，這邊會使用 react-router-practice 作為範例，如果想學習 React Router 的相關知識可參考 [React Notes] — React 初次見面之 React Router 淺入淺出

  1. 首先需要先推程式碼上 Github

Github Res

  1. 接著回到專案，並且安裝套件 gh-pages

安裝套件

1
$ npm i gh-pages / yarn add gh-pages // 選擇你啟動專案的方式
  1. 將 package.json 補上兩行相關指令
1
2
3
4
5
6
7
8
9
10
11
12
// package.json
{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
		"test": "react-scripts test",
    "eject": "react-scripts eject",
+   "predeploy": "npm run build", // 這邊使用 npm 或 yarn 就看你啟動專案的方式
+   "deploy": "gh-pages -d build",
    // ...
  }
}
  1. 將 package.json 補上 homepage 的網址
  • 請將 githubusername 換成你的 Github 帳號
  • 請將 app-name 換成你 Repository 的名稱

路徑千萬不要打錯囉

這邊需要注意如果你的帳號為大寫，都一致改為全小寫，下圖紅色是『githubusername』，藍色『app-name』

可直接到你的 Github 查看使用名稱及專案名稱

改完大致上如下圖

package.json

  1. 執行指令，輸入下列指令
1
$ npm run deploy / yarn deploy // 這邊使用 npm 或 yarn 就看你啟動專案的方式

跑完後上 Github 應該會看到你的分支多了一個 gh-pages，如下圖

gh-pages

  1. 接著按照下圖順序操作
  • 先點擊 Setting
  • 再點擊 Pages
  • 接著將分支切換至 gh-pages 然後資料夾為 /(root) ，再點擊保存**(Save)**
  • 最後就會有展示網址出來了

跟著步驟一步一步走

  1. 查看成果

成果展示

Conclusion & 結論

最近忙碌一個回過神發現已經兩個月沒有撰寫新文章了，最近剛轉換跑道，還在跟新的技術框架奮鬥中；恰巧這次工作專案需要部署上 Github Pages，所以就趁機筆記一下整個過程。

之前使用 Vue 都是透過自己寫 deploy.sh 去推 Code 上 Github，第一次推 React 上 Github 卻發現打開都是一片空白，一查才發現跟 Vue 的方式大大不同，所以就趁機記錄下來了，但其實實作後發現這個過程非常的易學且快速，相信第一次推 React 上 Github 的你也會喜歡這種方式。

參考網站