Welcome back to my place. As promised here is the very first proper technical blog post covering how I got this site up and running in the first place.
I will be covering how to host a static website like this one on minimal hardware, specifically on Google Cloud services.
Why you would want this
I think it’s great to have your own dedicated corner of the internet that you have complete control over with no platform or distribution to bother or worry you. It’s a place where you can ramble on about your thoughts and leave it for prosperity (or as long as the hosting infrastructure remains).
Pre-requisites
To follow this, you need to have your own domain using a domain registrar like GoDaddy.
And a static website you wish to host.
It can be as simple as a single .html
file, or as complex as you’d like it.
This one for example, as alluded to at the footer of this page, is built using Hugo.
Since we’re using google cloud services, it’s expected you’d have your own account as well.
Setting up
Now that you’re the proud owner of your very own domain, it’s time to put it to good use.
What services you’ll be needing from Google Cloud Services
Since this is a static website, you will not need a VM or any compute for that matter.
All you need is simply a place to store your website’s HTML
and CSS
files for users to access through a DNS query and a web server to push these files to the client.
To that end, all we need is a Storage bucket to store the website’s files. Navigate to the cloud storage panel and follow the instructions to create a new bucket.
Hosting the static files
These buckets have a very convenient feature of having a built-in minimal web server for serving static files through the network.
First, we need to push our static website’s source on there.
We can use a deploy tool like those built in hugo or simply copy your files over to the bucket using scp
/rsync
and an ssh connection
.
Even simpler, would be using Google’s gcloud
and gsutil
command line tool.
To authenticate with gcloud
, fist login with:
gcloud auth login
Then you can push your files to the bucket with:
gsutil cp -r content gs://bucket_name
Configuring the bucket
Now that the static website is in the bucket, we can setup the minimal web server by clicking on the kebab menu to the right of the bucket field in the bucket list and selecting “Edit Website Configuration”.
Then you’re prompted to enter the path to your index.html
and 404.html
files so it knows what it should serve to users.
Users still cannot access the resource. We need to configure permissions to allow any connection over the internet to be able to access the resource.
In the permissions tab of the bucket UI, add a new permission and select allUsers
as the new principals and Storage Object Viewer
as the new role.
Putting the S
in https://
So far if you apply these steps, you’ll have a working website you can access over http. But this is still insecure. For anything to be on the internet, you need to have an SSL certificate for it.
Unfortunately, to create such a secure connection you do need some form of compute in the serving process. To that end, we can employ a load balancer.
Google Cloud load balancer
Google Cloud’s load balancer allows you to use minimal hardware to manage the SSL certificate and securely establish a connection between the client and the server.
Follow the interface to create a new load balancer and SSL certificate. Make sure to set your domain name as the certificate’s domain name and to set the bucket you created earlier as the backend.
Upon completing this, you will be provided with an IP address for the new load balancer.
Enter this IP address into your domain registrar’s DNS records of type A
or AAAA
appropriately in case of IPv4
and IPv6
respectively.
Using this IP address create 2 entries of name www
and @
so it routes properly.
Deploying
The easiest method to deploy further changes is to simply make your desired changes to the website and copy the changes over to the bucket.
Total costs
With this, you are hosting a static website for less than $1 per month (that did not turn out to be the case, check my follow up article)
Of course, excluding the cost of domain registration.
What’s next
Now that you have a website up, consider using your domain for a professional email address.
Maybe you can try automating the deployment of your website with CI/CD. Perhaps this can be a future blog post here.
TL;DR
- Buy a domain.
- Setup a google cloud bucket.
- Push your static website to the bucket.
- Configure the bucket to serve the static website.
- Setup a load balancer and SSL certificate.
- Add a domain record to the DNS zone for load balancer.
- (optional) Use Cloudflare for DDos protection and management.
Sources and related reading
- https://cloud.google.com/storage/docs/creating-buckets
- https://cloud.google.com/storage/docs/hosting-static-website
- https://developers.cloudflare.com/dns/
- Assuming you are using the alternate cloudflare configuration.
Please don’t hesitate to reach out if you have any questions or corrections.