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:
- Ability to use your Mindspun site as the origin or server certain URLs (such as /blog).
- Unmatched site performance from Cloudflare's worldwide datacenter network.
- Full access to your site analytics.
- Fine-grained control over caching.
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 DigitalOcean App Platform 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.
Click the Mindspun logo and you'll be prompted with an authorization screen. If you're logged in already, you'll see the following.
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.
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.
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.
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.
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.
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.