Setup Cloudflare® and HTTPS in just 6 steps

In this short tutorial we’re going through the setup of Cloudflare for your Storyblok project with the rendering service (and any other platform). For maximum flexibility, Storyblok can be integrated into your application or website retrieving content from our API. But for those who want just a basic website, we offer a rendering service where the whole website is hosted in the cloud. You can use it for hosting your single page application or create awesome websites.

Use Cloudflare with Storyblok

Why would you want to use Cloudflare?

The API-Based CMS Storyblok comes with an CDN for your assets, content and of course also for your hosted rendering service themes. Using Cloudflare allows you to simply add a custom domain and directly use their SSL (https) for free.

  • Custom domain using Cloudflare
  • Https for free by Cloudflare
  • Screen your website’s traffic for malicious visitors
  • Set up a domain in less than 5 minutes
  • No code changes required

What needs to be done?

  1. Sign up at Cloudflare
  2. Press “Add Site”
  3. Check the scanned settings
  4. Select your Cloudflare plan
  5. Change your nameservers

Step 1: Sign up at Cloudflare

Sign up at Cloudflare

Using their signup form it only takes few seconds to get started.

Step 2: Press “Add Site”

add site Cloudflare

You can press Add Site after you’ve logged in and you can than directly enter your domain name. After the click on “Begin Scan” Cloudflare will scan all your DNS entries and shows you their result shortly after.

Step 3: Check the scanned settings

Check scanned results

Make sure the CNAME for your WWW address points to dist1.storyblok.com and your A-record for that domain to 174.129.25.170 which is an naked domain redirect powered by wwwizer.com. If you’re not using Storyblok you can change dist1.storyblok.com to your service CNAME provided or change it to an A record to your own server.

TypeNameValueTTLStatus
A{{your_domain}}points to 174.129.25.170 Automaticorange
CNAMEwwwis in alias of dist1.storyblok.comAutomaticorange
Cloudflare dns settings

Step 4: Select your Cloudflare plan

select a Cloudflare plan

You can go with “Free Website” - but check out their offerings for Pro, Business and Enterprise Website as well.

Step 5: Change your nameservers

Attention: Do NOT use the nameservers in the image below! Use the name servers provided by Cloudflare at this step.

change your nameservers

At the place where you bought your domain you should be able to switch your nameservers - usually that can be found in the DNS settings for that domain. Your website will not experience any downtime when you change your nameservers. However the transfer process can take up to 24 hours.

Step 6: Add your custom domain to your Storyblok Space

In your space setting you should be able to add your domain. At this point it will be: www.your_domain.com simply press safe and you’re ready to go.

custom domain

Bonus Step: Fine tuning the Cloudflare settings

We can even fine tune some settings of Cloudflare directly:

  1. Always use HTTPS
  2. Automatic HTTPS Rewrites

There are even more options available - but would be way to much for this tutorial. The descriptions in Cloudflares application holds all information you will need to know about.

Always use HTTPS

always use https

Navigate to the Crypto area and turn on the “Always use HTTPS” to have your site redirected from http to https. This will allow Cloudflare to reply to all requests for URLs that use “http” with a 301 redirect to the equivalent “https” URL. If you only want to redirect for a subset of requests, consider creating an “Always use HTTPS” page rule.

Automatic HTTPS Rewrites

automatic https rewrites

Scroll down till you see “Automatic HTTPS Rewrites” and also turn this option on. If your site contains links or references to HTTP URLs that are also available securely via HTTPS, Automatic HTTPS Rewrites can help. If you connect to your site over HTTPS and the lock icon is not present, or has a yellow warning triangle on it, your site may contain references to HTTP assets (“mixed content”).

Congrats! You can grab a tea or coffee now.

Time to wait - as Cloudflare has already triggered all your changes - the transfer process can still take up to 24 hours. If you’re facing troubles with Cloudflare you can reach out at their outstanding support.

I hope you enjoyed this tutorial - I would be happy to receive feedback in the comments below!


More to read...

About the author

Dominik Angerer

A web performance specialist and perfectionist. After working for big agencies as a full stack developer he founded Storyblok. He is also an active contributor to the open source community and one of the organizers of Stahlstadt.js.