minista(ミニスタ)は、React の JSX で書けるスタティックサイトジェネレーターです。Next.js 風の快適な環境で開発しながら 100% 静的な出力を行えます。SaaS の web テンプレートコーディング業務を想定しているため、ビルド後のデータが綺麗(ヒューマンリーダブル)です。
$ npm init minista@latest$ npm install --save-dev minista react react-dompublic # Copy dist
src
└── pages # Required!
├── about
│ └── index.jsx
└── index.jsxconst PageHome = () => {
return (
<h1>Home</h1>
)
}
export default PageHomepackage.json を開き、以下のスクリプトを追加します。
"scripts": {
"dev": "minista",
"build": "minista build",
"preview": "minista preview",
}| command | detail |
|---|---|
minista |
Development mode, Press Ctrl+C to stop |
minista build |
Static site generate |
minista preview |
Static data preview |
// minista.config.ts
import { defineConfig } from "minista"
export default defineConfig({
base: "/", // string
public: "public", // string
out: "dist", // string
root: {
srcDir: "src", // string
srcName: "root", // string
srcExt: ["tsx", "jsx"], // string[]
},
pages: {
srcDir: "src/pages", // string
srcExt: ["tsx", "jsx", "md", "mdx"], // string[]
},
assets: {
entry: "", // string | string[] | { [key: string]: string }
outDir: "assets", // string
bundle: {
outName: "bundle", // string
},
images: {
outDir: "assets/images", // string
outName: "[name]", // string
},
fonts: {
outDir: "assets/fonts", // string
outName: "[name]", // string
},
svgr: {
svgrOptions: {}, // https://react-svgr.com/docs/options/
},
icons: {
useSprite: true, // boolean
srcDir: "src/assets/icons", // string
outDir: "assets/images", // string
outName: "icons", // string
svgstoreOptions: {
cleanSymbols: ["fill", "stroke", "stroke-linejoin", "stroke-width"],
}, // https://github.com/svgstore/svgstore#svgstore-options
},
download: {
useRemote: false, // boolean
remoteUrl: ["https://", "http://"], // string[]
remoteName: "remote-[index]", // string
outDir: "assets/images", // string
},
},
vite: {}, // https://vitejs.dev/config/
markdown: {
syntaxHighlighter: "highlight", // "highlight" | "none"
highlightOptions: {}, // https://github.com/rehypejs/rehype-highlight#options
mdxOptions: {
remarkPlugins: [], // https://mdxjs.com/packages/mdx/#optionsremarkplugins
rehypePlugins: [], // https://mdxjs.com/packages/mdx/#optionsrehypeplugins
},
},
beautify: {
useHtml: true, // boolean
useAssets: false, // boolean
htmlOptions: {
indent_size: 2,
max_preserve_newlines: 0,
indent_inner_html: true,
extra_liners: [],
inline: ["span", "b", "br", "code", "del", "s", "small", "strong", "wbr"],
}, // https://github.com/beautify-web/js-beautify#css--html
cssOptions: {}, // https://github.com/beautify-web/js-beautify#css--html
jsOptions: {}, // https://github.com/beautify-web/js-beautify#options
},
})- Vite と esbuild を組み込み React 製 SSG を再構築 - minista v2
- React で書ける SSG 改善点と今後について - minista v1
- React(JSX)で書けるコーディング用 SSG - minista v0
- Next.js by Vercel - The React Framework
- Charge — an opinionated, zero-config static site generator
- Eleventy, a simpler static site generator.
- Node Interface | webpack
- natemoo-re/microsite
- Astro
- テンプレートエンジンに React を使いつつ、きれいな HTML を生成したいんじゃ!!
- EJS をやめて React で HTML を書く
- MPA(マルチページアプリ)で webpack を使う
- HTML コーディングでも React+TypeScript の開発体験を得る
- Astro と microCMS でポートフォリオサイトを作る
- MIT