Quick Start

Methanol transforms a directory of Markdown and MDX files into a high-performance static site with automatic routing, navigation, and a robust build pipeline.

Getting started is simple: create pages/index.mdx, add your content, and Methanol will automatically build the routes and navigation tree.

Instant Preview

Experience Methanol immediately by running the development server via npx:

npx methanol dev

Then, open http://localhost:5173 in your browser.

Using an Existing Directory

If you already have a collection of Markdown or MDX files, point Methanol directly to that directory:

npx methanol dev ./my-docs

The specified folder becomes the content root; for example, ./my-docs/index.mdx maps to the site root (/).

Installation

For frequent use, we recommend installing Methanol globally to benefit from faster CLI startup:

npm install methanol -g
methanol dev

Production Workflow

Generate an optimized production build and preview it locally:

methanol build
methanol serve

The serve command hosts the contents of the dist/ directory for final verification.

Advanced Build Example

Methanol's CLI supports various flags to override configurations on the fly:

methanol build --pwa --search --theme blog --site-name "My Site"

This command enables PWA and search indexing, switches to the blog theme, and sets a custom site name.

Project Structure

Files in public/ are served at the site root (e.g., public/logo.png → /logo.png).

Creating Your First Page

Create pages/index.mdx with the following content:

---
title: Home
---

# Welcome

This is my new documentation site.

The file structure is automatically mapped to URL routes:

pages/index.mdx       -> /
pages/guide.mdx       -> /guide
pages/blog/post.mdx   -> /blog/post