Hugo is fast. But writing consistent Markdown across many posts is… not always. Titles wander between Front Matter and # H1, shortcodes creep into code blocks, lines run 200+ characters, and someone always pastes a curly quote that breaks something downstream. I wanted a small, local, zero-setup editor that helps me (and guest authors) write better, shippable posts without touching a server.

So I built a Hugo Post Editor that runs entirely in your browser. It focuses on Markdown consistency, usability, and linting for quality—with a few smart features to smooth the rough edges of everyday blogging.

Check the Editor here…

The core problem: Markdown consistency (solved)

Hugo already pulls the title from Front Matter, so body-level # H1 is usually redundant. The editor surfaces that and other common gotchas:

  • Headings sanity: warns when you use multiple H1s or skip levels (e.g., H2 → H4).
  • Readable lines: flags ultra-long lines so you can break for readability.
  • Invisible traps: finds tabs, non-breaking spaces, trailing whitespace, curly quotes, and ellipses (→ suggests ...).
  • Links & code fences: detects suspicious link syntax and unclosed ``` fences.
  • Shortcodes where they belong: warns on raw shortcode patterns in prose and validates attributes for figure/video.

Result: Posts export in a shape Hugo loves, and future-you won’t have to fix ghost bugs at 11 pm.

Usability: calm UI, strong defaults

  • Clean toolbar for the things you press daily: H1–H3, bold/italic, quotes, lists, links, rules, inline/code blocks, and one-tap figure/video.
  • Sticky tools & keyboard shortcuts (e.g., ⌘/Ctrl + B, ⌘/Ctrl + K, ⌘/Ctrl + Alt + 1..3).
  • Mobile-ready: on small screens, settings slide in as an off-canvas dialog.
  • Draft & TOC toggles: quick Front Matter switches without hand-editing YAML.
  • Categories & tags: presets with chip UI; add your own in a click.
  • Autosave: state is kept in localStorage; close the tab and nothing is lost.
  • Dark/Light mode: one tap; respects system preference.

Everything is optimized for the “type → glance at hints → fix → export” loop.

Linting that improves writing quality

Beyond syntax, the linter nudges better content:

  • Front Matter quality: checks title length, date presence/format, category/tags set, description length (≈ ≤ 160 recommended), slug validity, and cover alt text (for accessibility & SEO).
  • Body clarity: pushes for consistent punctuation, quotes, and readable sections.
  • Hugo conventions: reminds you that H1 belongs in Front Matter, not the body.

You’ll see badges for Errors/Warnings/Infos and a live list of actionable hints with line numbers. Fix as you type.

Smart media: write filenames, get shortcodes

Drop your assets into the post bundle’s images/ folder and simply put a filename on its own line:

my-photo.webp
clip.mp4

On export, the editor converts those lines into proper Hugo shortcodes:

  • Images → < figure src="images/my-photo.webp" alt="" caption="" >
  • Videos → < video src="images/clip" preload="auto" > (the preload value is configurable)

It also escapes shortcodes inside code so fenced blocks stay literal and never break rendering.

Features at a glance

  • Runs 100% locally in your browser — no server, no uploads.
  • Internationalization (de/en) for UI and hints.
  • One-click export to a production-ready index.md with Front Matter:
    • title, date, slug, description
    • categories, tags
    • cover.image, cover.alt, cover.relative
    • draft, ShowToc
  • Live linting for both Front Matter and Markdown body.
  • Keyboard-first workflow with thoughtful shortcuts.
  • Shortcode validation (figure, video) and safe escaping in code.
  • Autosave & restore via localStorage.

Tech stack (intentionally simple)

  • HTML + Vanilla JavaScript — no frameworks, minimal surface area.
  • Tailwind CSS (CDN for prototyping; bundle Tailwind for production).
  • LocalStorage for state, Blob downloads for index.md export.
  • Lightweight i18n via a plain object (DE/EN strings + runtime swapping).
  • Zero external services; everything happens in the page.

This keeps it portable, easy to audit, and fast enough to feel instant.

Check the readme.html for technical documentation here…

Who it’s for

  • Beginners get a forgiving editor that explains what’s wrong—and why—without ever touching a terminal.
  • Power users get speed: shortcuts, linting, and export that match Hugo conventions and CI rules.

Workflow

  1. Fill in meta (title, date, description, category, tags, cover).
  2. Write content, use the toolbar/shortcuts, and watch hints update live.
  3. Add media by typing filenames on their own lines.
  4. Toggle Draft/TOC, set video preload defaults if needed.
  5. Export → index.md and drop it into your post bundle. Done.

Limitations & next ideas

  • The editor can’t validate whether images/… actually exists (it can’t see your disk).
  • The linter is opinionated (by design) about H1 and punctuation.
  • Roadmap: custom lint rules, front-matter templates per section, and optional CI-style JSON export of issues.

Conclusion

If you want consistent Markdown, fewer release-time surprises, and a calmer writing flow for Hugo, this editor does the boring parts for you—locally, fast, and with helpful guardrails.

Happy writing ✍️