Using Ghost as a Headless CMS with Static Site Generator and Deploying to Cloudflare Pages

Most blogging websites are powered by server-side software such as Ghost or WordPress. This is extremely useful since they can support complex post editors, schedule posts to be released later, and allow users to register on the website.

I self-host Ghost in a dedicated virtual machine, but this mean that I have no redundancy and if I have to do a reboot of the virtual machine for updates it results in my blog content being unavailable for a few minutes. Eventually, I decided I wasn’t happy with this and decided to do something about it.

Using Ghost as a Headless CMS with Eleventy and Cloudflare Pages

A good answer seemed to be using Ghost as a headless CMS (this way I still get to keep my post scheduling functionality), and then to use a static site generator (Eleventy) to generate a static website. After the static website has been generated, is then deployed to Cloudflare Pages, making it available in data centres around the planet.

The disadvantage of this is that you lose the ability to use dynamic functionality available to website visitors, such as membership registration. But the impact of this depends on your use case and the features of Ghost you are using.

This process was even easier because Ghost already provides a Eleventy starter template for using it as a static site generator for Ghost. So let’s get started...

Fork the Eleventy Ghost Starter Template

The first step is to fork the Eleventy Ghost Starter template project on GitHub. This will let you modify the template and setup a GitHub repository to use when creating the Cloudflare Pages project.

1. Go to the Eleventy Ghost Starter Template project page
2. Click the Fork button at the top right of the page
3. Change the repository name and description if needed
4. Click the Create fork button

Now you have a GitHub repository you can modify.

Create an integration in Ghost

The next step is to create an integration for Eleventy in Ghost to grab a content API key. This will allow Eleventy to access the content of your Ghost site while it is generating the static website.

1. Go to the Ghost admin area
2. Go to Settings
3. Under Advanced, go to Integrations
4. Scroll down and click Add custom integration
5. Enter a name (such as Static Website) and click Create
6. Copy the Content API key

Now that we have a Content API key for Ghost, we can start modifying our forked GitHub repository.

Update Eleventy settings

The next step is to update the settings for Eleventy to match your Ghost website.

1. Open the .env file
2. Update GHOST_API_URL to be the root URL of your Ghost installation
3. Update GHOST_CONTENT_API_KEY with the content API key from the Ghost integration
4. Update SITE_URL to be the URL your static website will be deployed to

Now that those settings are in place, we can test that Eleventy is working by running the following commands.

yarn

yarn start

Now you should be able to see your static website running locally with content from your Ghost blog displayed in the start template. This is the time to modify the templates and CSS to your desired result.

Creating a Cloudflare Pages project

Now is the time to create the Cloudflare Pages project that will be used to deploy the static website.

1. Go to the Cloudflare Dashboard
2. Select Pages from the navigation menu
3. Click Create project, and then Connect to Git
4. Select the repository and click Begin setup
5. Modify the project name as needed
6. Set build command to be yarn build
7. Set build output directory to be dist
8. Expand environment variables
9. Click Add variable
10. Set Variable name to NODE_VERSION
11. Set Variable value to 14.19.3
12. Click Save and Deploy

A build process will now be started for your site. This will clone your GitHub repository, run Eleventy to generate the static website, and then the contents of the output directory will be deployed across the Cloudflare network.

Setup a custom domain

The next step is to setup a custom domain to match the SITE_URL setting which you set earlier. If you don’t do this, your site will only be available at the provided Cloudflare Pages URL.

1. Go to the Custom Domains tab in your Cloudflare Pages project
2. Click Setup a custom domain
3. Enter the domain of your website
4. Click Continue
5. Check the DNS settings and click Activate domain

When the process has completed, your new statically generated is available and active at your custom domain. But, we’re not quite done yet!

Add a Deploy Hook

The last step is to finish the integration of Cloudflare Pages with Ghost. At the moment, Cloudflare Pages will only deploy a new copy of the website if the GitHub repository is updated. This will work fine the template files are changed, but not if a new post is published in Ghost.

To fix this we can add a Deploy Hook to the Cloudflare Pages project and add this to the Ghost integration. This will then trigger a deployment to take place whenever Ghost calls the deploy hook URL.

1. Go to the Settings tab in your Cloudflare Pages project
2. Click Builds & deployments
3. Scroll to the bottom and click Add deploy hook
4. Enter a name for the hook e.g. Ghost
5. Click add
6. Copy the provided deploy hook URL

Now we need to add a webhook to our custom Ghost integration to call this URL when we need a deployment to take place.

1. Go to the Ghost integration
2. Click Add webhook
3. Enter an appropriate name for the Webhook e.g. Cloudflare Pages – Post published
4. Set Event to Post published
5. Set Target URL to be the deploy hook URL
6. Click Create
7. Repeat the process for other events that would require a deployment, e.g. Post unpublished

Now that we have completed those steps (even if it is a little frustrating you can’t select multiple events for the single webhook), a Cloudflare Pages deployment will be triggered whenever any of those Ghost events are triggered.

Hope this helps you get your static website deployed on Cloudflare Pages while using the features of Ghost as a headless CMS!