A better static site blogging workflow with Alfred + Eleventy in 2022

Using Alfred to make creating blog posts easier, automating file and YAML creation.

Dec 30, 2021 • • 🍿 3 min. read in eleventy

Much that I love the simplicity of writing blog posts in Markdown for eleventy (11ty), it can be tedious to create files and the YAML markup needed for a blog post, and I want to reduce the effort needed to both create, write and publish in 2022.

Solution: Automate the boring bits

After a bit of searching I came across two posts from Mark Boulton and Robin Rendle which were the answers to my problems - use Alfred App (a trusty Mac launcher with workflow capabilities) and it's Workflow capabilities to both create a file in the right place and write out the YAML template needed.

I've tweaked both of their suggestions as I wanted to output a date and time in the YAML, and use the date only as part of the filename, and use the title in both the filename and the YAML so have added some extra steps.

Old workflow

To paraphrase Robin:

Just look at this nightmare blogging process:

  1. Open up VS Code and the workspace.
  2. Create the file name inside /_posts.
  3. Go to another file and copy/paste the metadata to the top of this one.
  4. Add the title and the correct date.
  5. Write the dang blog post.
  6. Push that code to the master branch so Netlify can publish.

New workflow

  1. Launch Alfred
  2. Type 'b' and the title of your blog post -> Alfred does steps 1-4 for you above!
  3. Write and commit/push to your master branch

Below is the workflow needed - It looks complex, but it really isn't - each step is small and feeds into the next. Alfred passes whatever you type after your keyword into a variable called query.

I've annotated the steps, and code below for each step:

Alfred workflow

How to add these steps

Please note most of these steps can be added by right clicking on the workflow window, and choosing from the top 5 menu options.

Alfred workflow menu

Step 1 - Trigger > Hotkey

Choose a trigger keyword, and set the text that shows up in Alfred to tell you what the action is.
Alfred workflow - choose a keyword modal

Step 2 - Utilities > Args and Vars

Copy the query variable into another variable called title - we use this for the page title.
Alfred workflow - create a variable modal

Step 3 - Utilities > Replace

Do a find and replace with the passed in {query} variable to remove spaces and replace with hyphens.
Alfred workflow - find and replace modal

Step 4 - Utilities > Transform

Change the {query} to be lower text.
Alfred workflow - process input modal

Step 5 - Utilities > Args and Vars

Set up three variables - a hyphenatedtitle for the filename, and the current time, and current date.
Alfred workflow

Step 6 - Outputs > Write Text File

This is where the blog post file gets created, and the YAML output. I usually add a summary, and a tag for the post, so have included these.
Alfred workflow

Step 7 - Actions > Open File

Open the file in VS Code (or whatever your chosen editor is).
Alfred workflow

Step 8 - Outputs > Post Notification

Show a success message!
Alfred workflow

In Conclusion - Automate all the things

This looks complicated but really isn't, and once you have it set up you can easily copy and tweak it. I've been using it for writing quick blog posts and notes and it's lightening fast.

AlfredApp and it's workflows are really powerful, and I'm only starting to scratch the surface of what they can do. Find out more about Alfred workflows on their site.

Posted in eleventy