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.
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.