arashthr/hugo-flow

★ 2TypeScriptAudience · developerComplexity · 3/5ActiveSetup · moderate

Mindmap

mindmap
  root((hugo-flow))
    Inputs
      GitHub OAuth
      Post content
      Image drop
    Outputs
      Git commit
      Markdown file
      Base64 image
    Use Cases
      Edit Hugo posts
      No CLI publishing
      Mixed team writing
    Tech Stack
      Next.js
      TypeScript
      NextAuth

mindmap root((hugo-flow)) Inputs GitHub OAuth Post content Image drop Outputs Git commit Markdown file Base64 image Use Cases Edit Hugo posts No CLI publishing Mixed team writing Tech Stack Next.js TypeScript NextAuth

Things people build with this

USE CASE 1

Give non-technical writers a browser editor that commits Markdown to a Hugo repo

USE CASE 2

Switch between WYSIWYG and raw Markdown on the same post for mixed teams

USE CASE 3

Drop images into a post and have them committed as base64 alongside the Markdown

USE CASE 4

Self-host the editor behind Caddy as a reverse proxy over HTTPS

Tech stack

Next.jsTypeScriptNextAuthDocker

Getting it running

Difficulty · moderate Time to first run · 30min

Needs a GitHub OAuth app plus NextAuth env vars, and for production a Caddy reverse proxy with a matching callback URL.

In plain English

Hugo-Flow is a small web application that gives a content editing front end to a Hugo blog. Hugo is a popular tool for generating static websites from Markdown files, and those Markdown files normally live in a Git repository. Writing posts that way usually means opening a text editor, saving a file in the right folder, and pushing to GitHub. Hugo-Flow puts a browser-based editor in front of that workflow so an author can write, format, and publish without touching the command line. The app connects to GitHub through the GitHub OAuth flow and the GitHub API. Once you sign in, you pick which repository to write to and which folder inside it should hold posts. When you save a post, the app commits the Markdown file straight to your repo, which then triggers whatever build pipeline you already have set up for Hugo. The README lists four headline features: GitHub integration with direct commits, dynamic selection of repository and paths from the user interface, two editing modes that you can switch between, and image uploads. The two editing modes are a WYSIWYG rich text editor and a raw Markdown editor. You can move between them on the same post, so a writer who prefers a visual editor and a developer who prefers Markdown can share the same content. Image uploads are handled inline: when you drop an image into a post it gets pushed alongside the Markdown file as a base64 blob, so there is no separate media bucket to manage. The codebase is a Next.js application written in TypeScript. Local development is the standard Next.js routine: copy in environment variables for NextAuth and the GitHub OAuth client, run npm install, then npm run dev on port 3000. For production the README gives two paths. The first is a plain Node.js deployment, running npm run build followed by npm start. The second is a Docker Compose setup that uses Next.js standalone output to keep the container small. The README also walks through putting Caddy in front of the app as a reverse proxy. You update the GitHub OAuth callback URL to your production domain, drop production secrets into a .env file next to docker-compose.yml, bring the container up with docker-compose, and add a short Caddy block that proxies your domain to localhost:3000. After a Caddy reload the editor is reachable over HTTPS. A live demo is offered at hugo-flow.arashtaher.com.

Copy-paste prompts

Prompt 1

Set up Hugo-Flow locally with GitHub OAuth and connect it to my Hugo blog repo

Prompt 2

Write a docker-compose.yml plus Caddy block that proxies hugo-flow.example.com to port 3000

Prompt 3

Help me change the image upload pipeline to push to an S3 bucket instead of committing base64

Prompt 4

Add a draft toggle that writes posts under content/drafts and excludes them from the build

Prompt 5

Walk me through the NextAuth GitHub OAuth callback flow used for the commit token

Open on GitHub → Explain another repo

Generated 2026-05-22 · Model: sonnet-4-6 · Verify against the repo before relying on details.