Dr. Matt Lee (mattl)

Longest title ever? Maybe. I just migrated a small WordPress.com hosted blog to a self-hosted Eleventy blog with Ghost as the CMS. If this sounds confusing, it is a bit, but here goes.

Why do this? I want a site that’s not hosted in the same place as my website, Libre.fm but WordPress.com’s free tier doesn’t give me the flexibility I need and installing self-hosted WordPress requires more of my time than this solution does.

With WordPress you have a CMS and it also serves your website. If you’re self hosted you can put some caching plugins in front of it, you can slap a CDN like Cloudflare in front of it, but ultimately you’re still firmly in team WordPress.

My new set up is a little different. I have a Ghost installation on my desktop computer and another on a server somewhere. If I want to start a third site, I’ll probably do it locally again. All told this is a 43mb install in a single folder and I can keep it in git for when I need it again.

Ghost is where I do all my content management. I write posts in Ghost, make edits in Ghost, etc. I’m writing this in Ghost right now.

How did I get my existing posts into Ghost? Ghost makes a simple WordPress plugin that exports your site to a format Ghost understands. Why Ghost doesn’t support the existing WordPress Export Format by default is unknown to me right now but I am trying to find out. Also if you’re on WordPress.com you can’t install plugins on the free tier so you’ll need to take your WordPress Export and import it into another WordPress installation first. LocalWP did a good job of this for me.

So you’ve got everything in Ghost, you’ve written the next killer blog post and it looks great. How do you get it on the web? Eleventy.

Crucially, when I’m ready to publish that’s when Eleventy comes in. I have a folder with my website in it (also a Git repository) with Eleventy installed (via NodeJS Package Manager, npm). Eleventy also uses a different theming system to Ghost so you can ignore how your Ghost site looks as it won’t matter to Eleventy.

My Eleventy folder has a file called .env that contains the following:

GHOST_API_URL=http://localhost:2368
GHOST_CONTENT_API_KEY=1ba35acab36b0038fdd5ec4dbb
SITE_URL=http://localhost:8080

Those first two files let Eleventy talk to Ghost and pull out blog posts and pages from Ghost and get them into Eleventy. The third line is the URL I’ll use for development of my site locally. With Ghost running, I type the following to build my entire website:

yarn start

This builds a copy of my website in a folder called “dist” and starts a local web server at http://localhost:8080 and is watching my Eleventy site for any changes I make. I typically leave this running in a terminal emulator tab inside my text editor while I make changes to the site. When I do all the browsers automatically refreshes themselves to show my changes so testing with a variety of browsers is easy.

When I’m done editing, the dist folder contains my entire website. I can put this on a USB stick, ZIP it up and email it to someone or copy it to my web hosting with any number of graphical or command line tools.

The downsides

What’s lacking here is WordPress’s famous easy installation: copy the files from this ZIP file to your web hosting and you’re all set. Most commercial web hosting will support MySQL databases and if you’re going for a smaller or cheaper solution, support for SQLite is now available too.

Ghost is very nice but for what it does I’m using very little of it, so I’m going to keep looking for something which can give me a bit of that Ghost UI magic while still letting me talk to Eleventy.

Right now this is a workable solution for people comfortable installing Ghost (which requires installing NodeJS and using the command line) and people who are happy to edit files in a Git repository, which isn’t anywhere close to most people.

If you’re looking to get started grab a copy of the blog.libre.fm repo and follow the instructions for installing Ghost on your local computer and with the following steps you too will have a Ghost to Eleventy setup you can be somewhat proud of.

1. Install Ghost locally. Ghost will tell you which port it’s running on locally when installation is finished. For me this was http://localhost:2368
2. Open your Ghost dashboard, mine was http://localhost:2368/ghost/
3. Click on the Settings icon at the bottom of the screen on the left.
4. Scroll down and find Integrations, then add a custom integration and call it something memorable like “eleventy”
5. Copy the API URL and Content API key somewhere.
6. Clone the blog.libre.fm repo.
7. Edit the .env file and fill in the API URL and Content API key to match what you copied in point 5.

From the command line in the blog.libre.fm clone folder, type:

yarn install

Wait a few minutes, now type

yarn start

You’ll see something like this:

[Browsersync] Access URLs:

Local: http://localhost:8081
External: http://192.168.0.91:8081

UI: http://localhost:3002
UI External: http://localhost:3002

[Browsersync] Serving files from: dist

In this case you want to access your site via the first URL, https://localhost:8081 so make sure the SITE_URL line in your .env file matches this. I suspect it probably will and I just have two copies of Eleventy running right now.

I’m hosting my Eleventy site on Neocities.org, btw. On the $5 a month plan you could host thousands of Eleventy sites but there’s a generous free tier to get you started. Other options for hosting including GitHub and GitLab pages which are free of charge, Bunny.net, Cloudflare Pages or something like NearlyFreeSpeech.net which just started hosting a multi-gigabyte static copy of another WordPress site I just archived due to the closure of the publication.

Have fun, send me any code comments or code suggestions as issues on GitHub please, and anything else can be sent in the usual manner.