How to Host a React App on GitHub Pages with a Custom Domain.

Share your love

Many platforms allow us to Host a React App for free that developers like us need most for resume and portfolio websites to showcase our talent to the world and GitHub Pages is one of them.

Github, as we know is a website and a Cloud Service Provider which helps many developers save their code online, share it with other people, and can have a log of everything they have done up till now with that code.

GitHub has its hosting service that is called GitHub Pages. According to the official documentation – “GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub”.

Hosting a simple HTML, CSS website is very easy, but hosting a react app is a whole different story. For hosting a react app, you need to have a production version of it, and hosting on GitHub is no exception.

This blog will only tell us how to host our React Apps using GitHub Pages for free, assuming that you have prior knowledge of Github like making a repository on GitHub and adding your Content on it, as it will not explain that in detail.

Index

  1.  Creating a repository and storing the source code in it
  2.  Adding HomePage in our App 
  3.  Installing GitHub Pages
  4.  Deploying the App
  5.  Adding a Custom Domain

Step I – Creating a Repository and storing the source code in it

As told already, this blog will only focus on deploying our React App on GitHub for free and with a custom domain and will not explain working on GitHub from scratch for that, visit this blog here.

Step II – Adding HomePage in our App.

For starters, let’s add the homepage link to our App through which the App will be available and accessible by others.

HomePage Link

We just have to add the above-given code of the home page in our package.json file like this –

HomePage link

This link can be shared by us to others for showing off our works but only after it’s deployed.

There are certain changes that you have to make in the above link to make it active – 

  1.  Replace ‘myusername’ with your ‘name’ 
  2. Replace ‘my-app’ with the name of the App
Username and the App’s name

Step III – Inserting GitHub Pages

Installing GitHub Pages is very important as this way we can have it as one of our dependencies in the package.json file. 

Choose the code that best describes the type of package you are using either NPM or Yarn. We can make it one of our dependencies with any method.

Links to install gh-pages

After installing gh-pages, check for it in the package.json file 

gh-pages version

Step IV – Deploying the App

The deployment phase starts with the addition of two lines of code in our package.json file as shown – 

Neededpieces of code

The lines with the star at the beginning will be added in the same way as shown.

npm run deploy

The following command will make a production version of our App which will be called build and will be there in our App directory.

This folder contains the static code of our App that will be deployed and hosted by GitHub.

Build folder

Finally, the moment has come when we will see our deployed App. But before that, we have to check whether GitHub pages have been selected in our project on GitHub. 

Go to the Settings, select Pages from the left menu in the GitHub Repo. There will be a link available for us that contains the hosted site. Just wait for some time and click it to see our deployed site.

GitHub’s Page Section – link at which our App has been hosted

In most cases, this step is automatically completed but for some reason, if that is not the case, do it manually by selecting the gh-pages branch as shown in the above image.

If there are changes to the site after deployment, run the same command npm run deploy after saving and pushing the changes to the repo, the site with all those changes will be hosted.

Step V – Adding a Custom Domain

We have our site published and ready to be shared for showcasing our skills, but there is still one problem – the domain. Our site has the default domain name given to us by Github.

GitHub’s provided a link for our Hosted App

There is an option where we can change that link and add our custom domain which we have bought from any hosting provider like GoDaddy, Hostinger, etc., and add that domain name in our repo and on GitHub pages to let Github Know that we are giving our site a custom domain.

This blog will not cover the part where you buy a domain and set it for hosting on GitHub, but you can read about it here, it will only cover the rest of the steps that include how to integrate how domain with your site.

Step V(A) – Adding a CNAME file  

In our GitHub repo find an option to add file in the root folder, and then create a new file.

GitHub’s root directory

Enter the file name as CNAME and write your custom domain name in the text box provided below, and hit the commit new file button without doing anything else.

GitHub’s root directory where we have to add the CNAME file

Here example.com will be replaced by your custom domain name.

Step V(B) – Adding the Custom Domain Name in GitHub Pages

Head towards the settings page of our GitHub repo and select the Pages tab from the left sidebar.

GitHub Pages
Github Page section – we can add a custom domain from here

This CNAME file can only contain one domain and should be the bare minimum of your URL, like www.example.com or example.com rather than http://example.com.

Here, you will see a text box for adding a custom domain. Enter the domain name and click save and also check the Enforce HTTPS box as it will provide a free SSL certificate but may take some time depending upon the provider.

With this our App is now hosted with a custom domain name and a free SSL certificate on the web and now can be accessed by anyone around the world.

Share your love

22 Comments

  1. I do agree with all of the concepts you’ve presented in your post. They’re very convincing and can certainly work. Still, the posts are very quick for beginners. Could you please extend them a bit from next time? Thank you for the post.

  2. Hi there, I found your web site by means of Google while searching for a related matter, your website came up,
    it seems good. I’ve bookmarked it in my google bookmarks.

    Hello there, just was alert to your blog via Google, and found that it’s really informative.

    I am going to be careful for brussels. I will appreciate if you happen to proceed this
    in future. Numerous other folks shall be benefited out of your writing.
    Cheers!

  3. Thanks for any other informative web site. The
    place else could I get that kind of info written in such an ideal manner?
    I have a undertaking that I’m simply now working on, and I’ve
    been at the glance out for such information.

  4. What’s up, all is going perfectly here and ofcourse
    every one is sharing information, that’s truly excellent, keep up writing.

  5. Fantastic website you have here but I was wondering if
    you knew of any user discussion forums that cover the same topics
    discussed in this article? I’d really like to be a part of
    community where I can get feed-back from other knowledgeable individuals
    that share the same interest. If you have any recommendations,
    please let me know. Many thanks!

    • Well, I don’t know any forums other than StackOverflow and quora, but while searching online for the same, I came across some of them – you can check them out.

      Freecodecamp Forum – very helpful for developers
      Digital Point
      Coffee cup – mainly for designers
      The SitePoint Forum
      Dev.to – I used this all the time

      These are some of the forums I have either heard of or used as you can see and I am pretty satisfied with the results you can even follow me on freecodecamp blogs and dev.to, publish my blogs there as well.

  6. Hey there terrific website! Does running a blog such as this
    take a massive amount work? I have virtually no expertise in programming but I had been hoping to start
    my own blog in the near future. Anyways, should you have any ideas or techniques for new blog owners please share.
    I know this is off subject however I just wanted to ask.
    Kudos!

  7. I was wondering if you ever considered changing the page layout of your website?
    Its very well written; I love what youve got to say. But maybe you could a
    little more in the way of content so people could connect with it
    better. Youve got an awful lot of text for only having one or two images.
    Maybe you could space it out better?

  8. I’m not sure where you’re getting your info, but great topic.
    I needs to spend some time learning much more or understanding
    more. Thanks for magnificent info I was looking for this information for my mission.

    • Thank You
      And if you want to follow me on twitter or on any other social media networks, links are given at the very end in the footer section of my website. You can use them.

  9. It’s nearly impossible to find knowledgeable people in this particular topic, but you seem like you know what you’re talking about! Thanks

Comments are closed.