Deploy your React App on GitHub Pages




Note

  • This example use Create React App , if you use other dev environment may have some difference, but not so big.
  • If you are using react-router-dom please replace "BrowserRouter" as "HashRouter".

Links

Start

1. Create a repo on GitHub

2. Create a react App

$ npm init react-app your-app-name

3. Go to your app folder and run "eject" command

$ cd your-app-name
$ npm run eject

4. Modify the output path for production

  • under "config" folder, open "path.js"
  • find Line 73 appPublic: resolveApp('public')
  • Replace with appPublic: resolveApp('docs'),

5. Add "homepage" to your package.json like this:

{
  "name": "react-on-gh",
  "version": "0.1.0",
  "homepage":"https://your-github-account.github.io/your-repo",
  "private": true,
  "dependencies": {
      ...

6. Edit npm script in package.json

...
"scripts": {
    "start": "node scripts/start.js",
    "build": "set PUBLIC_URL=https://your-github-account.github.io/your-repo&& node scripts/build.js",
    "release": "npm run build&&git add .&&git commit -m'release'&&git push",
    "test": "node scripts/test.js"
  },
...

7. Push to Git Repo

$ npm run release

8. Enable GitHub Pages

  • Reop > Settings > Options > GitHub Pages > "master branch /docs folder" > save

you must have a "docs" folder on git repo to enable "master branch /docs folder" option

go to your GitHub Pages and wait it update changing then enjoy😊😊

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料