Adding a CMS UI to Hugo with TinaCMS

I love that my personal site, ajot.me, runs on Hugo. Markdown keeps things simple, and the whole setup works well. But sometimes, I just want a UI to edit posts quickly without cracking open a text editor.

I already have an email-to-post system running with Postmark and GitHub Actions. I send an email, and boom—new post published. But I wanted an easier way to tweak existing posts without going into markdown files manually.

Enter Tinacms - an open-source, headless CMS that provides a visual interface for managing content while keeping everything stored as markdown. I first heard about it from Cassidy Williams and last week ran into the TinaCMS team at NDC London.

It looked like the perfect fit. I just had to figure out a way to do this without making any drastic changes to my existing local Hugo setup. So, I did.

Setting Up Tinacms with Hugo

Here’s how to get a UI for editing Hugo posts in no time:

1. Install Hugo

brew install hugo

If you already have it, skip this.

2. Fire up your Hugo site

hugo server -D

This lets you preview everything locally.

3. Add Tinacms

npx @tinacms/cli@latest init

This sets up Tina in your Hugo project.

4. Run Tinacms with Hugo

npx tinacms dev -c "hugo server -D -p 1313"

This starts Hugo alongside the TinaCMS UI. Once running, your Hugo site will be available at http://localhost:1313/, and the TinaCMS admin interface will be accessible at http://localhost:1313/admin.

Now I’ve got an admin interface where I can edit posts like a civilized person.