Lume

Lume is a Static Site Generator, for generating websites. Lume is fast, shows your changes automatically when you save a file (hot-reloading), and has a powerful set of plugins to extend its capabilities.

Install

Installing Lume and creating your first site are accomplished in the same command. Create the directory you'd like place your new site into, then run:

$ mkdir lume.lab
$ cd lume.lab
$ deno run -Ar https://deno.land/x/lume/init.ts

This command will download Lume, and initialize the current directory as a new Lume site. There are two questions in the process, one for using TypeScript and one for installing plugins. I choose "Yes" for TypeScript, and did not enter anything for plugins.

Starting the Server

You can start the development server with:

$ deno task serve # See deno.json for what this command does.

Open localhost:3000 to preview the app. You should see a 404 page, since we haven't created any pages yet. Let's fix that!

Create a Page

Create a new file called index.md in the same directory. The .md file extension marks this as a Markdown file. Let's use some example content:

---
title: Heyo, Lume!
---

Welcome to your new website, built with Lume!

Save and return to your browser, and hit refresh (hot reload does not work on the 404 page). You should see the contents of your new page!

Create a Layout

Most websites have some shared markup included in every page, such as CSS, or some navigation elements. Lume allows us to create "layout" files for the shared bits. Let's create the file, _includes/layout.njk (will need to create the _includes directory first), with this content:

<!doctype html>
<html lang="en">
  <head>
    <title>{{ title | safe }}</title>
    <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
  </head>
  <body>
    <h1>{{ title | safe }}</h1>
    <main>
      {{ content | safe }}
    </main>
    <footer>
      &copy; 2023 - Time.now()
    </footer>
  </body>
</html>

This scaffold includes a title element, a page header (<h1>), the main content from the markdown file, a generic footer, and imports the SimpleCSS CSS framework.

If you return to your browser you should see ... no changes. We haven't told index.md about the layout yet! Let's edit index.md:

---
title: Heyo, Lume!
layout: layout.njk
---

Now when you return to your browser, you should see the applied layout.

Deploy to Netlify

It's all well and good to have a new website, but it's even better if it can be viewed by anyone on the internet. Let's deploy our sample site to Netlify. You'll need to install and configure the Netlify CLI to do the actual deployment, and we'll need to create a netlify.toml file to tell Netlify about Deno:

[build]
  publish = "_site"
  command = """
    curl -fsSL https://deno.land/x/install/install.sh | sh && \
    /opt/buildhome/.deno/bin/deno task build \
  """

This tells Netlify to deploy the _site directory (which Lume creates for us), and the command is used to install Deno, and run deno task build to build the site with Lume.

With that done, let's deploy to Netlify:

$ netlify deploy --prod

The netlify command will ask you a few questions about where to deploy to, and if all goes well, you should end up with a Site URL you can open to view your web app!

Recap

To recap, we created a Lume site, added a basic page, a layout, and deployed the site to Netlify.

For extra credit, create a new file, extra_credit.md with the layout.njk layout, and your own content. You should be able to see the page at localhost:3000/extra_credit.