Free Custom domain on GitHub pages with cloudflare
How to host your own frontend with a custom domain for free
Let's build a React app, and host it on GitHub pages with our own free custom domain
Hello everyone!
While I have seen multiple separate articles about how to host your own app with GitHub pages, I have yet to see an article guiding through the whole process of creating the repository, deploying the code, getting your own domain, and then setting it on your own project. So here you go!
To follow this article you'll need:
- A GitHub account
- Your own custom domain (I'll be using Freenom to get my own for free)
- A Cloudflare account in order to set up your custom domain
Got it all? So let's dive in!
Base state
In order to have more focus on this article, we are taking some assumptions at the starting point. So we are having:
- A GitHub repository called example-custom-domain
- An app generated using create-react-app
- The gh-pages NPM package is installed with both deploy and pre-deploy tasks configured so that it can be deployed to GH pages from the start
- The homepage is being set to /example-custom-domain in package.json, so it can render create-react-app
You can see the code of the base state here
Obtaining your own domain
There are multiple ways to get your own domains, for example with websites like godaddy, which in turn could help you set up other things like your own custom email address and server. However, sometimes you do not want or need a paid domain. so a free alternative comes in handy. In this case, you can use Freenom.
In order to get your own domain with Freenom, you'll need to create an account. Fortunately, Freenom supports login with socials so this step can only take you a couple of seconds
Once your account is created, you can now search for your domain. In my case, I'm using the domain example-custom-domain, which matches the name of my repo and provides the following options:
You can pick any of those first 5 as free domains, while the ones below will have a cost per year. Since I'm looking at only free ones, I'll be picking example-custom-domain.tk. As you can see in the image below, I tried first to go example-custom-domain.ga but it was unavailable so I picked another one
Once you're good to go press checkout (green top right button) and you should be forwarded to the following screen:
The default of the domain is 3 months, but it can be extended up to 12 months for free, so we can extend that. We will also configure later DNS rules and domain forwarding, so you can ignore those buttons for now.
Once you press the continue button the following screen will appear:
If everything matches what you expect, press the Complete Order button.
Done! Now you have your own domain, which we can use to set up our app on Github pages
Configuring DNS rules and security
While Freenom provides some flexibility in how to set your DNS rules, you can take advantage of other services to customize your domain, such as Cloudflare. Cloudflare is an application used in many enterprise-level applications with a proven track record of protecting against denial of server attacks as well as ensuring the security of your domain
Once you create an account with Cloudflare and validate your email we can start adding our new domain to it. Example image below:
Click on the top-right to add your domain. The following image should appear.
Choose the free plan and click on Get started. Cloudflare should now show that you need to remove the nameservers from Freenom and use the cloudflare ones. Images are blurred as the exact values might be different at the time you do it
To do this, go back to your Freenom account, and on the top right select Services -> My Domains. Once your domain appears click on Manage domain. On the domain page, select Management tools -> Nameservers. You should have a page as shown below
Select use custom nameservers and then insert the values that Cloudflare provided. Once this is done, you're ready to proceed in Cloudflare, so you can click on Done, check nameservers
Your domain is now set using Cloudflare! Now it's time to go back to Github and set your page to use the new custom domain!
Set your custom domain on GitHub
In order to set your custom domain, you'll need to have a CNAME file in the public folder of your app. If it is not in the public folder, this file will not be taken The content of it should be just your domain name
Now you can push it to your repository and run the deploy command npm run deploy . In case you were using the default setup of GitHub pages, make sure to also remove the homepage tag in your package.json file, as it will now serve from root and not from a path.
We are almost there! For the final configurations head over to GitHub and navigate into Settings -> Pages. You should see a screen like the one below:
Now the last step! To set your domain you'll need to set the IPs to point to GitHub IPs. To do so, you'll need to go back to Cloudflare and select your domain and then DNS. Once you're there, you should see a screen like the one below
You'll need to set a CNAME rule to point to the root of your GitHub pages (mine is nadais.github.io) and set A rules, one for each IP that GitHub provides. At the time of writing, these were the IPs, but to get the most up-to-date information you should check them from Github documentation here.
And there you have it! Your custom domain is now set and secured!
Conclusion
This article is meant to work as a documentation tutorial, in case someone would also want to set up their own custom domain for their website and would like a one-stop-shop for it
As always, any comments or suggestions feel free to leave them in the comments and I'm happy to discuss them!
Hope you enjoyed it and see you at the next one!
