Setting up their service is pretty straightforward. Move your domain to their nameservers and select the subdomains that have to be protected. Important to note: Using the CDN routes all traffic to your website through the Cloudflare network. This means that you're basically allowing them to do a man-in-the-middle attack on your visitors. This article is aimed at static websites, so it doesn't really matter, but it's something to keep in mind.
By default, Cloudflare caches resources that are supposed to be static on most websites. This includes images, stylesheets and javascripts. Your server is contacted for every pageview, but most assets are offloaded to their edge servers. This is great for a dynamic website, as we want to make sure that visitors see their personalized version of the website. Static websites, however, may benefit from being cached completely.
First things first. In the Cloudflare site settings page, we see three cache levels:
Aggressive: The complete URL is used to identify a resource.
http://example.com/image.png?including=query-string
Simplified: The query string is ignored when identifying a resource.
http://example.com/image.png?ignore=this
Basic: Only caches resources without query string.
http://example.com/image.png
The cache level setting only applies to those resources that Cloudflare decided to cache. I usually set this to Aggressive for static websites, as it allows me to change a hash in the query string to invalidate the cache when updating a page.
A second interesting setting is the minimum expire TTL, this allows you to overwrite the expire time in the cache-control header.
When setting up a static website, I expect these headers to be set correctly on the origin server, but this may come in handy when you have little control.
The setting we're looking for is hidden deeper in the Cloudflare admin panel. In order to make their CDN cache everything, you need to create a page rule. Page rules define custom settings for a given subset of your website. Click the gear icon next to your website and select Page Rules. Between the rule settings an item named Custom caching appears. Set this to Cache everything to, well, cache everything. This only applies to the URL pattern specified for the page rule.
Two other interesting settings:
Edge cache expire TTL: Specifies how long a resource has to be cached on the Cloudflare edge servers. The longer they are allowed to cache it, the more bandwidth you'll save. Decide how big this value may be depending on how much you update your static website. You may always clear their edge cache using the administration panel. (This setting is only available when Cache everything is selected.)
Browser cache expire TTL: This setting overwrites the minimum expire TTL from the global site settings, for this specific URL pattern.
Try it out! Depending on the number of visitors, caching everything may save quite a lot of bandwidth! If you have only a few visitors per month, you may not even see it, especially when they are geographically distributed. It looks like Cloudflare does not share resources between edge servers. If a resource is not available in the POP closest to your visitor, it contacts the your server.
]]>