Few years ago I got a deal from my local hosting website. It is like a starting package with very low storage. So I bought a domain name and this low package hosting aroung 10 USD. The hosting it self has 100 MB storage size. For my day to day blogging this site is sufficient. Until one day I would like to add a lot of picture into my personal site. I realize 100 MB is not enough. So I try to create a selfhosting storage using my ROCK64 (like Raspberry PI) with Dynamic DNS. I’m able to setup the server but the problem is sometimes I cant access my personal server. I think the problem is with my local ISP and their architechture to accommodate a lot of connection. So 1 pulic IP is split into more than one customer. If I was lucky, I could access my server through Internet. Unfortunately most of the time I cant access it.
I came across with this article from Google. Then I search on the internet (using Google offcourse), on how to host Hugo static website using Google Cloud Storage. After some reading and testing finally I’m able to host my personal website using Google Cloud Storage. I will explain what I did to host my personal website using Google Cloud Storage.
1. Register to Google Cloud Platform#
First step, you need to register your google account to Google Cloud Platform. If this is your first time, they will offer a free trial with 300 USD credit for 1 year. During registration they will ask for your credit card information to make sure you are a real person. Of course it will charge you if you are using their service for more than your credit limit. After registration, I suggest you create a budgets alert (in Billing section). I set my budget to 10 USD so it will alert me if the bill accumulated on certain threshold.
2. Verify your Domain#
Second step, you need to verify your domain using Google Search Console. There are two type of verification, using your DNS setting or using URL Prefix. If you are using DNS Setting, you need to add TXT record with prepared key by Google. While URL prefix, they will crawl your website and check the content of your website. DNS setting require a lot of time to propagate so I choose the URL prefix method. This is good especially if you already using Google Analythic in your website. Once they verified your domain, you can create a storage bucket with your domain name.
3. Add WWW CNAME record#
Third step, we need to create a CNAME record in our DNS. I remove my sub domain WWW alias before creating CNAME record. After that, I create CNAME with WWW pointing to c.storage.googleapis.com. You can monitor your DNS propagation using nslookup command.
4. Manage Storage Bucket#
Forth step, I create a Storage Bucket with settings below:
Bucket Name: www.henthom.com
Where to store data: Multi-Region Asia
Default Storage Class: Standard
Access Control: Uniform
Encryption: Google-managed key
This settings cost me around 0.026 USD/GB every month. I think if your static site reach 1 GB, the it must have a hell lot of content or you just sync very big file to your website. Next you need to upload your website contentto your bucket. I’m using gsutil since it is easier to manage than using the Google Cloud Platform website. Default folder for Hugo static website final build is in public folder. So I need to sync my public folder to Google Cloud Storage using command below:
gsutil rsync -R public gs://www.henthom.com
Next, I need to update permissison in my website using command:
gsutil iam ch allUsers:objectViewer gs://www.henthom.com
After that I need to point my index page and 404 page using the command below:
gsutil web set -m index.html -e 404.html gs://www.henthom.com
I only need to set permission only once but I need to sync my website content everytime I update my website. Next, I try to open my website using www.henthom.com as my URL. The first page load without a problem (if you have the problem go check your CNAME Propegation). But the link to other page show an Internal Error page. Next step we will redirect every henthom.com request to www.henthom.com.
5. Redirect root domain to WWW#
Since my old hosting server is using apache, the easiest way to do redirection is to insert .htaccess file. Below is the setting from my .htaccess file:
RewriteEngine on
RewriteCond %{HTTP_HOST} ^henthom\.com
RewriteRule (.*) http://www.henthom.com/$1 [R=301,L]
RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /index\.html\ HTTP/
RewriteRule ^index\.html$ http://www.henthom.com/ [R=301,L]
This settings will redirect any URL request from henthom.com to www.henthom.com.
6. Conclusion#
I’m quite happy with the result. I notice some delay during webpage load especially when it load the font. On the bright side, I no longer need to worry about the storage. I hope this information help you setup your static website using Google Cloud Storage.
