Freezing the Ghost site to serve it statically

In previous post we saw how to build a blog or small website using Ghost as a content management platform of choice. In this article we will see how to build a static version of the entire site to prepare it for publishing.

Why a static site?

One of the first questions you can ask is: why making a static version if you already have Ghost serving the site?
Good question, let me explain the pros and cons of it, starting with the latter

CONS

• need to rebuild the static version to release new content - still good for "infrequent" updates
• no dynamic content - but it is possible to have client side dynamic integrations
• no interactive features like search or membership area

PROS

• the site is fast (I mean, really fast) - you are serving HTML files - and this helps with Google ranking
• no need for powerful servers - no need for a Database or application servers, just a plain web server
• no attack surface - there are no backends to compromise, just a folder with HTML files and images
• nearly zero hosting fees - we'll see how to use AWS S3 to publish the site almost for free

If the cons aren't a stopper for you, a static site is still a very good option, in fact there are a lot of tools to generate static sites like Hugo, Zola, Jekyll, Eleventy (aka 11ty) and so on.

I still prefer the hybrid approach and the simplicity of Ghost to edit my articles instead of using Markdown files directly, so lets see how to generate a static version of a Ghost site and then how to publish it to AWS S3 and benefit from CloudFront to serve it as fast as possible for every user around the world.

The speed of a website is very important nowdays because search engines like Google decided to promote faster websites and have them ranked higher in the results, and this is crucial to the success of the site iself because "it only exists if it fits into page one of the search results".

Page two in Google search results is something like a mith, almost nobody has ever seen it. Did you?

Ghost Static Site Generator

To generate the static content from the Ghost site, being it running locally or on another location, I use Ghost Static Site Generator.

Ghost Static Site Generator (or gssg that is the shell command name) is an open source tool built with Node.js around the wget command and works in a pretty simple way: given the URL of the homepage of a Ghost site, it scans the entire content and downloads every page and resource file locally.

It really is a bit more than that because it does a few more things that are mandatory to make the static content work correctly:

• downloads every page as an html file
• downloads every linked stylesheet (CSS) and javascript connected to the page
• downloads the images inside every page and makes them into various optimized resolutions
• rewrites the internal links in every page with the target URL

The last step is the most important, since you are not going to serve your site from localhost or some other local address, but from a public domain, and you need to have the links pointing to the correct page or resource in every page relative to that domain.

Installing gssg

To install gssg you need to have wget available locally, if you don't have it you can install it using Homebrew on a Mac ( brew install wget )  or Chocolatey on Windows ( choco install wget ). On a Linux machine wget is usually already installed by default, if missing you can install it with the specific package manager of your distribution, like apt-get, yum, dnf or others.

Once you have wget and a recent Node.js release installed and working locally, to install gssg you can use the following command:

npm install -g ghost-static-site-generator

After the installation completes you should have the gssg command available, as soon as you run it you will see the output of the tool starting to download from the default location (out of the box it is https://www.fabiomarini.net, or the default local Ghost URL) and the resulting files stored inside a static sub folder of the current path.

Command line parameters

You can customize a few details when running the gssg command to tell the tool which is the output domain and other settings.

Set the output domain, if you want for example to publish on https://www.mysite.com:

gssg --productionDomain http://www.mysite.com

Set the source domain, if you are not hosting the source Ghost locally, you need to tell gssg which is the source address:

gssg --sourceDomain http://myhiddenghostinstall:2368

Change the output directory. If you don't want your output to be stored inside the local ./static directory, you can change it with the option:

$ gssg --dest output-dir

Preview the site after it has been generated:

gssg --preview

There are another couple of options like silent mode (no shell output) --silent or fail on error --fail-on-error, you can read more about the details on the README of the project on GitHub.

After setting the correct options for your needs you should be able to get a static version of your Ghost site running locally and to preview it using the --preview option or with a tool like serve(https://github.com/vercel/serve#readme).

When everything is fine you are ready to publish your new statically built Ghost site to your preferred hosting servie. We will see how to do this using AWS S3 and CloudFront to get a super fast site almost for free in the next article.