cloudflare cdn with amazon s3 website

Configure Cloudflare CDN to serve files from an Amazon S3 bucket website

We assume you have already setup a S3 bucket website the right way using a custom domain / sub-domain. This post continues from that point to guide you to use Cloudflare CDN with your S3 bucket website.

Benefits of Cloudflare CDN

  • Caching to reduce the load on my webserver
  • Geographic Distribution for speedy delivery regardless of where you are
  • DDoS Protection from sudden spikes in traffic
  • Compression of files for faster delivery for user on slow internet
  • Secure padlocked status in the web browser
  • No cost or low cost based on pricing plan selected

Change to Cloudflare name servers

To start using the Cloudflare CDN you will need to start managing your domain name's DNS via Cloudflare's name servers.

When you signup with Cloudflare and add your domain name, Cloudflare will import all existing DNS records for your domain from your existing name server (DNS management service provider). This include the DNS record you have added for your S3 bucket website.

Before you proceed you should check that all records have been imported correctly. If any records are missing add them now.

When you continue you will be shown two name servers that you need to set as authoritative.

cloudflare nameservers sample

Example of Cloudflare name servers. Your domain could be assigned different ones.

This step is important as without this you cannot manage your domain's DNS via Cloudflare and also cannot use their CDN.

To do this go to your current DNS manager service's control panel and replace the existing name servers with the ones displayed by Cloudflare.

changing to cloudflare nameservers

Example of a name server change being done. Your DNS management console may look different.

When Cloudflare detects the change in a few minutes to an hour, it will change the status of your domain name to Active in Cloudflare.

Switch on CDN Proxy Caching

To use Cloudflare CDN you need to enable Cloudflare proxy caching for your domain/sub-domain.

To do this visit the domain name's control panel in Cloudflare and go to DNS settings.

Locate the CNAME record for your S3 bucket website and edit it to enable proxying.

cloudflare dns enable proxy

Cloudflare CDN will now take care of global requests for all files from your S3 bucket website!

Make it Secure

To keep the data transfer of files secure between Cloudflare's local proxy and the website visitor's web browser you can enable encryption.

To do this visit the SSL/TLS settings and select Flexible mode.

cloudflare ssl flexible mode

The Result

Once you have completed the above steps you should be able to view your S3 bucket website when you try to access it via the assigned domain/sub-domain.

s3 website dns cname ssl

If you have also additionally enabled encryption you should also see the padlock secure icon in your web browser's address bar.

publii s3 web browser

Using Publii CMS with S3 Static Web Hosting

Static Web Hosting

Static website hosting refers to hosting of web pages that have fixed (static) content and any user interactivity is processed on the client-side instead of the server-side.

Publii CMS

publii cms window

Publii CMS is a free and open-source, PC-based, static website CMS. It means that Publii helps you create & manage the website structure and pages on your PC and then publishes them to static web hosting.

About S3 Static Web Hosting

Amazon S3 is a low-cost-low-maintenance, online, container-based object storage service that can be used to store directories and files like on a PC.

To work with Amazon S3 you need to create S3 buckets (containers) and then create folder objects and upload file objects.

Additionally, Amazon S3 can also be used to host static websites by enabling a specific bucket configuration and security policy.

Did you know you could launch an S3 bucket with the necessary static website configuration and security policy in 5 minutes?

Launch S3 Static Hosting for Website

Sign-in to your user account and navigate to the S3 Bucket Websites section.

Under the Launcher sub-section, give your static web hosting bucket a unique friendly name to identify it.

iwebzcloud s3 bucket website launch options

Leave the Domain Name field blank unless you plan to use this web hosting bucket with a custom domain/sub-domain. more info

Hit the Launch button to set it all up. Thats all!

Your S3 static web hosting is ready for you to publish your website.

Connect and Publish a Static Website from Publii CMS

Download and Install the Publii CMS on your PC then start it.

Create a new website to publish to your S3 static web hosting. view instructions

Under server type, select S3. Enter the required bucket and access key details.

publii cms s3 server settings

You can get the bucket details from here.

The Access Key/ID and Secret key can be found here.

Use the Test Connection button to verify everything is correctly entered. Save the settings.

Now use the Sync your website button in the menu to upload/publish your website.

You can now use your web browser to visit your static website online on Amazon S3.

You can modify your website further to your satisfaction and then sync (publish) it as many times as you like!