# 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:

![https://i.imgur.com/HUjEr9l.png](https://i.imgur.com/HUjEr9l.png)

### 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`