• https://minista.qranoko.jp

minista（ミニスタ）は、React の JSX と Vite で 100%静的なサイトを作るスタティックサイトジェネレーターです。

• すべてを JSX で書き、綺麗な HTML を生成！
• 静的 HTML が必要なウェブ制作の現場にも JSX のコンポーネント管理を導入したい
• 独自構文を使わず、エディタサポートの優れた TypeScript を活用したい

• すべての機能を Vite プラグインとして提供
• ビルド時に自動で Vite の「SSR ビルド + 通常ビルド」を実行

$ npm create minista@latest

$ npm install --save-dev minista vite react react-dom
$ touch ./minista.config.js
$ touch ./src/pages/index.jsx

// ./minista.config.js
import { pluginSsg } from "minista"

export default {
  plugins: [pluginSsg()],
}

// ./src/pages/index.jsx
export default function () {
  return <h1>Hello!</h1>
}

package.json を開き、以下のスクリプトを追加します。

{
  "scripts": {
    "dev": "minista",
    "build": "minista build",
    "preview": "minista preview"
  }
}

Vite の CLI コマンドオプションがすべて使えるほか、以下の独自オプションがあります。

Vite のコンフィグがすべて使えます。コンフィグファイルは minista.config.{ts,js}・vite.config.{ts,js} のどちらでも動作し、defineConfig も使用できます。

// ./minista.config.ts
import { defineConfig, pluginSsg } from "minista"

export default defineConfig({
  plugins: [pluginSsg()],
})

minista は Vite の SSR ビルドと通常ビルドを連続で行うため、ビルドの一括設定がエラーに繋がる場合があります。これは設定を SSR ビルド用・通常ビルド用に切り分けることで解消できます。

// ./minista.config.ts
import { defineConfig, pluginSsg } from "minista"

export default defineConfig(({ command, isSsrBuild }) => {
  const isDev = command === "serve"
  const isSsr = command === "build" && isSsrBuild
  const isBuild = command === "build" && !isSsrBuild
  return { plugins: [pluginSsg()], build: { minify: isBuild ? false : true } }
})

minista の各機能は同封されているプラグインをコンフィグに登録することで動作します。

• pluginSsg: React の JSX を静的な HTML に変換
• pluginMdx: MDX・Markdown を HTML の変換に対応させる
• pluginBundle: JSX 内で import した CSS・画像を出力
• pluginEntry: CSS・JS・画像をビルドプロセスに乗せる
• pluginImage: 画像を最適化・リモート画像をダウンロード
• pluginSvg: SVG ファイルを HTML にインライン展開
• pluginSprite: SVG ファイルを スプライト化して出力
• pluginComment: HTML にコメントを出力
• pluginIsland: ページの一部を React App 化
• pluginSearch: 全文検索機能を追加
• pluginBeautify: ビルド時に HTML・CSS・JS を整形
• pluginArchive: ビルド時に圧縮ファイルを生成

• MIT

• Author: Qrac
• Organization: QRANOKO