Collecting my attempts to improve at tech, art, and life


Static Site Generator powered by Deno

Lume, the static site generator for Deno - Lume

From your project folder:

deno run -Ar

It looks a lot like Eleventy but tidier

_data.* and _data/*hold shared data and frontmatter defaults

Shared data - Lume

Components are invoked via comp

{% comp "container" %}
{% endcomp %}

or simpler invocations without a content block

{{ comp.button({ text: "Login" }) | safe }}

Components can have custom CSS in their frontmatter, which gets loaded into /components.css

css: |
    .container {
        max-width: 80%;
        margin: auto;
        padding: 0.25em;
        border: thin solid;
<section class="container">{{ content | safe }}</section>

Use generator functions to generate pages from data

Create multiple pages - Lume

Scoped updates for incremental rebuilds of large sites

Scoped updates - Lume

  (path) => path.endsWith(".css"), //Select all *.css files
  (path) => /\.(js|ts)$/.test(path), //Select all *.js and *.ts files

Task runner in site config instead of package.json — which obvs a Deno project won’t have

Scripts - Lume

Supports scripts with multiple steps

Supports dependencies / executing other scripts


Deno still has deno.json for task / script definition

They have data cascade too

Merged keys - Lume

They modestly provide an Eleventy migration guide

if you have an Eleventy project and want to migrate to Lume (maybe it’s not a good idea)

Migrate from Eleventy - Lume

Added to vault 2024-03-21. Updated on 2024-03-21