The fast & flexible static site generator for Deno

Run the following to install:

deno run -A https://deno.land/x/lume/install.ts
deno.land/x/lume

Supports any template engine

Create pages using Markdown, Nunjucks, Liquid, JSX, TSX, JavaScript, TypeScript, Pug, Eta… or add your own engine easily.

# Galician municipalities

- O Pino
- Tordoia
- Ordes
- Cedeira
<h1>{{ title }}</h1>

<ul>
  {% for item in items %}
  <li>{{ item | safe }}</li>
  {% endfor %}
</ul>
<h1>{{ title }}</h1>

<ul>
  {% for item in items %}
  <li>{{ item }}</li>
  {% endfor %}
</ul>
export default function ({ title, items }) {
  return <>
    <h1>{ title }</h1>

    <ul>
      { items.map((item) => <li>{ item }</li>)}
    </ul>
  </>;
}
export default function ({ title, items }) {
  return `
  <h1>${ title }</h1>

  <ul>
    ${ items.map((item) => `<li>${ item }</li>`)}
  </ul>
  `;
}
interface Data {
  title: string;
  items: string[];
}

export default function ({ title, items }: Data): string {
  return `
  <h1>${ title }</h1>

  <ul>
    ${ items.map((item) => `<li>${ item }</li>`)}
  </ul>
  `;
}
h1= title
ul
  each item in items
    li= item
<h1><%= title %></h1>

<ul>
<% for (const item of items) { %>
  <li><%= item %></li>
<% }) %>
</ul>

Store the data in your favorite format

Store your data using static formats like JSON or YAML. Use JavaScript or TypeScript to get the data from a Database or API.

title: Galician municipalities
items:
  - O Pino
  - Tordoia
  - Ordes
  - Cedeira
{
  "title": "Galician municipalities",
  "items": [
    "O Pino",
    "Tordoia",
    "Ordes",
    "Cedeira"
  ]
}
export const title = "Galician municipalities";
export const items = [
  "O Pino",
  "Tordoia",
  "Ordes",
  "Cedeira"
];
const title = "Galician municipalities";

const response = await fetch("https://example.com/galician-minicipalities.json");
const items = (await response.json()) as string[];
export { title, items };

Process HTML pages and assets

Processors can compile and optimize assets like CSS or JavaScript. They can also transform the HTML code using the DOM API.

site.process([".css"], (file) => {
  file.content = customTransform(file.content);
})
site.process([".html"], (page) => {
  page.document.querySelectorAll("h1", (title) => {
    title.innerText = title.innerText.toUpperCase();
  })
})

Run your scripts and listen for events

You can create custom scripts like in NPM and execute them from the CLI or after any event.

site.script("deploy", "rsync -r _site/ user@host.com:/site");
site.addEventListener("afterBuild", "deploy");
site.addEventListener("afterBuild", () => console.log("site build"));
lume run deploy

And everything with a clean and intuitive API

Configure your site build in a single _config.ts or _config.js file with plugins and a simple and clean API.

import lume from "lume/mod.ts";

const site = lume();

export default site;
import lume from "lume/mod.ts";
import parcelCSS from "lume/plugins/parcel_css.ts";
import esbuild from "lume/plugins/esbuild.ts";
import svgo from "lume/plugins/svgo.ts";
import jsx from "lume/plugins/jsx.ts";
import date from "lume/plugins/date.ts";

const site = lume();

site.use(parcelCSS())
    .use(esbuild())
    .use(svgo())
    .use(jsx())
    .use(date());

export default site;

Who is using Lume?

Lume Reese Schultz Achraf Garai OAK Studio Badger Microflash Tarugo22 NM type See more examples

What people say?

Lume is supported by

How to contribute?