The fast & flexible static site generator for Deno

• page.md
• page.njk
• page.liquid
• page.jsx
• page.tmpl.js
• page.tmpl.ts
• page.pug
• page.eta

# 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>

• _data.yml
• _data.json
• _data.js
• _data.ts

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 assets
• 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();
  })
})

• Script creation
• Events
• Script runner

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

site.addEventListener("afterBuild", "deploy");
site.addEventListener("afterBuild", () => console.log("site build"));

lume run deploy

• _config.ts
• _config.ts (with plugins)

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;