Storyblok Raises $80M Series C - Read News

What’s the True Total Price of Enterprise CMS? Find out here.

Skip to main content

Setup Cloudflare® and HTTPS in just 6 steps

Try Storyblok

Storyblok is the first headless CMS that works for developers & marketers alike.

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 your domain or, if you want to use the rendering service, the domain on your space settings and your A-record for that domain to 174.129.25.170 which is a naked domain redirect powered by wwwizer.com. If you're not using Storybloks Rendering Service 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”).

Troubleshooting: Components not clickable?

Page Rule

Cloudflare after enabling minified HTML strips away all HTML comments. Since Storyblok allows you to append those to allow a click on the next element with our JavaScript Bridge this might be an issue resulting in not clickable components. To get a catch on this you can use a page rule that shows how to solve that in the picture above. It will check for *.your_domain/*_storyblok_tk*, a parameter that we append in our preview. Make sure to only check JavaScript and CSS since HTML is the one we would like to not be minified to have our HTML comments in place for our preview.

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!

Author

Dominik Angerer

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 Scriptconf and Stahlstadt.js.