Hosting a Personal Webpage Built with React on Github for Free

One way to show off your React skills is by building your own personal website using React and host it for free using Github.

The first thing you need to do is create an create a React app using your terminal by typing:

create-react-app <app-folder>

Next, go to your Github account and create a new repository and link it to the app folder that you created for your React app. You can do that by typing the following in the terminal window with the application folder.

git init
git add README.md
git commit -m “first commit”
git branch -M main
git remote add origin git@github.com:<github username>/<app-folder.git
git push -u origin main

Next, we need to install gh-pages for the app. We can do that by running the following in the terminal:

npm install gh-pages — save-dev

After that we need to modify our package.json file. Add this line, but make sure that It sits within the outermost curly brackets.

“homepage”: “https://<github username>.github.io”

We also need to add these two lines into the “scripts” section within the package.json file:

“scripts”:{
“start”: “react-scripts start”,
“predeploy”: “npm run build”,
“deploy”: “gh-pages -d build”,
“build”: “react-scripts build”,
“test”: “react-scripts test”,
“eject”: “react-scripts eject”
},

Next we need to push the changes we made up to Github. We can do that by typing

git add .

Then

git commit -m “added React”

And then

git push

After that we start the deployment process by running this line in the terminal:

npm run deploy

Next, open up your browser and navigate to the repository you created for the new React app. Click on the settings tap at the repository display and then scroll down to the Github Pages section in that menu.

There is a tab called source. We need to change that to display

gh-pages branch

It should look like this after you change it:

Now our react page should now be up and running. If you use your browser and navigate to

http://<github username>.github.io

You should see your React page that we created with the default placeholder image.

The next step is to actually build your app using React code. Each time you make changes and want them to be posted on to your public site make sure you push the changes to Github and also deploy the changes by running

npm run deploy

Also, if you have a unique domain name that you own that you want to direct your website to you can do that in the source section in the settings option in your repository. To do that just type in the domain path in the Custom Domain section.

There is also an option in the settings to enable https for your website. Be sure to enable that checkbox if it is available for you.