Minimalify is a zero-dependency CLI/library for building blazing-fast, static HTML/CSS/JS sites with reusable components. Drop in your source, define a tiny config, run minimalify build, and get a fully inlined, minified build/ folder ready for GitHub Pages or any static host.
minimalify [options] [command]
Minimalify is a zero-dependency CLI/library for building blazing-fast, static HTML/CSS/JS sites
Options:
-V, --version output the version number
-v, --verbose Enable verbose logging (default: false)
-j, --json Output in JSON format (default: false)
-h, --help display help for command
Commands:
init [options] Initialize the minimalify.config.js file.
build [options] Build the project using the minimalify.config.js file
dev [options] Launch the project using the minimalify.config.js file and watch for changes.
help [command] display help for command
Generate awesome static site with @minimalify. Contribute at https://github.com/ragarwalll/minimalify.git
- Fetch and bundle shared base CSS, base JS, and arbitrary assets (images, fonts, icons)
- Concatenate & minify your project’s CSS via PostCSS + cssnano
- Concatenate & minify your project’s JS via Terser
- Inline reusable HTML components with dynamic
{{param}}and{{children}} - Scan HTML/CSS for remote URLs (
<link>,<script>,<img>,url(...)) and download them locally - Purge unused CSS selectors (PurgeCSS) for minimal CSS footprint
- Minify final HTML (html-minifier-terser)
- Zero runtime dependencies in your final
build/ - Incremental builds via a dependency DAG + BFS
- Caching of transform results (LRU caches) and HTTP assets (Bloom filter)
- Parallel transforms (p-limit worker pool)
- Merkle-style content-hash checks
- Dev server with HMR: CSS hot-swap, JS reload, page-diff via Morphdom
npm install --save-dev minimalifymy-site/
├── src/
│ ├── css/
│ │ ├── base.min.css ← shared, auto-downloaded
│ │ └── site.css ← your custom styles
│ ├── js/
│ │ ├── base.min.js ← shared, auto-downloaded
│ │ └── site.js ← your custom scripts
│ ├── img/
│ │ └── logo.svg ← project-specific images
│ ├── templates/
│ │ └── contacts.html ← reusable component template
│ ├── index.html
│ └── about.html
├── minimalify.config.js ← build configuration
└── package.json
module.exports = {
srcDir: 'src',
outDir: 'dist',
sharedDomains: ['https://therahulagarwal.com'],
html: {
minify: true,
},
css: {
minify: true,
},
js: {
minify: true,
minifyOptions: {},
},
images: {
optimize: true,
supportedFormats: ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'],
ignore: [],
},
templates: {
dir: 'templates',
sharedUri: [],
},
dev: {
port: 3000,
},
cache: true,
plugins: [
'accessibility',
'bundle-analyzer',
'custom-domain',
'image-optimizer',
'markdown',
'perf-monitor',
'seo',
'sitemap',
'spa',
'version-assets',
],
};Add to your package.json:
{
"scripts": {
"build": "minimalify build",
"dev": "minimalify dev"
}
}Then:
npm run build # production build
npm run dev # dev server + HMRimport { build, dev } from 'minimalify';
// production build
await build('minimalify.config.js');
// start dev server
await dev('minimalify.config.js');Define a template with {{param}} and {{children}} in src/templates/contacts.html:
<section class="contacts">
<h2>Contact Us</h2>
<ul>
<li>Email: <a href="mailto:{{email}}">{{email}}</a></li>
<li>Phone: <a href="tel:{{phone}}">{{phone}}</a></li>
</ul>
<div class="extra">{{children}}</div>
</section>Use it in any page:
<include-contacts email="hi@example.com" phone="+1234567890">
<p>Office hours: Mon–Fri, 9am–5pm.</p>
</include-contacts>Minimalify inlines, replaces {{…}}, and nests inner HTML automatically.
- Push the
build/folder togh-pagesbranch (or point Pages to/buildonmain). - Your site is live at
https://<user>.github.io/<repo>/.
This project is licensed under the Apache License 2.0. See the LICENSE file for details.