プロジェクト構成
はじめるの最小構成を基に、ファイルの役割と、機能を追加した後の配置例を確認します。
ministaはデフォルトでsrc/pages/のページとsrc/layouts/index.tsxまたはindex.jsxのレイアウトを読み込みます。
共通コンポーネントやアセットは、プロジェクトに合わせて整理できます。
Table of Contents
- 基本的なディレクトリ
- ページ：src/pages
- レイアウト：src/layouts
- コンポーネント：src/components
- アセット：src/assetsとpublic
- 設定ファイル
- 生成されるディレクトリ
- ページの場所を変える
基本的なディレクトリ
my-minista-project/
├── public/
│ └── favicon.svg
├── src/
│ ├── assets/
│ │ ├── styles.css
│ │ └── scripts.ts
│ ├── components/
│ │ └── header.tsx
│ ├── layouts/
│ │ └── index.tsx
│ └── pages/
│ ├── index.tsx
│ └── about.tsx
├── package.json
├── tsconfig.json
└── vite.config.tsこれは構成例です。最小テンプレートにはレイアウトや共通コンポーネントは含まれないため、必要に応じて追加します。
ページ：src/pages
.tsx .jsx .mdx .mdファイルがページになります。ファイル名とディレクトリ構造からURLが決まります。
共通パーツやページとして公開しないMDXは、src/components/などページの探索対象外へ置きます。ページの作り方はファイルベースルーティングを参照してください。
レイアウト：src/layouts
src/layouts/index.tsxまたはindex.jsxは、すべてのページを包む共通レイアウトです。ヘッダー、フッター、HTMLの言語、共通のhead要素などをまとめます。
両方の拡張子で同じレイアウトを作らず、利用する言語に合わせて一つ用意してください。レイアウトなしでもページを生成できます。
コンポーネント：src/components
ヘッダーやカードなど、再利用するReactコンポーネントを置きます。この名前のディレクトリに特別な処理はなく、ページやレイアウトからimportして使います。
アセット：src/assetsとpublic
| 置き場所 | 用途 |
|---|---|
src/assets/ | importやHTML属性から参照し、Viteで処理するCSS・JavaScript・画像など |
public/ | ファイル名と内容を保って出力するfavicon、PDFなど |
例えばpublic/favicon.svgは/favicon.svgとして参照します。URLにpublicは含めません。使い分けはpublicのファイルと画像のバンドルで紹介します。
設定ファイル
vite.config.tsまたはvite.config.jsでプラグイン、開発サーバー、ビルドの設定を行います。TypeScriptの構成にはtsconfig.jsonを追加します。
Basicテンプレートのproject.jsonは、サイト情報などをまとめるためのデータファイルです。ministaが自動的に設定として読み込むファイルではなく、必要なコンポーネントからimportして利用します。
生成されるディレクトリ
dist/は本番ビルドの出力先です。生成後のファイルを直接編集せず、ソースを修正して再ビルドします。
キャッシュや検査結果などは、ルートにpackage.jsonがある場合はnode_modules/.minista/、ない場合はルート直下の.minista/へ保存されます。これらは公開するサイトのファイルではありません。
ページの場所を変える
ページの探索範囲と、URLから取り除く基準ディレクトリを一緒に設定します。
import { defineConfig, pluginSsg } from "minista"
export default defineConfig({
plugins: [
pluginSsg({
src: ["src/screens/**/*.{tsx,jsx,mdx,md}"],
srcBases: ["src/screens"],
layout: "src/layouts/site.tsx",
}),
],
})パスはプロジェクトルートからの相対パスです。設定の詳細はpluginSsgを参照してください。
次は設定で、プラグインや出力先の設定方法を確認します。