How to use Cloudflare as a CDN for your Ghost blog

As you already may have seen in a previous post, I use the cheapest droplet in Digital Ocean to host my blog site. This works really well but the specs for this droplet are not exactly high. Take into account that you also have a maximum amount of network traffic included with the droplet before you have to start paying. The included allocation is 1000GB, that is ok but what if we want to lighten the load and share that bandwidth with another free and trusted service?

This is where Cloudflare comes in. Cloudflare has a nice little free teir. It gives you the following as part of it:

• DDoS Protection
• CDN to cache static content

These 2 things are quite important. The DDoS protection protects your miniture instance from being saturated with damaging requests that may be part of a DDoS. And also by caching static content you are reducing the load and network traffic that comes with images being served from the server for every user request.

So lets get started with this little guide. First off you have to migrate your DNS to Cloudflare, you can do this by following this guide - https://support.cloudflare.com/hc/en-us/articles/205195708-Changing-your-domain-nameservers-to-Cloudflare

When that is done, to turn these two features on. Select your domain from the main welcome screen

You will be greeted with an overview, select DNS

This will load up the page that shows all your DNS entries and allows you to manage them. Here all you have to do is make sure that "Proxied" is selected for the DNS entry in question.

And that is it, it is now enabled. So what does a lookup of the DNS entry show?

nslookup blog.sim22.co.uk                                                                                                                         
Server:		192.168.1.1
Address:	192.168.1.1#53

Non-authoritative answer:
Name:	blog.sim22.co.uk
Address: 104.24.100.162
Name:	blog.sim22.co.uk
Address: 104.24.101.162
Name:	blog.sim22.co.uk
Address: 172.67.185.129

It now shows that the entry resolves to 3 IPs owned by Cloudflare, it no longer goes directly to the origin (the droplet). Cloudflare will now handle the bulk of the requests. Unless something has not been cached which in turn it will retrieve from the origin.

I would recommend the following settings too within Cloudflare.

In SSL/TLS:

Overview

Select > Full (Strict)

Edge Certificates

Minimum TLS Version: 1.1

Opportunistic Encryption: Enabled

TLS 1.3: Enabled

Automatic HTTPs Rewrites: Enabled

In Firewall:

Settings

Security level: Medium

In Speed

Optimization

Auto Minify: Select all 3 (JS,CSS,HTML)

Brotli: Enabled

Rocket Loader: Enabled

In Caching

Configuration

Caching Level: Standard

Browser Cache TTL: 12 Hours

Now that is complete there is one final change that you need to do. But this time on the nginx configuration for your droplet. By default some file types will not be cached, you have to tell Cloudflare that they are cacheable. Add the below to the top of your file and restart nginx.

# Expires map
map $sent_http_content_type $expires {
    default                    off;
    text/html                  epoch;
    text/css                   max;
    application/javascript     max;
    ~image/                    max;
    image/png                  max;
    image/jpg                  max;
    image/ico                  max;
    image/jpeg                 max;
    image/gif                  max;
}

sudo service nginx restart

And that is that, to see if it is working, open up developer tools in your preferred browser and navigate to your site. In the network tab if you look at one of the images you should see this, it shows that you loaded a cached version of the image from cloudflare and you did not retrieve it directly from the origin.

You can now run some tests at https://webpagetest.org/ to check if the caching is working.

That is all for today, hope this has helped you out.