91 lines
No EOL
3.1 KiB
Markdown
91 lines
No EOL
3.1 KiB
Markdown
# Deploy react site
|
||
|
||
- for vite use this
|
||
https://dev.to/rashidshamloo/deploying-vite-react-app-to-github-pages-35hf
|
||
|
||
From site ‘[https://create-react-app.dev/docs/deployment/](https://create-react-app.dev/docs/deployment/)’
|
||
|
||
## [GitHub Pages](https://pages.github.com/)[](https://create-react-app.dev/docs/deployment/#github-pages)
|
||
|
||
> Note: this feature is available with react-scripts@0.2.0 and higher.
|
||
>
|
||
|
||
### Step 1: Add `homepage` to `package.json`[](https://create-react-app.dev/docs/deployment/#step-1-add-homepage-to-packagejson)
|
||
|
||
**The step below is important!**
|
||
|
||
**If you skip it, your app will not deploy correctly.**
|
||
|
||
Open your `package.json` and add a `homepage` field for your project:
|
||
|
||
`"homepage": "https://myusername.github.io/my-app",`
|
||
|
||
or for a GitHub user page:
|
||
|
||
`"homepage": "https://myusername.github.io",`
|
||
|
||
or for a custom domain page:
|
||
|
||
`"homepage": "https://mywebsite.com",`
|
||
|
||
Create React App uses the `homepage` field to determine the root URL in the built HTML file.
|
||
|
||
### Step 2: Install `gh-pages` and add `deploy` to `scripts` in `package.json`[](https://create-react-app.dev/docs/deployment/#step-2-install-gh-pages-and-add-deploy-to-scripts-in-packagejson)
|
||
|
||
Now, whenever you run `npm run build`, you will see a cheat sheet with instructions on how to deploy to GitHub Pages.
|
||
|
||
To publish it at [https://myusername.github.io/my-app](https://myusername.github.io/my-app), run:
|
||
|
||
`npm install --save gh-pages`Copy
|
||
|
||
Alternatively you may use `yarn`:
|
||
|
||
`yarn add gh-pages`Copy
|
||
|
||
Add the following scripts in your `package.json`:
|
||
|
||
```json
|
||
"scripts": {
|
||
"predeploy": "npm run build",
|
||
"deploy": "gh-pages -d build",
|
||
"start": "react-scripts start",
|
||
"build": "react-scripts build",
|
||
"test": "react-scripts test",
|
||
"eject": "react-scripts eject"
|
||
},
|
||
```
|
||
|
||
The `predeploy` script will run automatically before `deploy` is run.
|
||
|
||
If you are deploying to a GitHub user page instead of a project page you'll need to make one additional modification:
|
||
|
||
1. Tweak your `package.json` scripts to push deployments to **master**:
|
||
|
||
```json
|
||
"scripts": {
|
||
"predeploy": "npm run build",
|
||
- "deploy": "gh-pages -d build",
|
||
+ "deploy": "gh-pages -b master -d build",
|
||
```
|
||
|
||
`"scripts": { "predeploy": "npm run build",- "deploy": "gh-pages -d build",+ "deploy": "gh-pages -b master -d build",`Copy
|
||
|
||
### Step 3: Deploy the site by running `npm run deploy`[](https://create-react-app.dev/docs/deployment/#step-3-deploy-the-site-by-running-npm-run-deploy)
|
||
|
||
Then run:
|
||
|
||
`npm run deploy`
|
||
|
||
### Step 4: For a project page, ensure your project’s settings use `gh-pages`[](https://create-react-app.dev/docs/deployment/#step-4-for-a-project-page-ensure-your-projects-settings-use-gh-pages)
|
||
|
||
Finally, make sure **GitHub Pages** option in your GitHub project settings is set to use the `gh-pages` branch:
|
||
|
||
|
||
|
||
### Step 5: Optionally, configure the domain[](https://create-react-app.dev/docs/deployment/#step-5-optionally-configure-the-domain)
|
||
|
||
You can configure a custom domain with GitHub Pages by adding a `CNAME` file to the `public/` folder.
|
||
|
||
Your CNAME file should look like this:
|
||
|
||
`mywebsite.com` |