My 11ty Blogging Workflow
More than five months ago I launched my new website based on 11ty. Since then I made some smaller adjustments, but other than messed up orders in RSS feeds and some formatting improvements I only added content and improved my workflow around it.
In this post, I want to give some insights into how I publish stuff to my blog and what tools and services are involved. The following image will give you an overview of the "pipeline" from start to finish - it's easier than it looks (especially to use), I promise. The image maps the workflow from writing drafts (left) through publishing actions (center) to content distribution via RSS feeds and social platforms (right), using color-coded boxes to distinguish manual steps, automation, shortcuts, and destinations. The resolution should be big enough so you can zoom into it.
I rely on the following tools and services:
- Shortcuts by Apple
- Drafts
- Working Copy Git client for iOS
- GitHub
- Hetzner (* recommendation link)
- echofeed
In general, all of my website content is managed through a GitHub repository. Any change in the repository triggers a GitHub Action that builds the 11ty page and syncs all content to my website.
Three things were most important when I designed my new webpage setup.
- I wanted to have a static page that loads fast and I have full control over (but also is easy enough to use for me) → that's why I chose 11ty 😊
- I don't want to be restricted by the device I'm using to publish content
- I wanted to publish (nearly) everything via my own site (POSSE)
My current setup fulfills these requirements at least good enough for now - there is always room for improvement, but I'm really happy how this all works out right now. Let's dive into my workflow of actually publishing something to the web.
First of all, I distinguish between three types of content that I publish regularly:
- Social Posts: status updates that are crossposted to Mastodon & Bluesky (even though I'm not very active there)
- Quote Posts: quotes that I collect and want to share
- Blog Posts: real posts on my blog (like this one)
I almost exclusively write any content within Drafts, independent of the platform. Once I finish writing, I can trigger Drafts Actions that either publish the content as one of the three content types. The actions will create and push a new file in the correct directory of the repository on GitHub. The difference between posting a social post or a blog post in the actions is the directory where the files are created and the metadata that they add as frontmatter to the files.
Posting images adds an extra step to the workflow. On iOS, I will first run a Shortcut that allows me to select the image(s) I want to publish. The shortcut asks me for the name of the image(s) and stores the image(s) in the assets directory of the repository within Working Copy. It will copy the correct path(s) to the image as markdown link into the clipboard so I can directly use them in the post I'm writing (e.g. ). I'll add alt-text and continue writing my post. Once the post is ready, another Drafts action prepares the file and stores it in the correct directory (blog posts / social posts) and then kicks off a Shortcut that will commit and push the changes to the repository on GitHub through Working Copy.
Until now, I never published posts with images from my Mac; that's why I didn't optimize this for the Mac for now. If I want to post images from the Mac, I'd add the image to the repositories directory and write the content with nvim or within VS Code. Then I'd publish it using lazygit to the repository. However, this is my current process if I make (bigger) layout changes to the website, since I can build and test the webpage locally first before publishing these changes.
The only post type I have not yet covered is quote posts. I store quotes that I like or that inspire me in drafts using dedicated tags. I wanted to publish them regularly and therefore created an automation on iOS that runs a Drafts Action on a schedule twice a week. This action will look for quotes that are not yet published (every published post gets tagged in Drafts). If there are quotes available, it picks a random one and creates a new file in the repository, fully automated.
Every change in the repository triggers a GitHub Action that builds and deploys the updated content to the web. If you're interested, you can have a look at the workflow file.
To distribute the new content to social media, I rely on echofeed, a great service built by Robb Knight. It reads the RSS feeds for the different content types and publishes (echoes) them to other services. It is heavily customizable and very easy to use. Once set up correctly, you don't have to worry about it anymore, which is exactly what I need.
