設定

ministaのプラグインとViteの設定は、プロジェクトルートのvite.config.tsまたはvite.config.jsにまとめます。

Table of Contents

最小の設定

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

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

defineConfigはministaから利用できます。pluginSsg()はページを静的HTMLとして出力するための必須プラグインです。Markdown・MDXの変換や、ページから参照するCSS・JavaScript・画像の出力も担います。

minista.config.*も後方互換のため利用できますが、新しいプロジェクトではvite.config.*を使います。複数の設定ファイルがあると競合エラーになるため、一つにまとめてください。

必要なプラグインを追加する

静的HTML出力に必要なpluginSsg()に加え、画像最適化やIslandなどのプラグインをvite.config.*に追加します。

vite.config.ts
import { defineConfig, pluginSsg, pluginImage, pluginIsland } from "minista"

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

静的ページだけであれば、最小設定から始められます。

目的プラグイン
ページ生成・Markdown・MDX・アセット出力pluginSsg
画像最適化pluginImage
SVG最適化・SVGスプライトpluginSvg・pluginSprite
HTMLコメントpluginComment
Reactによる部分的な操作UIpluginIsland
静的サイト内検索静的サイト内検索
コードの整形・アーカイブ生成pluginBeautify・pluginArchive

各機能の導入手順はガイド、引数の型と既定値はプラグインのページで確認できます。

各プラグインの引数に、その機能のオプションを渡します。MDXなどSSGに含まれる機能は、pluginSsg({ mdx: { ... } })のように指定します。

開発サーバーと出力先

開発サーバーと出力を変更する場合の設定例です。

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

export default defineConfig({
  plugins: [pluginSsg()],
  server: {
    port: 3000,
    open: true,
  },
  build: {
    outDir: "dist",
    assetsInlineLimit: 0,
  },
})

assetsInlineLimit: 0は、小さな画像などをインライン化せずファイルとして出力したい場合に指定します。

TypeScriptを設定する

TypeScriptのテンプレートを使わなかった場合は、必要なパッケージを追加します。

npm install --save-dev typescript @types/react @types/react-dom
tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true,
    "jsx": "react-jsx",
    "types": ["minista/client"]
  },
  "exclude": ["node_modules", "dist"]
}

minista/clientにはMDX・Markdown・IslandやViteの型定義が含まれます。

型チェックはnpx tsc --noEmitで別途実行します。ministaのビルドは型エラーの検査を含みません。

出力の設定を選ぶ

配信用の圧縮やファイル名、アセットの出力先はViteのbuildで設定します。基本的な出力から始め、公開先や納品要件に合わせて調整してください。

環境変数を利用する

ビルド時のデータ取得には、Node.js側でprocess.envを参照できます。例えばCIやターミナルで設定したAPIの認証情報を利用します。データを用意する基本の仕組みはページへデータを渡す、APIを使った取得とページ生成はAPIによるページ生成を参照してください。

ブラウザへ公開するViteの環境変数はimport.meta.env.VITE_*で参照します。認証情報をVITE_付きの変数へ入れたり、ページのpropsやHTMLへ出力したりしないでください。

次はビルドとデプロイで、最小構成の出力を確認し、公開手順や公開先の設定を紹介します。

前のページプロジェクト構成
次のページビルドとデプロイ