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

Lume

Static Site Generator powered by Deno

Lume, the static site generator for Deno - Lume

From your project folder:

deno run -Ar https://deno.land/x/lume/init.ts

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

site.scopedUpdates(
  (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

NOTE

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