Build a traditional multi-page site with separate HTML files for each page. Perfect for content sites, blogs, and documentation.
Creates a new project folder and initializes package.json
Downloads Domma from npm (~260KB minified)
Creates a complete multi-page site structure with separate HTML files
pages/index.html in your browser or run:
This is a working example of what your MPA will look like. Each section represents a separate HTML page.
A beautiful multi-page site built with Domma
Optimized for speed and performance
Built with security best practices
No external dependencies required
{
"project": {
"name": "My MPA Site",
"version": "1.0.0"
},
"theme": {
"default": "charcoal-dark",
"persist": true
},
"navbar": {
"brand": { "text": "My Site", "url": "/" },
"items": [
{ "text": "Home", "url": "index.html" },
{ "text": "About", "url": "about/index.html" },
{ "text": "Contact", "url": "contact/index.html" }
]
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../node_modules/domma-js/public/dist/domma.css">
<link rel="stylesheet" href="../node_modules/domma-js/public/dist/elements.css">
<link rel="stylesheet" href="../css/custom.css">
</head>
<body class="dm-theme-charcoal-dark">
<nav id="navbar"></nav>
<main class="container py-6">
<h1>Welcome to My Site</h1>
<p>This is a multi-page application.</p>
</main>
<footer class="page-footer"></footer>
<script src="../node_modules/domma-js/public/dist/domma.min.js"></script>
<script src="../js/app.js"></script>
</body>
</html>
Your MPA is set up and ready. Start editing pages in the pages/ folder.