nouveau

Old school Static Site Generator using Svelte and PostHTML.

nouveau enhances your static web pages with JavaScript by using Svelte. No JavaScript is generated if the Svelte markup is purely static (i.e. presentational).

See the example project:

Quick start

Get started with a basic template:

npx degit metonym/nouveau#template my-app
cd my-app
yarn install

Install

yarn add -D nouveau

1) Folder structure

Create folders and index.html files in the src folder:

mkdir src
touch src/index.html

Your folder structure should look similar to this:

├── src
│   ├── index.html
│   └── [folder]/index.html
├── package.json
└── .gitignore

2) Content

Add the following to your src/index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <svelte>
      <script>
        let count = 0;
      </script>

      <button on:click="{() => { count += 1; }}">
        Increment the count: {count}
      </button>
    </svelte>
  </body>
</html>

3) Scripts

Add the following scripts to your package.json:

// package.json
{
  "scripts": {
    "start": "nouveau --dev",
    "build": "nouveau"
  }
}

Run the following command in development:

yarn start

For production, use:

yarn build

Customization

Customize the entry and outDir fields in your package.json:

"nouveau": {
  "entry": "src",
- "outDir": "public"
+ "outDir": "dist"
}

License

MIT

Top categories

svelte logo

Want a Svelte site built?

Hire a Svelte developer
Loading Svelte Themes