MPA QuickStart

A traditional multi-page site, one HTML file per page. Ideal for content sites, blogs and documentation.

Search-engine friendly Works without JavaScript Any static host

Set up your MPA in three steps

1
1
Create the project
mkdir my-site
cd my-site
npm init -y
2
2
Install Domma
npm install domma-js

About 175 KB gzipped.

3
3
Generate the MPA
npx domma-js init --mpa

A complete multi-page site, one HTML file per page.

What you get

domma.config.json           theme, navbar, footer
frontend/
├── dist/domma/             the Domma files
├── css/custom.css          your styles
├── js/app.js               shared start-up for every page
└── pages/
    ├── index.html + index.js
    ├── about/  contact/  blog/  docs/
    └── privacy/  cookies/  terms/

Open frontend/pages/index.html, or serve the project and visit /frontend/pages/:

npx http-server

Add a page any time with npx domma-js add page.

What it looks like

Each page is its own HTML file sharing the navbar, footer and theme. The home page starts out like this:

Welcome to my site

A multi-page site built with Domma

Fast

Built for speed and performance.

Secure

Built with security good practice.

Zero dependencies

Nothing else to install.

The code

domma.config.json

{
  "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" }
    ]
  }
}

frontend/pages/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="../dist/domma/domma.css">
  <link rel="stylesheet" href="../dist/domma/grid.css">
  <link rel="stylesheet" href="../dist/domma/elements.css">
  <link rel="stylesheet" href="../dist/domma/themes/domma-themes.css">
  <link rel="stylesheet" href="../css/custom.css">
</head>
<body class="dm-theme-charcoal-dark">
  <nav id="main-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="../dist/domma/domma.min.js"></script>
  <script src="../js/app.js"></script>
  <script src="index.js"></script>
</body>
</html>

You're ready to build

Your MPA is set up. Start editing the pages in frontend/pages/.

Back to QuickStart Explore the Showcase