Enabling Cloudflare for My Static Site

Tags:#Programming#Side Projects

Description

A Walkthrough of How I Setup Cloudflare Caching for This Site

Today, I want to share the steps I took to enable Cloudflare to cache static data and assets on this site, all using their free plan. Cloudflare's free plan is quite robust and sufficient for most static websites, this one included.

I had several reasons for using Cloudflare on this site.

Firstly, I wanted to learn more about CDNs and how to configure them. Secondly, I was concerned about performance, especially when it came to loading images, which I believed could be significantly improved with browser caching. Additionally, security was another important consideration I had in mind.

So, what is Cloudflare?

Cloudflare is a leading web infrastructure and security company that offers a range of services designed to enhance both performance and security of websites.

Before diving into the setup process, let's explore the performance and security benefits Cloudflare provides and how you can leverage them for your website.

Performance Benefits

Improved Load Times

Cloudflare boasts a global network of data centres, also known as Content Delivery Networks (CDNs). When a visitor accesses your site, they are served from the nearest data centre, reducing latency and speeding up load times. This ensures a fast and seamless experience for users around the world.

Caching Static Content

Cloudflare caches your static content, such as images, CSS, and JavaScript, at their edge servers. By serving these resources directly from Cloudflare, the load on your origin server is reduced, resulting in faster page load times.

Image Optimization

Cloudflare can automatically optimise images for faster loading through features like Polish and Mirage. These tools compress and adjust images, ensuring they load quickly without sacrificing quality.

Security Benefits

SSL/TLS Encryption

Cloudflare provides free SSL/TTLS certificates, ensuring that data transmitted between your site and its visitors is encrypted and secure. This not only protects sensitive information but also boosts your site's credibility and SEO ranking.

Web Application Firewall (WAF)

On the free plan, Cloudflare offers basic protection against common web threats, adding an extra layer of security to your site.

Bot Management

Cloudflare can identify and block malicious bots that might try to scrape your content or perform automated attacks. This helps protect your site from data theft and misuse.

Rate Limiting

Protect your site from brute-force attacks by setting rate limits on specific URLs or endpoints. This feature restricts the number of requests a user can make in a given time period.

DNS Security

Cloudflare's DNS services include features like DNSSEC, which protect against DNS spoofing and man-in-the-middle attacks. This makes sure that visitors reach your actual site and not a malicious clone.

The conclusion here is that by integrating Cloudflare into your website, you can significantly enhance its performance and security.

Setting Cloudflare up

1. Register for a Cloudflare Account

Before we can take advantage of Cloudflare's caching, we first need to have a Cloudflare account.

  • Sign up: Open your web browser and go to Cloudflare. Click on the "Sign Up" button and fill in your email address and create a password. Click "Create Account".

2. Add Your Website to Cloudflare

Now, that you have successfully created an account and verified it. We can add the target site to start using Cloudflare.

  • Add a Site: After logging in, you'll be prompted to add your site. Enter your website's domain name (e.g., example.com) and click "Add Site".

  • Choose a Plan: Select the free plan by clicking "Free" and then click "Continue". I would say go with a free plan to start with, and assess if you require a paid later on.

3. Update Your DNS Records

Now, that you have successfully created an account and verified it. We can add the target site to start using Cloudflare.

  • Review DNS Records: Cloudflare will scan your current DNS records. Review them to make sure they are correct. If necessary, add any missing records by clicking "Add Record".

  • Change Nameservers: Cloudflare will provide you with new nameservers. These are the servers that will manage your DNS.

An example of what they may look like :

elsa.ns.cloudflare.com
beverley.ns.cloudflare.com

  • Go to your domain registrar (where you bought your domain, e.g., GoDaddy, Namecheap).

  • Find the settings to change your nameservers and replace the existing ones with the ones provided by Cloudflare.

  • Save the changes. Note that it might take a few hours for these changes to propagate. At this point your site will be in a 'Pending' state.

  • Once your changes have been propagated you will receive an email from Cloudflare letting you know that your site is using Cloudflare as it's CDN, and that the status has been moved to 'Active'.

Once the status of your site is active, you should be able to see a list of proxied DNS records. When a DNS record is set to "Proxied" (indicated by the orange cloud icon in the Cloudflare dashboard), traffic to that record is routed through Cloudflare's network.

When a DNS record is set to "DNS Only" (indicated by a gray cloud icon in the picture below), Cloudflare acts solely as a DNS resolver, without proxying the traffic through its network.

Configure Cloudflare Settings

At this point your dashboard will probably prompt you to set some extra settings now that your site is active.

  • Automatic HTTPS Rewrites: Cloudflare will scan your current DNS records. Review them to make sure they are correct. If necessary, add any missing records by clicking "Add Record".

  • Always Use HTTPS: Cloudflare will provide you with new nameservers. These are the servers that will manage your DNS.

I think it was around about this point when I tested my site, and I realised my site was down with a 'too many redirects error', which was indeed true when I investigated the network tab, it turned out my registrar and Cloudflare were doing a HTTPS HTTP ping pong, which I fixed by switching how Cloudflare encrypts traffic between Cloudflare and the server.

I had mine set to only encrypt between the visitors and Cloudflare initially, meaning that the call from Cloudflare to the server was unencrypted HTTP which my server converted to HTTPS triggering the ping pong game.

To resolve this I set my encryption mode to Full(strict), meaning all traffic end-to-end are all encrypted and forces validation on origin certificates.

Here's some lite reading on the redirects. I also found this doc on encryption modes useful too.

Enable Caching

It should be fairly straightforward to enable caching by going to the "Caching" tab in the Cloudflare dashboard.

  • Enable Cache Level: Ensure that the "Caching Level" is set to "Standard". This will cache your static content like CSS, JavaScript, and images.

  • Browser Cache TTL: Set the "Browser Cache TTL" (Time to Live) to a duration that suits your needs. This determines how long your content is cached in visitors' browsers.

There are some optional configuration areas available to configure within the scope of the free tier, so I encourage you to read and explore this area.

Test Your Configuration

Last bit would be to test everything's working:

  • Check DNS Propagation: Use tools like WhatsMyDNS to ensure your nameserver changes have propagated.

  • Verify Caching: Visit your website and check the headers of your assets using browser developer tools (F12 in most browsers). Look for headers like `cf-cache-status` to see if the content is being cached by Cloudflare.

  • SSL Test: Use tools like SSL Labs SSL Test to verify that your SSL/TLS configuration is correct and secure.

  • Security Headers: Check your site's HTTP security headers using tools like SecurityHeaders.io.

Monitor and Maintain

  • There is so much useful information you can drill down into within the Analytics & Logs section of your admin area, have a play around in these areas to see all the useful statistics including traffic monitoring and cache performance.

  • Regularly review the "Security" and "Firewall" tabs in the Cloudflare dashboard to see metrics on threats that have been blocked and security events.

  • If you make changes to your static assets, you might need to purge the cache. Go to the "Caching" tab and click "Purge Everything".

By following these steps, you'll harness the full potential of Cloudflare to optimize your website's performance and security with minimal effort. I hope I have helped you enjoy the benefits of faster load times, enhanced security, and robust protection against online threats — all for the low low price of free with Cloudflare's powerful tools!