Lume is a simple & elegant static site generator for Deno

Run the following to install:

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

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 groups = (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;

It's Deno!

Forget about managing thousands of packages in node_modules or complex bundlers. Lume only installs what you need. Clean, fast and secure.
Zero runtime overhead

Lume only exports your code. It doesn't generate any extra JavaScript code.
Deploy anywhere

Static sites can be hosted (for free) anywhere GitHub/GitLab Pages, Deno Deploy, Vercel, Netlify… More info
Easy to extend

Want to use a new template engine or use a new JavaScript compiler? Lume allows you to use whatever you want. Explore the official plugins