Setting up Ghost as a Static Site using GitHub and Cloudflare

I'm about to go through a move, and I started to look at some ways to make sure my main services stay up after I disconnect and move my server (which hosts, among other things, this Ghost blog). There's Google Cloud Platform, Azure, AWS... and then there's Cloudflare pages.

As I already use Cloudflare as my CDN, it immediately made sense to use them, as they're always free. Until they aren't. But right now they're always free. I'm going to walk you through the steps, to do this, which will work for any existing ghost instance you already have installed, and also for any you plan to create.

Prerequisites

• An existing Ghost installation (this guide will help you set up Ghost with SQlite, and this one with MySQL8)
• An existing Cloudflare account
• An existing GitHub account (I'll be using GitHub Desktop to push commits to my repo, but it's up to you how you do that)
• Admin access on Linux OR on Windows
• A machine with access (either local or remote) to your existing ghost installation - I went with Windows as a remote machine to my server

Creating the static site files

The core of this is the static site files. We create these by using the ghost-static-site-generator which shows options for Linux, Mac and Windows. I'm going to take us through the Windows route as there's a little more to do.

1. Install Chocolatey

• On your Windows machine, hit your Start key and type cmd and then click 'Run as administrator'

• Your terminal should open showing you a clear screen, with the directory as C:\Windows\System32 or something similar
• In the command screen window, input and run the following command:

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "[System.Net.ServicePointManager]::SecurityProtocol = 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

2. Install wget and grep by running the following two lines separately

choco install -y grep
choco install wget

3. Clone the repo and install the static site generator (run each line separately)

git clone https://github.com/itsignacioportal/ghost-static-site-generator/
cd ghost-static-site-generator
npm install

4. Generate the static site files

You can check out the recipes on the gssg repo yourself, but assuming that you're using a windows machine and remoting to the server you have your Ghost instance in, the recipe formula will go something like this:

node src/index.js --domain http://serverIP:ghostport --productionDomain https://ghost.yourdomain.com

As an example, if your ghost instance was on a server with IP 192.168.100.100, and you had exposed it using the default port 2368, and you planned on making it accessible publicly at https://public.ghost.com, then you would run the command node src/index.js --domain http://192.168.100.100:2368 --productionDomain https://public.ghost.com. Make sure you run it from inside the ghost-static-site-generator directory.

This will take a few minutes (dependent on the size of your Ghost site) and create a new folder called static which will contain all the files required to send to GitHub.

Creating your GitHub repository

There are a number of ways you can do this, but I like the following because if I ever need to make a change to the site, this will have fewer steps than a fully manual method.

1. Download 'GitHub Desktop' from https://desktop.github.com/download/, install it and open it
2. Set up your static site as a repository

• Click File > Add local repository

• Click 'Choose' and select the static folder you created inside the ghost-static-site-generator directory, then make sure to click create a repository before 'Add repository'

• On the next screen, change the repository name to something you like more than static (I called mine 'academy') and there's no need to change anything else

3. Publish the repository

• Pretty self explanatory, click the blue 'Publish repository' button

This will create your new repository in your online GitHub account:

Setting up your Cloudflare Page

• Log in to your Cloudflare account
• In the left-hand navigation panel, click `Workers & Pages', then on the screen click the 'Pages' tab and 'Connect to Git'

• Choose the account (if you have more than one) you'd like to connect to, and the repository you just created
• Change the project name if you want, but nothing else on the next screen needs to be changed. Go ahead and click 'Save and Deploy'

• The next screen will display the progress, and will auto-update to a 'success' screen. Click 'Continue to project'

• From here, you can click your domain to check out how it looks, and do a number of other things such as set a custom domain (third tab at the top)

Congrats, you now have a static site set up!

Pushing changes

Remember how I said this method made changes easier to push?

Say you make a change to your site. You once more run the same node src\index.js etc. code, and your GitHub Desktop automatically detects the changes to the directory.

• Underneath the filenames, give a 'Summary (required)' and a description if you want, then click 'Commit to main'
• Once updated, you will then be able to click 'Push origin' where 'Publish repository' was before

Cloudflare will automatically detect the changes in the repo (pretty instantaneously) and apply the new commit:

Note that the latest deployment also states 'casper source theme changed'.

That's it. You now have a static site and a way to update it with minimal fuss.