Package Exports
- minista
- minista/dist/main.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (minista) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
minista
Site & Documentation
About
minista(ミニスタ)は、React の JSX で書けるスタティックサイトジェネレーターです。Next.js 風の快適な環境で開発しながら 100% 静的な出力を行えます。SaaS の web テンプレートコーディング業務を想定しているため、ビルド後のデータが綺麗(ヒューマンリーダブル)です。
How To Use
Automatic Setup
$ npm init minista@latest
Manual Setup
$ npm install --save-dev minista react react-dom
public # Copy dist
src
└── pages # Required!
├── about
│ └── index.jsx
└── index.jsx
const PageHome = () => {
return (
<h1>Home</h1>
)
}
export default PageHome
package.json
を開き、以下のスクリプトを追加します。
"scripts": {
"dev": "minista",
"build": "minista build",
"preview": "minista preview",
}
Commands
command | detail |
---|---|
minista |
Development mode, Press Ctrl+C to stop |
minista build |
Static site generate |
minista preview |
Static data preview |
Customize
// 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
},
})
Libraries
Media
- Vite と esbuild を組み込み React 製 SSG を再構築 - minista v2
- React で書ける SSG 改善点と今後について - minista v1
- React(JSX)で書けるコーディング用 SSG - minista v0
Respect
- 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 でポートフォリオサイトを作る
License
- MIT