minista

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

Basic Setup Read the Docs

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

<!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>

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ファイルの生成を自動化します。

詳細 →