Tagged “ghost”

11ty and Ghost

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.

15 Oct 2024 by cthos

11ty blog ghost writing

Ergonomic Static Site Blogging

_{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.

23 Oct 2024 by cthos

11ty blog ghost