This tutorial will demonstrate how to use the Cloudflare Mindspun app with your existing Mindspun account.

The Cloudflare app is free to use and gives you the following benefits:

Prerequisites

This tutorial assumes that you have an existing Mindspun site and that you have a domain managed by Cloudflare that you wish to connect to your Mindspun site.  

If you wish to use Mindspun to serve only certain paths of your site - known as proxy embed mode - instead of acting as the origin for your entire site, then you'll also need an existing site.  This tutorial uses a simple site built with 11ty and deployed using Cloudflare pages but any origin server will do.

Any choices that you make when setting up your domain can be changed by returning to the app setup page in the Cloudflare dashboard.

Connect to Mindspun

The first step after selecting the Cloudflare app is to connect your Mindspun site and authorize Cloudflare to access it.

Login to your Mindspun account

Click the Mindspun logo and you'll be prompted with an authorization screen.  If you're logged in already, you'll see the following.

Mindspun authorize dialog

If you're not logged in, you'll be asked to enter your username and password then see the above dialog.

Click 'Continue' then accept all the warning messages Cloudflare prompts you with about what information Mindspun uses.

Choose your Cloudflare hostname and Mindspun site

Your Mindspun site connects to only one hostname for a given Cloudflare domain.

Choose Cloudflare hostname and Mindspun site

In the above configuration, assuming your domain is example.com then your site named demo would be connected to www.example.com.  You can use a different hostname on your domain from your exist sites to evaluate the app.

Unless you have an agency plan, the site field will only contain one choice which is pre-filled for you.

Choose your embed method

Your Mindspun site can either serve your entire site - as the origin server - or only supply certain URLs like /blog.

Embed method for your Cloudflare domain

Proxy certain paths

The default embed method is the easiest way to add a blog to your existing site.  Using the proxy embed method only certain URLs are sent to your Mindspun site with other URLs still going to your existing origin server.  This method seamlessly integrates a blog with the look and feel of your existing site.

You can see this method live at cloudflare.mindspun.co and the source code on Github.

cloudflare.mindspun.co demo site

Clicking on any of the links in the navigation - other than Home - takes you to a page with Ghost content.

Note that the header is always present.  If your origin server has static a HTML file named /blog/post.html then the app uses that file as a template for blog pages and inserts the blog content into the <main> tag.

Learn more about styling pages with the Cloudflare app.

Use Mindspun as the origin server

Using this method makes your Ghost site become the origin server for your Cloudflare site - no other setup is required.  All pages are served directly from your Ghost site.  

You can configure your DNS entry to point to a non-existent IP address like 192.0.2.1.

Page caching

The last standard option allow you to control page caching for your site.  

Default means that Cloudflare loads your content pages from your Ghost site each time they are requested.  

Manual allows Cloudflare to cache your pages and to serve requests statically from a users most nearby data center, resulting in significantly improved performance.  Ghost is fast, but the Cloudflare local cache is way, way faster.

Manual does require that the cache is cleared every time the site changes.  You can clear the cache manually from your Mindspun dashboard or better yet, configure your Ghost site to clear the Cloudflare cache automatically whenever your site changes.

Default caching is fine early on but your should switch to manual caching as soon as possible.

One important note, Cloudflare will cache your images in either mode for up to a year.