A few weeks ago, Kinsta, a major player in the cloud hosting industry, announced that they are now offering free static site hosting. This is a pretty big deal, especially for those watching the pennies but would like a place to host their websites or portfolio completely free (if you aren’t using any kind of database, of course).
This Host Your Website for Free With Kinsta tutorial requires websites sans database 🙅🏻♂️, only using HTML, CSS & JavaScript. Gatsby, and other static site generators are fine also.
Previously, I’ve shared on this site that my websites are hosted with Guru, and I’ve been extremely satisfied with their service. However, the recent announcement by Kinsta about their free static site hosting caught my attention. So, I decided to put it to the test – to see just how simple it is to set up a website from scratch and to verify if their free hosting is truly free.
If this piques your interest, stick around. I’ll guide you through the process of hosting a static website with Kinsta, from the initial setup with Github, to adding a custom domain, to going live.
Table of Contents
Ok, Let’s save some coin and learn how to host your website for free with Kinsta!
1. Sign up to Kinsta
If you already have a Kinsta account, you can skip this part, log in, and continue to the next step.
If you are new to Kinsta, You can sign up and create an account here, with the following methods:
- Github
- Gitlab
- Bitbucket
- Good ol’ fashioned name / email / password.
I’ll be signing up with email and password.
2. Create a Static Site
Once you’ve signed up, the next screen you’ll encounter is the Kinsta dashboard. Here you’ll just need to navigate into the Static site area, by clicking Create a static site button.
3. Connect Your Git Provider
The next step is to hook up your Git service. You can choose between Github, Bitbucket, and Gitlab.
In this tutorial, I’ll be connecting to Github, and assume the majority of you will be using the same service. The process should be similar for Bitbucket and Gitlab.
After you click the Connect git provider button, You’ll be brought to an authorisation screen where you will need to give permission to allow Kinsta to connect to your Github account.
Click the Authorize MyKinsta button.
4. Edit Github Permissions & Choose Repository
After authorising MyKinsta, the next page that you will be taken to is the Select branch area. Here you will need to select your Github repo, and branch to use for your static site.
When you open up the dropdown menu to select your Github repo, you will need to first select the Edit Github permissions option.
Once you do that, the next Github page you will be taken to will install MyKinsta on your Github account and allow you to select what repositories you would like MyKinsta associated with.
I chose All repositories but you may want to restrict MyKinsta to select specific repositories. Once I selected All repositories, I clicked the install button.
Now, the next part was a tad fiddly. Once I selected my repos and installed MyKinsta. I had to manually go back to Kinsta and refresh the page to see my repos in the dropdown menu. Not a big deal overall, but something to note.
Once the page was refreshed, I could now see my Github repositories in the dropdown menu.
I chose my static-website repo, selected the main branch, checked the Automatic deployment on commit option, and named this static site… static-website – original, I know.
5. Build Settings
Next up, you are presented with the options to add a build command, Node version, and a Publish directory. I didn’t choose any of these, as this project doesn’t require them. But if you are using a static site generator like Gatsby, these may be filled in for you.
Right, let’s click the Create site button.
6. Deploying Website & We are Live!
The deployment will take a few seconds to run, and then you can view your new shiny website, by clicking the Visit Site button.
And here is my beautiful website, live on the internets for anybody to visit!
That wasn’t too bad eh? We’ve only spent a few minutes to get up and running and have a live website.
But… the URL that was generated for us is not exactly user friendly, is it?
https://static-website-pgxlo.kinsta.page/
Maybe we should add a custom domain… 🤔
7. Let’s Hook Up a Custom Domain name!
Let’s hook up a custom domain to our Kinsta static site and really show the world that we’re a serious company!
For the purposes of this tutorial, I’ve purchased a domain to reflect my static website:
http://mysupercoolstatic.website/
I’ve used Porkbun to register the domain and will be tweaking the DNS here to connect My Super Cool Static Website as a custom domain.
7.1. Add Your Domain Name to Your Static Site
Firstly, make sure you are in the correct static site area where we’ll be adding a custom domain. Above is the site that we’ve created previously. When I navigate into the site, the next page has a few links in the left sidebar. We want to click into Domains. Once in this Domains area, we then click the Add domain button.
After clicking the Add domain on the previous screen, you will be presented with this modal pop-up. Enter your domain name that you would like to connect and use for your static website. Again, I will be using mysupercoolstatic.website.
Once your domain name has been entered, you will need to click the Add domain button.
7.2. Verify Your Domain With Kinsta By Adding TXT Records
Now, we need to verify our domain name and connect some DNS records to our host for Kinsta. We can see here, Kinsta gives us two TXT records (name/value) to add to our domain’s records.
7.3. Add TXT to Domain’s DNS Records
Let’s log into our domain name registrar (or your host if you manage your DNs records here) – in my case Porkbun and set these up now.
Here, I have added both Kinsta TXT records.
And when saved, I can see that they have been added successfully.
7.4 OK, I’ve Done That
Now we just ned to click the OK, I’ve done that button.
7.5 Point Domain With A Record
The next step will bring you along to the point domain screen. Here, we need to note the A record name/host @ and the value IP address which is 162.159.153.245.
Again, let’s add this record to our DNS records, but this instead of using a TXT record, we have to add/alter the A record.
One thing to note here, is that when I tried to add in the A record the for the first time, an error message was displayed, stating that I am not allowed to create an A record as the CNAME has the same domain. All I did was delete Porkbun’s default CNAME and Alias records, and I was good to go, adding the A record again.
Below is what my Domain’s DNS records look like with new Kinsta A record now.
Back in Kinsta, click again on the OK, I’ve done that button.
And we get a little spinning loader beside the Point domain tab. Things are happening! The text says that the domain may take up to 24 hours to be verified but in reality, this should only take a few minutes.
After waiting for a few seconds, I can see that my website is now live!
7.6. Make Custom Domain Primary Domain
the last thing to do here is make our custom domain the primary domain name.
In the domains area, we click the three dots to the right hand side of our custom domain name, and then select Make Primary Domain.
You will be then prompted this screen. Just click the Make primary button, and you’re all set!
8. Host Your Website for Free with Kinsta Conclusion
Congratulations, if you’ve followed this guide successfully, you should have your website live on in the interwebs, and maybe even with a custom domain! I do hope more people take advantage of this amazing offer to host your website for free with Kinsta.
