herf

A terminal-style blog CLI tool. Write markdown, get a CRT terminal blog.

Name origin: I always typed href as herf, so I made it a feature.

Features

• CRT terminal UI with scanline effects and flicker animations
• Simulated shell commands (ls, cat, grep, cd, pwd, theme, etc.)
• Markdown rendering with syntax highlighting (react-markdown + highlight.js)
• KaTeX math support
• Embedded PDF slides (Reveal.js)
• Floating window system
• Three built-in themes: green, amber, white
• Table of Contents generation
• Static site generation via Vite

Quick Start

npx herf init my-blog
cd my-blog
npm install
npm run dev

CLI Commands

| Command | Description | |---------|-------------| | herf init <name> | Scaffold a new blog project | | herf new <title> | Create a new post | | herf dev | Start Vite dev server | | herf build | Production build | | herf generate | Regenerate posts index |

Project Structure

herf/
├── bin/herf.mjs          # CLI entry point
├── lib/                   # CLI command implementations
│   ├── commands/          # init, new, dev, build, generate
│   └── utils/             # logger, generate helper
├── template/              # Blog template (React + Vite)
│   ├── blog.config.ts     # Site configuration
│   ├── src/
│   │   ├── shell/         # Terminal emulator + shell commands
│   │   ├── renderer/      # Markdown, code blocks, ToC
│   │   ├── ppt/           # PDF slide viewer
│   │   ├── components/    # FloatingWindow, etc.
│   │   └── styles/        # Terminal, markdown, theme CSS
│   └── public/
└── package.json

Configuration

Edit blog.config.ts in your blog project:

export default {
  name: "My Blog",
  banner: asciiArt,
  theme: "green",       // "green" | "amber" | "white"
  prompt: "visitor@blog:~$",
} satisfies SiteConfig;

Writing Posts

Posts are markdown files in src/data/posts/. Each file needs frontmatter:

---
title: My Post
date: 2026-05-21
category: tech
tags: [javascript, react]
---

Content here...

Or use the CLI:

herf new "My Post Title"

Tech Stack

• CLI: Node.js (>=18), Commander.js
• Template: React 18, Vite 6, TypeScript, Tailwind CSS 3
• Content: react-markdown, remark-gfm, KaTeX, react-syntax-highlighter
• Slides: Reveal.js, PDF.js

License

MIT