Setup Cloudflare® and HTTPS in just 6 steps
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.
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?
- Sign up at Cloudflare
- Press "Add Site"
- Check the scanned settings
- Select your Cloudflare plan
- Change your nameservers
Step 1: Sign up at Cloudflare
Using their signup form it only takes few seconds to get started.
Step 2: Press "Add Site"
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
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.
| Type | Name | Value | TTL | Status |
|---|---|---|---|---|
| A | {{your_domain}} | points to 174.129.25.170 | Automatic | orange |
| CNAME | www | is in alias of dist1.storyblok.com | Automatic | orange |
Step 4: Select your 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.
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.
Bonus Step: Fine tuning the Cloudflare settings
We can even fine tune some settings of Cloudflare directly:
- Always use HTTPS
- 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
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
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?
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!
