11ty and Ghost

15 Oct 2024 by cthos
2352 words

I run two separate blogs which I post to regularly (well, for this blog semi-regularly): This site (https://alextheward.com) and my TTRPG / LLC blog Cthonic Studios. AlextheWard is running 11ty hosted on Netlify while Cthonic Studios is running Ghost hosted on a VPS that I rent from one of several hosting providers.

😈 Really, I use Hetzner for a lot of things, but I've also got stuff floating around on Racknerd (an OVH reseller), Digital Ocean, AWS, Vultr, etc.

I'm constantly on the search for what the best writing experience is, and I recently wrote about my fiction writing workflow on the other blog and I want to take a bit of time to talk about the blogging workflow. Which is different! For “reasons”! It's also a good opportunity to talk about the strengths and weaknesses of both platforms especially in light of the current WordPress explosion happening.

😈 Seriously, it's bad for everyone and no one is coming away from this well off.

So, I guess this is a bit of my contribution to "what do you do if you want to produce content on the internet and WordPress is no longer a viable option, or Drupal is too complex to host and maintain"?

Let's dig in.

11ty is one of many static site generators (other notable SSGs: Jekyll, Hugo) who's primary goal is to take a variety of files and transform them into a website that you can then host cheaply wherever. Because the output is just HTML files, it's extremely easy to serve and there's basically no attack surface to exploit (unlike a heavier CMS like WP or Drupal).

11ty in particular stands out because of its strong commitment to stability. You can leave an 11ty site alone for a long period of time and when you come back to it, it'll still build with minimal fuss.

Don't just take my word for that though, here's a post from a friend about moving a Drupal site over to 11ty (and a Django site over to Jekyll) describing several of the same considerations: https://digitallatin.org/blog/new-site.html

This is the 2nd SSG I've used for this site, first was Metalsmith (coming from Drupal) and now 11ty.

What about it is so good, you might be asking?

• Excellent documentation that is easily accessible.
• Many starter sites out there, and a “few” themes (with more en route thanks to Sarah Joy's 11ty Themes Joy site)
• Works with a ton of file types out of the box
• Robust plugin ecosystem to get things done.

Of all the SSGs I've used in my personal and professional life, 11ty has been my favorite for several years now. It's really good. I also appreciate just how little I have to worry about the site completely exploding during an update. It's a tank, and once I got the proper CI/CD workflow running, it's pretty set-and-forget.

That said, it's not very ergonomic when you compare it to something like Ghost's editing interface.

I think one of the biggest challenges for running something like an 11ty blog when compared to running Ghost, especially if you're looking to monetize content (like, running a paid newsletter), is there's a lot of work ahead of you to get it working. Even if you're not looking to monetize, but want to have on-site engagement like comments the static environment presents considerations and challenges.

Search, even, is something you have to deal with separately. You can do what I did, and use lunr.js to create a little json search index and use that. You could also use a service like Algolia, or even just Google Site Search, but there's nothing that's just there for you like you might find in a traditional CMS.

Likewise, post creation suffers a bit from just being markdown. All of your post controls are handled in the front matter of a post (I'm glossing over a lot of options you have though, check the docs).

If you want neat effects or callout boxes you're going to have to write those yourself. If you want a quick way to do embeds or include web components, once again you're on your own (and will likely need to rely on snippets).

But what about those folks who are coming from a traditional CMS that have no idea about a development lifecycle, no clue what git is, no formal introduction to deploying sites?

It'll be an uphill battle for those folks who don't have a technical background, I think. In order to get an 11ty site up and running you need to do / learn the following:

1. Learn how to use your OS's command line.
2. Install NodeJS, NPM, and Git.
3. Clone your starter repository (after learning what git clone even means)
4. Figure out where you're going to deploy the site (11ty's docs give you some good ideas)
5. Write your content, probably in Markdown (you do know what markdown is, right?)
6. Run the 11ty server, behold your new blog.
7. Figure out how to get your generated site onto your host (depends on your host).
8. Maybe set up CI/CD to deploy stuff
9. Maybe figure out the gaps where your selected template doesn't cover, like maybe search.

It's a lot to ask of someone who just wants to write and share their writing.

😈 The 11ty community is lovely, and I know there are folks who want to make static sites more ergonomic.

There are a couple of tools like Frontmatter CMS or Publii trying to bridge the gap a little but they both have some quirks.

In fact, I'm currently trying out Frontmatter CMS for this post, and I really like several of the features. Being able to see the posts listed out in a dashboard and filter them easily is something I've been missing from Ghost over on this side of the house. Likewise, managing media manually is a pain, so I appreciate having a useful tool to help post authoring.

_{Frontmatter dashboard}

But a lot of the settings are still handled in a .json file. Many of them are confusing. It doesn't help with the actual publishing of the site (which Publii tries to do, but I think could be less confusing, too). We've got a fair amount of work to do to get static hosting on par with something like a managed WordPress site.

😈 Sidebar: Frontmatter has “AI” features. Which I hate. They're disabled by default, which I appreciate. It's kinda ridiculous that it's got a “help bot” for learning Frontmatter features, just make the features easier to understand! Don't give me a hallucination engine.

_{Frontmatter Media Dashboard}

Ghost, by contrast, is really geared towards bloggers and newsletter authors who also want to potentially monetize their content.

As such, it's got a lot of features right out of the box to support that endeavor, and it guides you through setting them up right after you install it or sign up.

😈 Ghost.org has a paid service which includes hosting, but the OSS project can be self-hosted. I'm running my copy in a Docker container. We'll talk about the disadvantages about that.

• Out-of-the-box configuration for the most common workflows: Blogging and sending out email newsletters.
• Integrations! Webhooks for custom workflows (I use this for Mastodon cross-posting) and Zapier, among a few others.
• Stripe integration for accepting payments both for subscriptions and as a tip jar (if you want).
• Authentication for subscribers.
• Private posts
• The editor is "markdown plus" where you can enter markdown text and it'll render automatically, but also you can press a button or type / and get a menu of common embeds.
• Lots of themes available for install right from the interface
  • Customizing the theme, however, is a bit of an exercise in editing and uploading code. Getting a dev environment working is also… fun.

I think the biggest thing, though, is how much configuration you can do without having to touch the code. Need to add analytics (like Plausible)? There's a section to add arbitrary code to the header or footer.

Generating menus is easy. Most themes have slots for where those menus go.

Search is included (though it doesn't index the entire text of a page), no config needed.

Scheduling posts just works! No need to set up a CI/CD workflow or a cron job to look for and publish new posts. It's all included.

😈 Though it's important to note that is a cron that Ghost provides...which hits the external URL of your site. If you've got, say, bot protection turned on, your cron might get blocked and not make posts live.

But I think the best part is the editorial experience, which I've been chasing on the 11ty side for a while now.

I want to take a bit of time to highlight the thing I like the most about Ghost: The Editorial experience. For me, it strikes a very good balance between raw markdown and the convenience of a CMS (because it is a CMS).

_{Ghost Editor with sidebar expanded}

This winds up being similar to how Obsidian feels when editing, but the additional embeds and "extras" you get make it feel smooth. For example, I do a fair number of product reviews / game introductions over on that blog, and having a "product card" convenience element is very useful. The callout element is simple, but I make heavy use of it on both blogs.

_{Product preview element}

Like Frontmatter, it has a series of boxes for the SEO settings per post, as well as share previews for when you're publishing your post. It's tight, and has the features you'd expect from a CMS.

Simply put, maintenance becomes your problem if you're not using Ghost.org's hosting. Relatedly, configuring the site to handle traffic also becomes your problem. For Cthonic Studios I had to configure the following (via code):

• Backups of the database and file system from the docker container.
• Uploading those backups offsite from the VPS (in case the VPS explodes).
• The CDN to keep traffic from overwhelming the origin server.
  • Likewise, ensuring logged-in users do not get served the same cache.
• Periodic updates (which is usually just a backup / docker pull)
• Monitoring (it can go down! That'd be bad)

With the 11ty site, I don't have to worry about backups at all. It's all markdown files in a distributed git repo. If the server goes poof, everything's safe and sound in several places (that are themselves backed up). I could have the 11ty site back up and running in a few minutes if I needed to switch hosts. Ghost is probably going to take 30 minutes to an hour to restore from backup.

I think it's probably obvious here that if you're coming to Ghost from another CMS (like WordPress) it's going to be an easier and more familiar editorial experience than trying to set up a static site on your own. As nice as 11ty and its peers are (and rock solid), the end-to-end experience of getting running on it is filled with a lot of things that require more tech setup to get running.

😈 This isn't to say that someone couldn't make a rock solid static CMS setup experience, and Publii seems to be trying, but we're not there yet.

Ghost, for its part, is more akin to something like Buttondown than it is to Drupal or WordPress but I think a lot of content-first sites would be well served by moving over to Ghost.

I think the main issue here that all the WordPress stuff is dragging up is both ownership of your content and portability of that content. A major advantage of the static site path is portability. All of your content is just in text files, that can be processed in any manner, and then placed somewhere else.

This is one of the things I'd like to see Ghost do better. You can export all of your posts in a giant JSON file, but doing anything with that is going to require some development work. Likewise, pulling any images down will require some effort to get the content back out. There are some tools that can help that conversion out there, however.

I think I'm reasonably content with my current blogging setup aside from trying to get a better editorial experience over on the 11ty side of the house. This afternoon I'm planning on actually setting up a Gitlab CI/CD workflow to rebuild the site so that I can pre-publish posts like I can on Ghost (yeah, I never did set that up) but I also want to have the ability to publish down to the hour...and I don't want to do a deploy unless something's changed. I suspect I'm going to need to do some wrangling to ensure that works like I want it to.

Either way, I like both 11ty and Ghost and I am using them for different enough things that I think I'll just keep going as-is. If I ever decide to try to do more subscriber-heavy content over on the AlextheWard side of the house I might migrate it to Ghost or I might just use that as an excuse to talk about using edge functions for dynamic content.

We'll see. Hope this was helpful. Happy blogging, friends.

11ty blog ghost writing