快速 & 灵活的 Deno 静态站点生成器

运行以下命令来安装 Lume:

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

Lume 被以下公司和组织使用,例如:

支持任何模板引擎

使用 Markdown、Vento、Nunjucks、Liquid、JSX、TSX、JavaScript、TypeScript、Pug、Eta… 等创建页面,或轻松添加你自己的引擎。

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

以你喜欢的格式存储数据

使用 JSON 或 YAML 等静态格式存储数据。使用 JavaScript 或 TypeScript 从数据库或 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 };

处理 HTML 页面和资源

处理器可以编译和优化 CSS 或 JavaScript 等资源。它们还可以使用 DOM API 转换 HTML 代码。

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

运行你的脚本并监听事件

你可以创建像 NPM 中那样的自定义脚本,并从 CLI 或在任何事件之后执行它们。

// 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 code
site.addEventListener("afterBuild", () => console.log("site build"));

以及所有功能都通过简洁直观的 API 实现

在一个单独的 _config.ts 或 _config.js 文件中配置你的站点构建,使用插件 和一个简单而清晰的 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;

使用 Lume 构建的网站

Screenshot of the site

Lume

这个网站

Screenshot of the site

Rubén Prol

字体设计师和字型绘图师 Rubén Prol 的个人网站

Screenshot of the site

Limettte

Deno 和 Web Components 的框架

Screenshot of the site

FlutterBy

为您的 Bluesky 个人资料链接设计的动态图标

Screenshot of the site

pixeldesu

Andreas Nedbal 的个人网站

Screenshot of the site

Segundo Fdez

设计师 Segundo Fdez 的个人网站

Screenshot of the site

Sond3

位于卢戈(加利西亚)的设计工作室

Screenshot of the site

Frank Harris

Frank Harris 的个人网站

查看更多示例

大家怎么说?

Lume 由以下赞助商赞助

可爱的往期赞助商

以及由以下人员构建

Grid with all contributors avatars

contrib.rocks. 制作

如何贡献?