Host your React-based personal website with GitHub, Netlify, and a custom domain and save money
Some time ago I had my personal website on a famous Italian hosting provider. I was using Hugo to build my static website with a simple blog section and the old-style FTP to upload those files. Suddenly I remembered that we are no longer in 2010. There are better and more secure solutions to the setup I had and so I decided to make some changes. After reading this post you’ll be able to host your personal website on a custom domain using Netlify and GitHub. If you are lucky enough to find the .com domain you are looking for you may be able to host your website with just a dollar a year since both Netlify and GitHub have free tiers (and for a simple personal website they are enough).
I’ll use my personal website as an example for this guide.
1. Create your website
First things first. You need to have something to host. I made my website using React, but you can use whatever technology you want. The only important thing is that it should be something that needs to be built (like React, Hugo, Next, Gatsby, and so on). That’s because we are going to host it on GitHub as a private (or even public if you don’t have any problem in sharing the source code of your website) repository. I did not mention Jekyll because GitHub allows you to easily manage a Jekyll website without the usage of Netlify, but that’s not the scope of this guide.
So this is more of a prerequisite than a piece of the guide, if you still need to code your website go back to your editor and come back here once you are done! This is a screenshot of my website hosted at thelicato.io:
2. Host your source code on GitHub
We all know GitHub (if you don’t, well you should), and this part is actually very trivial. As I said before I developed a simple web app with React, so the only thing to do is create a repo for your source code. You can either make it public or private, it is your choice since Netlify does not have a problem with that.
3. Deploy on Netlify
Once you have your source code on GitHub you can create a free account (you may also use SSO and login with your GitHub account). After a quick account setup and team creation you have to go to Sites and click on Add new site > Import an existing project:
As you can see I already have my website up and running listed. After that you have to connect to your Git provider; you may also use Gitlab or Bitbucket instead of GitHub if you prefer them. One thing I suggest you is to give Netlify access only to the repo you want to deploy and not full access to your account just for security reasons. After selecting the repo you want to deploy:
In this section you have to select the branch, the base directory, the build command and the publish directory. If don’t know what these means don’t worry, Netlify will automatically fill those fields for you. If you do know what that means you should not have a problem configuring them if you made some changes to the default build workflow. Just click on Deploy site and you will have your web application deployed and ready to welcome users. You will have a domain like <yourwebappname>.netlify.app
That’s not the best, so here comes the interesting part: connecting your own domain.
4. Add your personal domain
Let’s suppose you bought a domain like peterwiener.io and you want to deploy the Netlify app on that domain. Netlify makes this process the easiest thing ever. Just go to your deployed website and then go to Site settings > Domain management. Usually you want to add two domains:
- peterwiener.io
- www.peterwiener.io
Add both of them and choose the one you prefer as the primary domain.
That’s not over yet. You have to tell your domain provider that your domain is an alias for <yourwebapplication>.netlify.app. For example I use namecheap and I just needed to add an ALIAS record that points thelicato.io to thelicato.netlify.app.
Alternatively as a fallback method you can also add an A record to the IP address of your webapp (those info including the specific IP address are available once you add the domain even though the ALIAS method should work).
thelicato.io ALIAS thelicato.netlify.appWait like 10/15 minutes for the DNS changes to take place and you will have your peterwiener.io website up & running!
5. Redirect the Netlify domain to your personal domain
There is one last thing to fix though. The default website will still be available at <yourwebapplication>.netlify.app. I did not like that and I wanted the netlify.app domain to be redirected to thelicato.io. This can be easily done by adding a configuration file to our codebase called netlify.toml in the main directory of our deployed branch. This configuration file is parsed by Netlify during the build of your website and can contain a lot of different kind of configuration settings. This is my netlify.toml file:
# Redirect default Netlify subdomain to primary domain [[redirects]]
from = "https://thelicato.netlify.app/*" to = "https://thelicato.io"
status = 301
force = true #COMMENT: ensure that we always redirect
[[redirects]]
from = "/*"
to = "https://thelicato.io"
status = 301
force = falseAs you can see I have two rules:
- The first one is the one we actually need to gracefully redirect with a 301 response from thelicato.netlify.app to thelicato.io. You can copy this rule and put it in your netlify.toml file for the same purpose.
- The second rule redirect every other path to the homepage of my website. I have this rule because the website I created is a single page application and there is nothing other than the homepage. The main reason is that I wanted to avoid 404 errors for other paths since everything I want to show is one the homepage.
Conclusions
With this kind of setup I managed to have my website up & running on a custom domain easily and, moreover, without buying a hosting. So I saved some money and I have a fine website managed by Netlify. The coolest thing is that by enabling the automatic deploy everytime I make a new push on my repo it gets automatically built and deployed in a matter of minutes: kudos to Netlify!
