minista

Site & Documentation

• https://minista.qranoko.jp

About

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

Concept

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

Features

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

Setup

Automatic

$ npm create minista@latest

Manual

$ 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"
  }
}

CLI

|コマンド |内容 | | ------------------------ | ---------------------------------------------- | | minista [root] |開発モード（Ctrl + C で停止） | | minista build [root] |静的書き出し（SSRビルド後に連続で通常ビルド）| | minista preview [root] |静的書き出し後の動作確認 |

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

|独自のオプション|内容 | | ---------------- | ------------------------------------------------- | | --oneBuild | ministaのビルドを1回に制限（連続ビルドしない）|

Config

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 } }
})

Plugins

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:ビルド時に圧縮ファイルを生成

License

• MIT

Credit

• Author: Qrac
• Organization: QRANOKO