Recently, I decided to create a custom editor for my Hugo-based blog. The main goal was to streamline content creation and make it easier to manage posts without constantly switching between files and the terminal.

Why I Built It

Writing and managing content in Hugo can be a bit cumbersome, especially if you need to handle front matter, slug generation, and Markdown files manually. I wanted a tool that would allow me to:

• Edit metadata like title, description, tags, and categories in a simple form.
• Write Markdown content in a live editor with a preview.
• Automatically generate slugs and front matter.
• Save posts directly to GitHub without leaving the app.

How I Built It

The project is split into frontend and backend:

• Frontend: Built with React, featuring a metadata form and a Markdown editor powered by SimpleMDE. It includes live preview and automatic slug generation.
• Backend: A Flask server that handles saving posts. It writes files locally for testing and uploads them directly to GitHub using the API. This allows me to keep my Hugo content in sync without manually committing files.

Key Features

• Live slug generation based on the post title.
• Markdown editor with preview.
• Automatic front matter generation for Hugo.
• Direct GitHub upload, bypassing manual Git commands.

Outcome

Now, I can focus purely on writing content while the editor takes care of file structure, metadata, and uploads. It makes creating new posts much faster and reduces the chance for errors.

This project also served as a learning exercise, combining React, Flask, GitHub API, and Markdown handling into a single, cohesive workflow.

You can find the editor project here!