Skip to content

Deploy to GitHub Pages

Description

We can build our project and deploy it to GitHub pages for free.

To use GitHub, then you will need to create a GitHub account.

Before deploying, we need to build a production version of our application. The production version will have a smaller bundle file size than the development version. It also won't contain any hot module reloading scripts.

To build the production version, run

npm run build

It will take longer to build than from what you've seen when running npm start.

You can test that the production version runs in your local browser by typing,

serve -s build

Note that if you are using PowerShell, you may need to type

serve.cmd -s build

Open your browser to http://localhost:3000

If your application is running ok, then we can proceed to deploy it to GitHub pages.

You should create a new repository in GitHub and name it whatever you want.

You should clone your new repository locally. E.g, if you created a repo named my-project then, go to a new location on your drive and run,

https://github.com/your-user-name/my-project.git

Copy the ./build/ folder from your development project, with all its contents, to your new local repository that you just cloned.

If your repo was named my-project, then you should have a folder structure similar to

|-- my-project
    |-- build
        |-- img
        |-- models
        index.html

You will have more or less files and folders similar to this depending on what is actually included in your own project.

Check again that you can see your project working in the browser.

CD into your local cloned my-project folder,

cd my-project

And run

serve -s build

Or if you are using PowerShell,

serve.cmd -s build

If you can see that it is working in the browser, then it's time to install the gh-pages library.

npm install gh-pages --save-dev

Open up the package.json file and add a new option for homepage and a new scripts option for deploy. E.g.,

{
...
  "homepage": ".",
  ...
  "scripts": {
      ...
      "deploy": "gh-pages -d build"
  },
...

Note that your package.json file could be very varied. I have added the ... above just to indicate that you may have some other lines of text there already. Don't copy the ... text. Only add the homepage URL and deploy line into the scripts node.

You can now run

npm run deploy

If all is successful, after a few moments your build folder will be uploaded into to your new GitHub repository, into a branch named gh-pages. You can now visit it using the URL,

https://your-username.github.io/my-project/

If you are having trouble getting this to work, then check my project and GitHub links below to compare how I have applied the above instructions.

Working Example : https://sean-bradley.github.io/React-Three-Fiber-Boilerplate/

gh-pages branch : https://github.com/Sean-Bradley/React-Three-Fiber-Boilerplate/tree/gh-pages

Comments