Using n8n to Mock Up Posts in a Headless CMS

Why Choose a Headless CMS?

I should say, before I started this project, I didn't know what a CMS (Content Management System) was. I setup a Ghost blog years ago, and it served it's purpose well. I could go in there and easily add drafts, edit, publish, and for the most part it did what I needed.

The more I used Ghost the more I wanted additional features in it, but it wasn't the most approachable code base for modification. I didn't realize for a while, that what I was looking for was a Headless CMS. Designed so that the "content" could be standardized into a repeatable format and assembled like building blocks.

I tried Pageflow, Strapi, and finally, PayloadCMS. Neither Pageflow nor Strapi felt like I really got what was advertised on their sites when I stood up the container. PayloadCMS felt exactly like what was advertised. I tried my hand at writing the front end myself and oof, I am just not a front end designer. Once I found Gioruu's improved simple starter template though, I felt like I finally found what I was looking for. A somewhat robust set of defaults, an editor with a preview, and the flexibility to add new block types and make changes in a simple well designed backend.

Why use n8n?

I only stood up my n8n instance a week or so ago, but regardless, before diving too deep I should explain what it is and why I decided to use it. If you know what Zapier is, it's like that but self-hosted. If you don't, it's an event orchestrator, it can be triggered manually, by schedules, or actions in a plethora of places. For me, it presented a unique opportunity, the ability to connect my various containers on my home lab together in new and easy ways. I have handwritten APIs for dozens of projects, in numerous languages, and on many different infrastructures. If there's one thing I know for certain, it's that having a unified connector makes everything easier. That's n8n, it takes the burden of integrating with hundreds of apps off the individual apps themselves. It isn't just a universal plug though, it's a true orchestrator in my opinion. From what I have seen, the workflow designer has a low skill floor, and a skill ceiling in the clouds that I look forward to exploring.

Just like anything with an insurmountable volume of possibilities though, analysis paralysis set in. I connected my NextCloud, Ollama, and a few other Connections as they're called in n8n. Then set it aside, figured I'd let the ideas marinate. The reality is, with so many possibilities, it felt overwhelming to even try and start anything, so I decided to revisit when I had a useful workflow for it.

Now, stubbing out blog posts has been something I've wanted to automate for a long time. I do a lot of writing, and writing for me helps bring closure to projects. I start more projects than I finish, and writing a blog post about a project helps me reflect on what I've accomplished. Despite how much I enjoy the writing process, I have always felt the cognitive burden of deciding where to put all the constituent pieces of a web page often out weighs the enjoyment of the writing process, for me at least.

Even if I don't enjoy designing the page, user engagement still requires engaging content. There's so many ways to tell a story online. You could write web articles, blog posts, or any number of pages, but website content in general has become somewhat formulaic. Who's to say whether we conditioned the design or if the design conditioned us. Either way, I felt that the design principles were pervasive enough that even a small LLM would have a basic understanding of what makes a web page engaging. Therein lies the first connection.

The n8n Workflow

I'm not going to cover all of the possibilities with n8n, but I did want to explain how I set up my workflow, and some of the lessons I learned while doing it. I started with a chat, which is pretty easy and intuitive. You add the Chat node and it sends the text on down the line. Then there's the AI Agent, which will need a Model hooked up to it to do anything (subsequent Tools/Parsers may need them as well.) Probably the most important note on the AI Agent node is the system prompt option, which you will see in the Options - System Message section of the node. I knew that I would need to guide the output by having a strong system prompt in place. I designed that and kept it with the project to persist it and provide reproducible results if anyone wanted to stand up my project. Then I connected the chat to the llama3.1:8b model I have on my server and now I had chat client I could use to talk to the LLM running locally. The input prompt being something like "Frame a blog post about an n8n workflow." The output gets passed down the line to the Python Parser.

Seamless Python Parsing

n8n let's you just drop in a block of python to manipulate data as it passes through the Code node. I designed my python parser with hopefully enough flexibility in keywords to catch variability in the data I get from the LLM and properly handle it. So far it has worked pretty well. The parser itself breaks everything up into the blocks that PayloadCMS expects. Then it passes it on to an HTTP request to the PayloadCMS container.

1Method: POST
2URL: http://payloadcms-app:3001/api/create-post
3Content-Type: application/json
4Body: {{ JSON.stringify($json) }}
Copy

I bolted on an Express API server at port 3001 on the PayloadCMS container, docker networked to my n8n so no exposed ports. The API talks to an MCP style tool I built to process the data into the various elements using the PayloadCMS API locally in the container.

Blog Post All Framed Up

Once I had the complete workflow connected, I was able to see what kind of post framework it was able to come up with. I seriously thought I would have a lot of work cut out to tune the prompt, but it was just sensible right away. The Title, backgrounds, section length, code blocks, quote blocks, it did way better than I anticipated. The image below is of a post it generated with the chat you can see in the n8n workflow image above.

The n8n workflow did generate this posts framework, but it did not write any of the text. That's just yours truly.

What's Next

Just getting n8n up and running has had ideas buzzing through my head for a while. There's so much I want to build, and seemingly so little time. I know I want to add more block types to my PayloadCMS before I get too distracted, and maybe bolt on a fluid sim to this site. I'll give it a proper landing page before I give it an identity crisis though.