Easily Deploy a Create React App Project to GitHub Pages

To publish a project bootstrapped with Create React App to your site on GitHub Pages, you have two options: publishing from a gh-pages branch or from master/docs.

For either method, you need to link the local repository created by Create React App to a remote on GitHub. I use GitHub Desktop (File -> Add local repository [unchecking Keep this code private] -> Publish repository), but of course you can also use the command line.

From master/docs

  1. Create a folder at your project root level (at the same level as the src and public folders) named docs. Add any file in it, like an empty .txt file, so that you can commit it (git doesn’t let you commit an empty directory). Commit/push.
  2. In your repository’s settings on GitHub, go to the GitHub Pages tab and enable, setting the source to master/docs. I suggest checking “Enforce HTTPS” as well (even though you’ll be putting https in the homepage field, the site will be insecure unless you do so).
  3. In package.json, add a homepage property to the top section (that contains “name” , etc.), which is “homepage”: “https://[yourwebsite.com]/[your-repo-name]" or “homepage”: "https://[your-user-name].github.io/[your-repo-name]/.
  4. Also in package.json, under “scripts” , change “build”: “react-scripts build” to “build”: “react-scripts build && rm -rf docs && mv build docs”. What this does: once react-scripts build is complete, if there’s already a docs folder (which there will be if you’ve already deployed using this method), it removes it and everything inside it (read more), and once that’s done, it renames the build directory created by react-scripts build that contains your site’s production (published site) -ready files (nicely bundled into the smallest possible file sizes and so forth) as docs.
  5. From your project directory (if you’re using VS Code, just do Ctrl or CMD + ` (backtick) to open an integrated terminal that starts at the root of your project), run npm run build.
  6. Commit the changes.

Using the gh-pages package

  1. In package.json, add a homepage property to the top section (that contains “name” , etc.), which is“homepage”: “https://[yourwebsite.com]/[your-repo-name]" or “homepage”: "https://[your-user-name].github.io/[your-repo-name]/.
  2. Also in package.json, under “scripts”, add “predeploy”: “npm run build” and “deploy”: “gh-pages -d build” (the -d is a command specific to the gh-pages package and is short for --dist—you can see this by running gh-pages --help). predeploy is run when you run deploy (by the `gh-pages` part of the `deploy` command). Alternatively you can just run npm run build before running deploy , but either way you need to build first.
  3. From your project directory (if you’re using VS Code, just do Ctrl or CMD + ` (backtick) to open an integrated terminal that starts at the root of your project), run npm install gh-pages.
  4. Run npm run deploy.
  5. Commit/push.

aspiring web developer | nataliecardot.com

aspiring web developer | nataliecardot.com