Free Self-Hosted Ghost Blog Part III (GCP Cloud Storage and Cloudflare CDN)

This is a continuation from Free Self-Hosted Ghost Blog Part-II (GCP Load Balancer, Let’s Encrypt and Cloudflare CDN)

Alright! Let’s get this over with. I promise this is the last, and perhaps the most technically challenging one. So, brace yourself :D

The goal of the post is to show you how to use the free GCP Cloud Storage (analogous to AWS S3) to work together with Cloudflare free tier to achieve global CDN. Again, free is the keyword!

Setting up Google Cloud Storage

First, you need to create a bucket. There are some limitations to the GCP Free tier to watch out for.

• Regional
• In USA but not in North Virginia (us-east4)

So it’s important to be careful when creating one. Pay attention to the red boxes below to select the right settings. For the bucket name you may want to use the domain you would like to serve the static contents from for identification reason. We will later use the Cloudflare to cache the contents. In my case I used cdn.steven.news. You can pick your subdomain you feel the best.

Once completed, you can start uploading the static contents to the bucket. And remember to set them to public so we can reference them later

To confirm everything works, visit the link by clicking into Public link, and you should be directed to a new page like https://storage.googleapis.com/cdn.steven.news/self-hosted-ghost-blog-on-gcp-free-tier/1.png

Please note cdn.steven.news is the bucket name as well as the domain will be serving the contents from. I will show you how to allow TLS/HTTPS connection to it from a Load Balancer in the next section.

Setting up Load Balancer to Cloud Storage

Remember how to set up a load balancer in the previous post? Today we are going to extend it to cover CDN loads by adding a new backend service (to Google Cloud Storage), and frontend service (to take traffics to CDN) and a forwarding rule matching these two.

Creating a new backend service that connects to the Google Storage is quite straightforward. You will find the option as shown in the screenshot

Creating a new frontend service is similar to the previous post too. Remember to use https and we could reuse the previously generated tls certificate

Okay, now we need to think about how to get traffic that goes to cdn.steven.news/<path to resource> to the right path in Google Cloud Storage. This is the path rule you will need to set in the load balancer

This rule will take whatever goes after cdn.steven.news and append it to Cloud Storage Bucket path, in this case it's cdn.steven.news (since the bucket name and domain name are the same)

Then we are here! You should have a working CDN load balanced with HTTPS on. How cool is that, but it doesn’t stop here. In the next section I will show you how to further cache them with Cloudflare to achieve global CDN (for free)

Setting up Cloudflare CDN

This part is going to be easy. Simply add a new DNS record that points cdn.steven.news to the new IP address generated by the frontend service generated by the load balancer and you are all set! But remember to toggle the orange cloud on to take advantage of the awesome cache provide by Cloudflare!

The End

I hope this series is useful in learning some basic techniques with GCP, Cloudflare and Let’s Encrypt. I know it was fun for me to learn all these with the added bonus of setting up my own blog. If you have any questions at all, please feel free to ping me up on Twitter!

Next post I’d like to talk a bit about Ethereum and how to create a Dapps. Stay tuned!

Cheers!

Originally published at steven.news on September 14, 2017.