Ergonomic Static Site Blogging

23 Oct 2024 by cthos
2159 words

_{Shutterstock #2298461049 by One Photo}

I've been blogging a lot the last couple of weeks across both 11ty and Ghost, and it's no secret that I really like Ghost's authoring experience. I'd love to replicate that in a static site, and get a little closer to functionality parity, but I'm still searching for a great way to do this.

😈 Sidebar, I love everything about that stock photo. Not only is it a tablet with an Apple Keyboard in front of an apple laptop, there's a calculator to the side, a notebook, and what appears to be a plant potted in a cup? With CONTENT just screaming at you. The composition is wild.

This post is going to be some in-public documentation about what I'm trying, and how it's going. For the "why" portion of that question, hop on over to my previous post about 11ty and Ghost.

When I started this post I had the following ideas in mind:

• Just using Ghost's API and hooking it into 11ty
• Checking out Publii
• More tinkering with Frontmatter CMS
• Some other, more paid-er, option?

So let's hit those points one-by-one.

This option is a very interesting one which Ghost has written about already, and it's an intriguing one. It basically sits in the same space as using other CMSes headlessly. You'd:

1. Stand up a Ghost instance
2. Expose the content API
3. Have your 11ty build step pull from the content API to generate the static pages
4. Deploy however you'd like to

This all works just fine, and with the Content API you get some features of Ghost (drafts and future-dated publications) without having to wire up the collection filters in your .eleventy.js file. But that's right about where the benefits end.

For one, you now have a fully functional Ghost site which you could be serving traffic on behind a CDN for a similar experience (which I wrote about on Cthonic Studios). Sure, the static pages are always going to scale better than a full on server, but you can get to "pretty good" quickly with Ghost's headed mode.

For two, to do previews of the actual site you're now beholden to a two-step process where you draft the post on the Ghost side and then run an 11ty server to see the preview of it when it's actually rendered.

You also lose the authentication features that are built in to Ghost, having to reimplement them at the edge. In short, this has all the same downsides of a headless CMS (like Strapi or the like). For me, that's just not worth it. I'd rather start from something that has markdown and can be rendered by itself in a nicer editor.

On towards the next idea:

All of this is on Publii v 0.46.1

There's a lot to like about Publii, it's a desktop app that puts the rendering side of the site on your local machine that then pushes to the server of your choosing. It's got a lot of GUI-configured deployment targets, like FTP, GitHub Pages (soon to just be "git repos"), Netlify, S3, and so on.

Under the hood it conceptually works like most static site generators. There's an input directory which it uses to generate the flat files, moves those to an output folder, and then syncs that folder elsewhere. The actual structure of the site is determined by the Theme, which you're free to create yourself and attach to the site in question (like Ghost).

Though, it does store your post content in a SQLite database. Which is... neat?

I'm actually a little intrigued by this data structure because it changes depending on how you're authoring the post. If it's being done in Markdown, then the markdown is just there in the post. If you're using the block editor, JSON. This theoretically means you could reproduce the Markdown or do other shenanigans in a plugin or somesuch, I want to dig into plugin authoring a bit more and see what can be done with this.

But, back on track for the moment, the idea for less technically inclined users is you can just fire up the app and get to blogging. This is relatively true and for me a good experience. It offers 3 different editing modes for posts and pages:

1. Markdown
2. Block
3. WYSIWYG

Each of those works well, but if you just use the Markdown editor, you're missing out on conveniences that you'd find in other editors (like the ability to use the image carousel). They also have variant features. For example, the WYSIWYG editor does word and character counts. Neither the block nor Markdown editors support this.

My biggest annoyance about the editors is the fact that it does not autosave nor can you press a hotkey to save the post. You can only save your work by clicking on the save button. That's wild. I suspect the hotkey would be easy to add, but there must be some nuance there otherwise they'd have done this already.

Menus are straightforward and there is good integration with the theme settings. When you create a menu, the locations of menus from the theme are populated in the dropdown:

There's a lot of other low-code stuff buried in here, colors, theme settings, fonts, etc. A lot of setup can be done without ever touching the theme files or adding custom CSS (though of course you can do all of that, just like in 11ty or Ghost).

Overall, the experience shows a lot of promise, but has a lot of rough edges that make it harder to use. For one, if you're editing a post, and you preview it, it only generates the file you're on. You cannot navigate around the site. To navigate the whole site (for example, to check the listing pages) you must go back to the dashboard and click the preview button there. It's annoying to break the flow like that.

A major omission that I'm not sure how I'd accomplish is the lack of scheduled posts. You can set a post date in the future, but it will appear on the site immediately when you sync it. There's no cron or anything that would allow you to automatically show a post when its date has passed. This makes sense, because the editing and publishing happens from the app, you'd need to keep it open on a computer that is not sleeping in order to do that. It doesn't look like this is a thing the developers are interested in supporting either, given the complexities.

Implementing something like that would be tricky, but potentially doable via a plugin and a particular provider, but I think it'd be a fair amount of work.

The other thing is the plugin ecosystem. It's pretty robust and supports paid plugins, but there's nothing in there that I can find which supports members-only pages or the like. That might exist in the future, but just like other static sites it would depend on edge functions and a provider that supports it. So it's unlikely it'd make it in.

As a replacement for my 11ty site, the lack of a future-publish feature and the lack of control makes it unlikely that it'll work for me, but I may use it for other one-off sites, it's pretty neat.

So, this is what I'm using to work on this post right now. It's a VS Code Extension that adds some nice convenience features like Easier media management and a nice sidebar for managing the frontmatter of posts. It supports 11ty pretty much right out of the box, and has buttons that hook right into 11ty's lifecycle.

So far, I think this is going to be the best way to accomplish some of the things I want to do, but that frustrates me a bit since I want to reduce my dependence on VS Code, not least of which because I expect Microsoft to add more AI features (which can be circumvented via VS Codium), but more on that in a sec. It's also not a great solution for someone who's just looking for an enjoyable static CMS.

That said, let's talk features.

After doing an initial setup and telling Frontmatter which folders your posts are in, you'll get a clean dashboard which lists off every post you've got, along with their status (draft, published), cover images, preview text, and the like. Right next to that is a Media Editor which is really just a file browser with some convenience and insert functions.

Next to that are snippets, which are just little hunks of code you can use to easily insert things.

It does insert a fair amount of comment blocks for...some reason? It looks like they're present so you can then edit them in the snippet inserter again later, but I can't figure out how to do that.

Then, there's a whole "Data" section which allows you to do things with a data cascade, and I think you can hook that directly into 11ty's data cascade for fun and profit.

Finally, there's a nice little taxonomy editor which is awesome because it automatically parses the tags you've used on other posts, and correlates them to your posts. It's just really handy to get an overview of what tags you're using where, which is hard to do with just vanilla flat files.

This ticks a lot of boxes for me, and it'll likely be what I use until I find or build something better, but there are a couple of problems that make this hard to use for a less-technical user.

1. A lot of settings can only be edited in a json file. There are a lot of UI controls missing for changing some settings you will definitely want to change.
2. Editing media in the media dashboard does not edit media in the post, you have to reinsert it.
3. Create Content settings default to prefixing your file with a date/timestamp, which is far from my preference (but you can change it via the aforementioned JSON).

All of these are relatively minor, but there's one thing that annoys the heck out of me.

It has "AI Integrations". Now, these are disabled by default (good), and premium features (ugh, why would I pay for that garbage?) and they seem like they're just bolted on to make a specific crowd happy. They also include a button to "search the docs with AI" called "Ask the Frontmatter AI for help". This robot comes with a disclaimer:

Warning: Answers might be wrong. In case of doubt, please consult the docs. - Frontmatter AI

Note, that "Answers" is not my typo. It's in the AI response. This feature is also absolutely worthless. Here's a screenshot of me asking it about Tuna and it responding in Spanish with a warning about its inaccuracy.

Why the absolute hell does this exist? You could have just done a search for me and presented the results. You could even do a vector database so you can use better natural language search. Instead, you get an LLM to spit out a poorly summarized response, possibly filled with inaccuracies, that costs you money, me time, and the environment 4 bottles of water.

The fact that something like that is included just strikes me as really poor planning, or an ill-advised play to get AI bros to give you money. I'm not sure which, but it makes me irrationally angry. We really have to stop doing shit like this.

So the only other things in this space seem to be stuff like Siteleaf (which is a thin wrapper on top of Jekyll) or Drupal + Tome + some more setup, or Strapi + some other frontend. I've done a bit of research in this space but haven't found anything really compelling.

Tell me your favorites! Yell them at me on Mastodon @cthos or via the Contact Form. Maybe one day I'll set up comments over here, but that also involves comment moderation.... but also easier to hear from y'all.

But yeah, that's where we're at. I'm sure I'll have more of this as I go. I'm slowly thinking if I want something pretty perfect I'm going to have to build it myself, and I'm not sure if I want that.

11ty blog ghost