Markdown Blog Generator

A simple, lightweight static blog generator that converts Markdown files into a styled HTML blog.

Overview

Markdown Blog Generator is a command-line tool that transforms a directory of Markdown files into a fully functional static blog website. It features:

• Simple, responsive design
• Syntax highlighting for code blocks
• Front matter support for metadata
• Watch mode for automatic rebuilding on file changes
• Clean, modern styling

Supported Languages

This project supports code highlighting for almost all popular programming and markup languages, such as: HTML, JavaScript, Python, Java, and much more. To view all supported languages, visit the following documentation of highlight.js library.

https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md

Prerequisites

• Node.js
• npm

Usage

Basic Usage

Install and run the tool:

npm install -g md-blog-generator

md-blog-generator

Or just use:

npx md-blog-generator

You'll be asked to provide:

• Input directory: where your Markdown files are located
• Output directory: where the generated HTML files will be saved

Watch Mode

To automatically rebuild your blog when Markdown files are changed:

md-blog-generator --watch
# or
md-blog-generator -w

You can also use:

npx md-blog-generator --watch
# or
npx md-blog-generator -w

Help

To see all available options:

md-blog-generator --help

Writing Content

File Structure

Place all your Markdown files in your input directory. Each file will be converted to a corresponding HTML page in the output directory.

Example structure:

my-blog/
├── posts/             # Input directory
│   ├── first-post.md
│   ├── second-post.md
│   └── third-post.md
└── public/            # Output directory (will be created)
    ├── index.html
    ├── first-post.html
    ├── second-post.html
    └── third-post.html

Front Matter

Each Markdown file can include YAML front matter at the top to specify metadata:

---
title: My First Blog Post
date: 2025-03-30
excerpt: This is a brief summary of my first blog post.
---

# Content starts here

This is the content of my blog post...

Supported front matter fields:

• title: The title of the post (defaults to filename if not specified)
• date: Publication date (used for sorting on the index page)
• excerpt: A short summary displayed on the index page

Writing Markdown

The tool supports standard Markdown syntax plus:

• Code blocks with syntax highlighting

  ```javascript
  function hello() {
    console.log("Hello, world!");
  }
  ```

• Images

  ![Alt text](https://example.com/image.jpg)

• Links

  [Link text](https://example.com)

• Blockquotes

  > This is a blockquote

Customization

Styling

To customize the styles, modify the CSS in the template function in generator.js. The template uses CSS variables that can be easily changed:

:root {
  --primary-color: #3498db;      /* Main accent color */
  --secondary-color: #2c3e50;    /* Secondary accent color */
  --background-color: #f9f9f9;   /* Page background */
  --text-color: #333;            /* Main text color */
  --border-color: #eaeaea;       /* Border color */
  --code-bg: #f5f5f5;            /* Code background */
}

Template

To change the HTML structure, modify the template function in generator.js.

Examples

Basic Blog Post

---
title: Getting Started with JavaScript
date: 2025-03-28
excerpt: Learn the basics of JavaScript programming in this beginner-friendly guide.
---

# Getting Started with JavaScript

JavaScript is one of the most popular programming languages in the world. In
this guide, we'll cover the basics to get you started.

## Variables

You can declare variables using `let`, `const`, or `var`:

```javascript
let name = "John";
const age = 30;
var isStudent = true;
```

## Functions

Functions are reusable blocks of code:

```javascript
function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("John")); // Outputs: Hello, John!
```

Common Issues

• Error: ENOENT: no such file or directory: Make sure the input directory exists and is accessible.
• No HTML files generated: Check that your input directory contains Markdown files (.md extension).