The "proxy" embed mode for the Cloudflare app makes Ghost pages from your Mindspun site appear as pages inside your existing Cloudflare site.  These pages can - and should - be styled to match the other pages in your site.  

NOTE: This page only applies to sites that use the Cloudflare app in 'proxy' mode, not sites that use Mindspun as the origin server.

How "proxy" embed mode works

In order to style pages, it's important to understand how the Mindspun app embeds content into your Cloudflare site.

When a user hits a URL of your Cloudflare site that is proxied to Mindspun, for example /blog/my-post/, the app looks for a page /blog/post.html on your origin server (not on Mindspun).   If /blog/post.html is found, the app replaces the contents of the <main> tag with the contents of the blog article /blog/my-post/ from your Mindspun Ghost site.

This process happens seamlessly on the Cloudflare edge server so the user - or search engine - is served just a single, static page.  Great for SEO.

If your origin server does not have a page named /blog/post.html, then a default template is used.

The index page - i.e. the list of all blog article - located at /blog/ uses a template named /blog/index.html from your origin server.

The Ghost theme

Your Ghost theme specifies what content will be embedded in your Cloudflare pages.  Anything in the <main> tag of post.hbs will be embedded.  This could be a simple as:

<main>
  {{content}}
</main>

Or could contain additional meta data about the post like author, tags etc.  You can see what's included in Mindspun's 'Spin' theme here.

NOTE: the Ghost theme only specifies the structure of the pages and not the style.  Stylesheets from your Ghost theme are excluded to specifically use the style from your existing Cloudflare site.

What URLs are proxied and their templates

URLTemplate page
/blog//blog/index.html
/blog/[post-slug]/blog/post.html
/tag//tag/index.html
/tag/[tag-name]/tag/post.html
/author//author/index.html
/author/[author-name]/author/post.html

You can see each of the paths in the demo site.

There are three other 'special' URLs proxied: /ghost/, /content/, and /members/.  These URLs doesn't show Ghost posts as the above but instead enable the Ghost admin interface and API.  Proxying these URLs means your site gets full access to Ghost for content, subscriptions and administration.

NEW in 1.1.0  These locations are configurable under the 'Advanced options'

Meta tags

Ghost has a convenient administration interface for specifying page information necessary for SEO.  Embedding Mindspun preserves that information for you by adding select <head> information to your pages automatically.  Specifically <meta> tags are preserved allowing you to easily customize how your page appears to search engines.

Ghost search engine preview

Stylesheets are specifically NOT included.  Omitting the stylesheets from your Ghost theme ensures that your existing site style is kept.

The Advanced settings

The Cloudflare app setup pages has an "advanced" section that controls what URLs are proxied by your site.

Cloudflare app advanced options

While it's rare that you'd need to change these options, they do demonstrate what the app does.  The checkbox tells the app whether or not to proxy that route on your Cloudflare site to your Ghost instance.  The location specifies what tag from Mindspun is used for content - in this, the default case <main>.

Most importantly for styling your site are the index and post template locations.  Starting in 1.1.0 these locations are configurable.  One common use case is to change the locations to the same file/url so that all Ghost pages are styled the same.