Lume.land - The Fast & Flexible Static Site Generator

What is Lume?

Lume is a static site generator built for Deno, allowing you to create fast, efficient, and secure websites. It supports various template engines and data formats.

Run the following to setup Lume:

              deno run -A https://lume.land/init.ts

Used by

Lume is used by some companies and organizations like:

	Example Company 1
	Example Company 2
	Example Company 3

Key Features

Supports any template engine.

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

Templating Examples

Vento:

        
        {{title}}
        
          {{ for item of items }}
            {{ item }}
          {{ /for }}

Nunjucks:

        
        {{ title }}
        
          {% for item in items %}
            {{ item }}
          {% endfor %}

JSX/TSX:

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

JavaScript:

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

TypeScript:

        
        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>
          `;
        }

Data Handling

Store data in any format.

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

YAML Example:

        
        title: Galician municipalities
        items:
          - O Pino
          - Tordoia
          - Ordes
          - Cedeira

JSON Example:

        
        {
          "title": "Galician municipalities",
          "items": ["O Pino", "Tordoia", "Ordes", "Cedeira"]
        }

JavaScript Example:

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

Fetching data:

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

Asset Processing

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"], (files) => {
            for (const file of files) {
              file.content = customTransform(file.content);
            }
          })

          site.process([".html"], (pages) => {
            for (const page of pages) {
              const externalLinks = page.document.querySelectorAll('a[href^="http"]');
              externalLinks.forEach((link) => {
                link.setAttribute("target", "_blank");
              });
            }
          })

Scripts and Events

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.

// Create a script and run it after build

        
          site.script("deploy", "rsync -r _site/ user@host.com:/site");
          site.addEventListener("afterBuild", "deploy");

          // Or run arbitrary codes
          site.addEventListener("afterBuild", () => console.log("site build"));

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;

Plugins

Includes plugins

        
          import lume from "lume/mod.ts";
          import lightningcss from "lume/plugins/lightningcss.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(lightningcss())
              .use(esbuild())
              .use(svgo())
              .use(jsx())
              .use(date());
          export default site;

HTTPS Imports

Forget about a node_modules folder with thousands of dependencies.

Lume is built with Deno and HTTPS imports to download only what you use. Clean, fast and secure.

Deployment

Lume sites can be deployed anywhere, static sites can be hosted (for free) anywhere.

GitHub/GitLab Pages, Deno Deploy, Vercel, Netlify…

Extendable

Want to use a new template engine or use a new JavaScript compiler?

Lume allows you to use whatever you want.

Built with Lume

Explore the official plugins.

Lume
GMX.css
Confeitaria Petúlia
Masashi Kawafuji
Rubén Prol
Limettte
FlutterBy
pixeldesu

What do people say about Lume?

Philipp (@muens.io) March 21, 2025

Just ported my personal website (muens.io) from Astro to@lume.landand boy what a delightful experience that was. So if you haven't checked lume.land already, then I highly encourage you to do so! Also Deno is an absolutely amazing JavaScript Runtime you should take a look at as well.

Kamil Ogórek (@kamilogorek) January 21, 2024

It's been a long time since I found something that'd bring me so much joy to work with aslume.landby@misteroom. What a marvelous piece of software. Everything just works, all commonly used scenarios are covered, and whole documentation is just on point. Love it.

Deno (@deno_land) July 9, 2024

we improved our core web vitals drastically with one simple trick💡️not using client-side rendering(we moved our docs from docusaurus tolume.land)