v3.1.6
  • ReactのJSXから綺麗なHTMLを作る日本製のスタティックサイトジェネレーター

    minista(ミニスタ)は静的サイト制作に特化したツールです。Viteのモダンな開発環境でJSXを書いて納品向きの綺麗なHTMLとアセットを出力。100%静的でサーバーに依存しません。

    • import { Head } from "minista"
      import MyComponent from "../components/my-component.tsx"
      
      export default function ({ children }: { children: React.ReactNode }) {
        return (
          <>
            <Head>
              <title>minista</title>
              <link rel="stylesheet" href="src/assets/style.css" />
              <script src="src/assets/script.ts" />
            </Head>
            <header className="header">minista</header>
            <main>
              <MyComponent title="Static site generator" />
            </main>
          </>
        )
      }
      
      React
    • <!DOCTYPE html>
      <html lang="ja">
        <head>
          <meta charset="UTF-8" />
          <meta http-equiv="X-UA-Compatible" content="IE=edge" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>minista</title>
          <link rel="stylesheet" href="/assets/style.css" />
          <script type="module" src="/assets/script.js"></script>
        </head>
        <body>
          <header class="header">minista</header>
          <main>
            <p class="my-component">Static site generator</p>
          </main>
        </body>
      </html>
      
      Vite

Feature

🔥 Modern Development

ministaは、静的サイト制作の開発体験をNext.js等に近づけ、ツールを持ち替えたときの違和感を減らします。

🔥 100% Static Generate

ministaは、普通のHTML・CSS・JSを書き出すSSGです。100%静的で無駄のないコードは環境に依存しません。

💎 Vite 4

Vite v4をビルドツールとして採用。webpackよりも高速な開発サーバーの立ち上げ・本番ビルドが可能です。

Vite公式サイト

💎 MDX 2

MDX v2を統合しているので、すぐにMDXやMarkdownでページを書けます。プラグインの追加も簡単。

MDX公式サイト

⚙️ Relative Path

サブディレクトリ設置のLPなどを想定し相対パスに対応。

詳細

⚙️ TypeScript

TypeScript(.tsx)による開発を前提に動作検証を行っています。

詳細

⚙️ Beautiful Code

ビルド後のHTMLは読みやすく整形。コンポーネントでコメントを付与。

詳細

⚙️ Dynamic Entry

Headでページに必要なCSSとJSをエントリーし、それぞれ個別出力。

詳細

⚙️ Image Optimisation

専用コンポーネントで画像を最適化、リモート画像をダウンロード。

詳細

⚙️ SVG Sprite Icon

複数のSVGアイコンファイルをまとめ、スプライト化できます。

詳細

⚙️ Fetch

非同期関数でAPIを叩いてページを生成できます。CMSと連携可能。

詳細

⚙️ Partial Hydration

部分的なReact Component化で動的なエリアを作れます。

詳細

⚙️ Delivery Support

納品用のページリストやZipファイルの生成を自動化します。

詳細