Setting up Cloudflare Free CDN for Self Hosted GHOST Blog

in Tech

As discussed if my previous post about setting up this blog again for round two, one of the key reasons for having another crack at a blog was to give me a spot to document our travels and trip reports, with that, comes lots of photos.

With the idea of hosting many photos on the blog, I figured I should investigate ways to tune performance. I remember running into Cloudflare a few years ago when I was looking for another DNS provider, but never actually gave them a go. Well, it turns out that Cloudflare offers not only a free DNS service but a pretty amazing (and completely free) CDN.

What is a CDN?
A Content Delivery Network is basically a fancy way of caching the static content of websites (think images, javascript & CSS) on web servers that are closer to the end-user actually consuming the media. CDN's have become very popular as a way to speed up delivery of websites.

Whilst the concept of a CDN may sound complex and hard to setup, it is actually super easy and in the case of Cloudflare they take care of almost all of it for you and as an added bonus you get some nice additional features like SSL/HTTPS access setup for you without the need to configure SSL certificates on your own web server.

I thought I would jot down the steps I went through to get this setup for my self-hosted ghost blog. It is important to note that you need access to the configuration for you domain name registrar (GoDaddy in my case) to update the name servers for your domain. Part of the process involved my migrating all my DNS settings from Zoneedit to Cloudflare.

  1. Register for a Cloudflare account

  2. Sign in to your new Cloudflare account, you will be prompted to add your first site.

  3. Enter the root domain of your site, ie if your blog address is 'blog.bwhouse.net' then enter 'bwhouse.net' and then click scan.

  4. Once you click next Cloudflare will scan the current public DNS records for the domain and try to set them up for you. You will soon be prompted with a screen to confirm the scanned DNS settings. I strongly encourage you to double check the DNS zone configuration that Cloudflare has found. In my case, it missed 2 A records for some reason. You can manually fix any issues or add any new records. Now, this is where things get interesting. You will notice a little grey or orange cloud next to each DNS record. This is how you toggle the Cloudfare CDN services on or off for each site or subdomain you have.

  5. I personally use my domain name for many things so only wanted to enable Cloudflare's CDN network on the 'blog.bwhouse.net' subdomain. Interestingly Cloudflare had enabled it on a few other subdomains automatically. I just went down the list and turned them off, don't worry you can change this at any time if you get it wrong or want to adjust your settings.

  6. Next you need to select a plan, this is the best bit! Cloudflare offer almost all their amazing services under a free plan for personal websites/blogs.
    Cloudflare Plans

  7. After you select the free plan and click next you will be sent to your dashboard landing page letting you know you need to change your nameservers.
    Cloudflare name servers

  8. Up until now, you haven't been actually making any changes that will affect your website as you haven't actually updated your nameservers. To do this you need to log on to your registrar, this is the company that you ordered your domain name through, in my case it was GoDaddy. Once you login you should be able to update the nameservers for your domain name. This change can take up to 24 hours to take effect and until it takes affect you won't be able to get the benefits of the Cloudflare service. You can continue with the steps below so everything is ready to go once the nameserver updates have gone through.

    You can periodically check back to the 'Overview' section of the dashboard to see if your nameserver changes have gone through. You can force a re-check once every hour or so. But it seems to be pretty quick at updating once the changes actually take effect.

    Then once all is working you will see the status chance to Active.

  9. Ok now comes the fun part, let's configure the caching and acceleration services. First, you need to click on the 'Speed' icon in the top menu bar.
    Now we want to scroll down and enable 'Auto Minify' for all three options (Javascript, CSS and HTML)

    Next scroll down a little further and enable 'Rocket Loader' and set it to Automatic

  10. Now the next step is optional, but I highly recommend it. Basically, Cloudflare gives you the option to enable SSL/HTTPS access to your blog without the need to deal with SSL certificates and installing them on your web server and once again it is totally free.

    First go to the 'Crypto' section of the dashboard

    Then make sure that the SSL mode is set to 'Full' and not 'Full (Strict)', if you have an SSL certificate already installed on your local web server you can use 'Full (Strict)' and the traffic will be encrypted all the way.

    Next, scroll down and make sure that you have edge certificates for your domain listed, it can take 24 hours for these to show up, but in my experience, it is almost always instantaneous.

  11. Now if all has gone to plan you should be able to access your website/blog via HTTPS, open a new browser tab and give it a try. Note: If the status on the overview page is still 'Pending' your nameserver changes have not yet gone through so this step will not work and you want to wait before proceeding to the next step

  12. Once you have verified that you can, in fact, access your site via HTTPS, you can safely create a page rule which will tell Cloudflare to automatically re-direct all not secure HTTP requests to secure HTTPS requests. To do this you first need to click on the 'Page Rules' section of the dashboard

    Then you want to click on 'Create Page Rule', a new box will pop up and allow you to create a page rule. You want to enter the HTTP address of you site followed by the wildcard character, for me, this was 'http://blog.bwhouse.net/*' then choose the 'Always Use HTTPS' from the drop-down box and click 'Save and Deploy'

OK you are done! You are now enjoying the benifits of having your Blog cached in multiple datacenters around the globe.

Comments