티스토리 수익 글 보기

티스토리 수익 글 보기

Lume, the static site generator for Deno – Lume

The fast & flexible static site generator for Deno

Run the following to setup Lume:

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

Lume is used by some companies and organizations like:

Supports any template engine

Create pages using Markdown, Vento, 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 of items }}
  <li>{{ item }}</li>
  {{ /for }}
</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 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.

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 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");
    });
  }
})

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.

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

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

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

  • Zero runtime overhead

    Lume only exports your code. It doesn’t generate any extra client-side JavaScript code.

  • Deploy anywhere

    Static sites can be hosted (for free) anywhere. GitHub/GitLab Pages, Deno Deploy, Vercel, Netlify… Explore ways to deploy

  • 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

Built with Lume

Screenshot of the site

Lume

This web site (Code)

Screenshot of the site

Ege Çelikçi

Personal site of Ege Çelikçi (Code)

Screenshot of the site

Victor Raton

Personal site of Victor Raton (Code)

Screenshot of the site

Artist Activist

The site for this creative studio advocating for positive change. (Code)

Screenshot of the site

RQP Skate Club

Website of the Roule Qui Peut skate club.

Screenshot of the site

urwq.moe

Personal website

Screenshot of the site

Columnas

The blog + book + newsletter by José Luis Antúnez. (Code)

Screenshot of the site

Events

Curated conferences, meetups, hackathons, workshops, and other gatherings. (Code)

See more examples

What do people say about Lume?

Lume is sponsored by

Lovely past sponsors

And built by the following people

Grid with all contributors avatars

Made with contrib.rocks.

How to contribute?