Deploying a Project to Github Pages

This is more of a reminder for myself in case I forget. Say you create a project and push it onto Github. The next thing you would probably want to do is have a demo page up.

First, install gh-pages from npm. In your terminal, run:

npm install gh-pages --save-dev

Now create and set up a directory that contains the demo. We can call the directory anything — let’s just call it /build.

Next, add the following line to your package.json and make sure to swap yourusername and your-app-name with your own:

"homepage": "https://yourusername.github.io/your-app-name",

While you’re still there, add this script to your package.json as well:

"scripts": {
    // add following line
    "deploy": "gh-pages -d build"
  },

If you’re looking to deploy a create-react-app project, add this instead:

"scripts": {
    // add the following lines
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
  },

All you now have to do is run this command in your terminal:

npm run deploy

That’s it! Go to https://yourusername.github.io/your-app-name to preview your project.

Hope this helps!

Leave a Reply

Your email address will not be published. Required fields are marked *