Zenn
Closed4

ministaを触ってみる

SSG
minista
こまもか🦊こまもか🦊

セットアップの前に自分の環境をメモっとく

  • pnpm 8.6.0
  • ni 0.21.2

AstroやViteみたいにnpm createでセットアップができる。TypeScriptとJavaScriptのどちらかを選択できる。
pnpm create minista@latest

ni
nr dev

http://localhost:5173にアクセスすると以下のように表示される。

ポート番号的に内部ではViteを使ってそう。docに

webpack は起動時にすべてをバンドルしてメモリに乗せる設計なので、内容が膨らむほどパフォーマンスが悪化。プロジェクト終盤だと起動に 10 秒以上かかる場合もあり悩みました。

とあるように、パフォーマンスに難があったためViteを採用してるっぽい。実際開発サーバーの起動はかなり速い。

こまもか🦊こまもか🦊

セットアップは完了したのでやってみたい事をまとめてみる

  • ゼロコンフィグなドキュメントジェネレーター
  • Tailwind CSSを使ったスタイリング
  • Preline UIを使ったスタイリング

ゼロコンフィグなドキュメントジェネレーターはもともとNimで書くつもりだったけど、リッチなHTMLを出力させようとすると、どうしてもJSXとかで書かないとしんどくなりそうだったので一旦こっちで試してみたい

こまもか🦊こまもか🦊

ministaにTailwindを適用出来たのでメモ

// src/global.tsx
import type { GlobalProps } from "minista"
import { Head } from "minista"

export default function ({ url, title, children }: GlobalProps) {
  return (
    <>
      <Head>
        <title>{title}</title>
        <meta property="description" content="description" />
      </Head>
      {url === "/" ? (
        <div className="home">{children}</div>
      ) : (
        <div>{children}</div>
      )}
    </>
  )
}
  • ビルドされたCSSをグローバルコンポーネントでimportする
    これでページ全体にTailwind CSSが読み込まれる

ついでにDaisy UIも導入してみる。

  • ni -D daisyuiでインストール
  • tailwind.config.jsのpluginにrequire("daisyui")を追加
このスクラップは2023/06/03にクローズされました