クイックスタート

Methanol は、Markdown や MDX ファイルが含まれるフォルダを、ルーティング、ナビゲーション、ビルドパイプラインを備えた静的サイトへと即座に変換します。

複雑なセットアップは不要です。pages/index.mdx を作成し、ファイルやフォルダを追加していくだけで、ルートとナビゲーションが自動的に生成・更新されます。

動作確認

npx を使用して、すぐに Methanol を試すことができます。

npx methanol dev

ブラウザで http://localhost:5173 を開いてください。

既存の Markdown フォルダを利用する

すでに Markdown または MDX ファイルが保存されているフォルダがある場合は、そのディレクトリを指定して起動できます。

npx methanol dev ./my-docs

指定したフォルダがコンテンツのルートとなり、例えば ./my-docs/index.mdx は / にマッピングされます。

開発ワークフローの高速化

頻繁に使用する場合は、グローバルインストールを行うことで CLI の起動時間を短縮できます。

npm install methanol -g
methanol dev

本番環境用ビルド

npx methanol build
npx methanol serve

serve コマンドを使用すると、dist/ に出力されたビルド成果物をローカルでプレビューできます。

プロジェクト構造

pages/        # MDX/MD ページ（または docs/ も利用可能）
components/   # MDX 内で使用する JSX/TSX コンポーネント
public/       # 静的アセット（テーマのアセットを上書き可能）
build/        # 中間 HTML（オプション）
dist/         # ビルド成果物の出力先

public/ 内のファイルはサイトのルート / で配信され（例: public/logo.png → /logo.png）、テーマが提供するアセットよりも優先されます。

最初のページの作成

pages/index.mdx を作成します。

---
title: ホーム
---

# ようこそ

これは Methanol で構築されたサイトです。

ファイルパスがそのままサイトのルートになります。

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