Deploy react-static Site to GitHub Pages

I ran into some issues when trying to deploy my react-static app to Github pages. I wrote down a guide to help you guys if you’re struggling. Read on!

Step 1: Set up template app

Go to react-static and follow the instructions on how to set up a basic app in their README.md.

Step 2: Add deploy script

To deploy this to github pages easily, you can create an npm command.

npm install --save-dev gh-pages

Then add the following to your package.json under scripts:

 {
    // Some other stuff...
    "scripts": {
         // Other scripts here...
         "predeploy": "npm run build",
         "deploy": "gh-pages -d dist"
     }
}

Step 3: Deploy

You can now try deploying you app and see it live at https://yourusername.github.io/repositoryname.

Run: npm run deploy.

However, if you click one of the links (Blog for example) the path won’t be relative to your base path, and you’ll get a 404 error. Also, the app won’t be styled at all because it will fail to fetch the resources (due to the same relative path issue).

Step 4: Fix routing issue

The solution is to add the following to your static.config.js file in the root directory:

 export default {
     siteRoot: "https://yourusername.github.io",
     basePath: "repositoryname",

    // Other configs...
}

Step 5: Yay it works!

Now you can try to run the deploy again, and you’ll see that the problem is solved. You might need to run a hard reload in the browser to clear the cache and see the changes. And voilĂ , it works!

Leave a Reply