クイックスタート

Methanol は、Markdown や MDX ファイルが含まれるディレクトリを、自動ルーティング、ナビゲーション、および強力なビルドパイプラインを備えた高性能な静的サイトへと即座に変換します。

セットアップは非常に簡単です。pages/index.mdx を作成してコンテンツを追加するだけで、Methanol がルートとナビゲーションツリーを自動的に構築します。

クイックプレビュー

npx を使用して開発サーバーを起動し、すぐに Methanol を体験できます。

npx methanol dev

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

既存のディレクトリを利用する

すでに Markdown や MDX ファイルが保存されているディレクトリがある場合は、その場所を直接指定して起動可能です。

npx methanol dev ./my-docs

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

インストール

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

npm install methanol -g
methanol dev

本番用ワークフロー

最適化された本番用ビルドを生成し、ローカルでプレビューします。

methanol build
methanol serve

serve コマンドは、dist/ ディレクトリの内容をホストし、最終的な確認を可能にします。

ビルドオプションの例

CLI フラグを使用することで、実行時に設定を上書きできます。

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

この例では、PWA と検索インデックスを有効化し、テーマを blog に切り替え、カスタムのサイト名を設定しています。

プロジェクト構造

public/ 内のファイルはサイトのルートで配信されます（例: public/logo.png → /logo.png）。

最初のページの作成

以下の内容で pages/index.mdx を作成します。

---
title: ホーム
---

# ようこそ

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

ファイル構造は自動的に URL ルートへマッピングされます。

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