Steps to Deploy your React App on Github Pages

Today I will be sharing a topic that took me a while to master and if I want to be honest, I still struggle sometimes with this but I have decided to document it here so that the next time i'm stuck again, I can always refer to these steps. Isn't it so beautiful to know that you can always refer to your own blog whenever you are stuck? This is why I love everything about blogging and documenting your journey. With no further ado, let's get right into it.

Disclaimer: This article assumes that you already know the basics of how to create a new repository on GitHub and also how to clone a repository. If you are a beginner and need an introduction to Git or Github, you can check my article here

That being said, here are 10 steps that you can follow to deploy your react project on Github

Step 1: Create a new repository on GitHub and push your project into it

Step 2: Clone the project to your local directory

Step 3: Open the cloned project on your VS code

Step 4: In the VS code, open your terminal (check your present working directory to be sure of the directory you are working with)

Step 5: Open your package.json file and add the homepage field to the top level

"homepage":"https://yourusername.github.io/name_of_your_repo",

Step 6: Install gh-pages

npm install --save gh-pages

Step 7: Add deploy to "scripts" in the package.json file

"scripts":{

    "predeploy": "npm run build",

    "deploy": "gh-pages -d build",

}

* The predeploy script will run automatically before deploy runs

Step 8: Deploy your website by running

npm run deploy

* This command will generate a production build and deploy your project to your GitHub pages

(This was updated on the 6th of September 2022)

For steps 9 & 10, if you follow the steps and you cannot find the link (I couldn't find it as of today which I think it's an update). The link to your deployed application is the same as in step 5. So just copy the link as in the example below and your website should be up if you did steps 1-8 correctly

"https://yourusername.github.io/name_of_your_repo"

Step 9: Open your Github, click on "setting", scroll down to pages, you will see a link to your deployed website

Step 10: Copy the link to your deployed project and share it with your friends

That will be all from today. I hope these steps were easy for your to follow. Thank you for stopping by in my little corner today and I hope to see you soon...✌️

Food for Thought:- "Learning to write programs stretches your mind and helps you think better, creates a way of thinking about things that I think is helpful in all domains.”~ Bill Gates

HAPPY CODING!!! ❤️