Lume, which is the simplest static site generator for Deno

#deno #webdev #javascript #typescript

I tried using lume, which is the simplest static site generator for Deno. I have searched a simple static site generator, because GatsbyJS and stuff are not simple, I don't need GraphQL, ReactJS, etc. However, jekyll or Middleman are old, I want to use javascript ecosystem.

Lume is simple but new, and has necessary and sufficient features. We can use markdown, yaml, typescript, jsx, nunjucks, etc.

installation

First of all, you install deno:

brew install deno

If you use Linux/Windows(WSL), you can use Homebrew, so I recommend you to install Homebrew to any OS.

Next, you install lume:

deno run -A https://deno.land/x/lume/install.ts

And, you set up PATH environment variable in .bashrc, .zshrc and stuff:

export PATH="/Users/babakazuki/.deno/bin:$PATH"

Making a static page

First step is to make lume-example directory and lume init :

$ mkdir lume-example
$ cd lume-example 
$ lume init
Use Typescript for the configuration file? [y/N] y

How do you want to import lume?
Type a number:
1 import lume from "lume/mod.ts"
2 import lume from "https://deno.land/x/lume/mod.ts"
3 import lume from "https:/deno.land/x/lume@v1.4.2/mod.ts"
 [1] 

Do you want to import plugins?
Type the plugins you want to use separated by comma.

All available options:
- attributes https://lumeland.github.io/plugins/attributes/
- base_path https://lumeland.github.io/plugins/base_path/
- bundler https://lumeland.github.io/plugins/bundler/
- code_highlight https://lumeland.github.io/plugins/code_highlight/
- date https://lumeland.github.io/plugins/date/
- eta https://lumeland.github.io/plugins/eta/
- inline https://lumeland.github.io/plugins/inline/
- jsx https://lumeland.github.io/plugins/jsx/
- liquid https://lumeland.github.io/plugins/liquid/
- modify_urls https://lumeland.github.io/plugins/modify_urls/
- on_demand https://lumeland.github.io/plugins/on_demand/
- postcss https://lumeland.github.io/plugins/postcss/
- pug https://lumeland.github.io/plugins/pug/
- relative_urls https://lumeland.github.io/plugins/relative_urls/
- resolve_urls https://lumeland.github.io/plugins/resolve_urls/
- slugify_urls https://lumeland.github.io/plugins/slugify_urls/
- svgo https://lumeland.github.io/plugins/svgo/
- terser https://lumeland.github.io/plugins/terser/

Example: postcss, terser, base_path


Created a config file _config.ts
Do you want to configure VS Code? [y/N] y
VS Code configured

You got a _config.ts:

import lume from "lume/mod.ts";

const site = lume();

export default site;

And you got a .vscode directory, which has settings for VS Code.

Next, you want to make a index page, so you make _includes/layouts/main.njk and index.md :

$ mkdir -p _includes/layouts/
$ touch _includes/layouts/main.njk
$ touch index.md

_includes/layouts/main.njk is a layout for several pages, and index.md is a contents of the index page.

Let's edit those files.

_includes/layouts/main.njk:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
  </head>
  <body>
    <main>
      {{ content | safe }}
    </main>
  </body>
</html>

index.md:

---
title: "The first static page"
layout: layouts/main.njk
---

# The first static page

This is an example.

* foo
* bar
* baz

You can check the page by lume -s

$ lume -s
Loading config file /home/kbaba/repos/github/lume-example/_config.ts


🔥 /index.html /index.md

🍾 Site built into ./_site
No such file or directory (os error 2)

  Server started at:
  http://localhost:3000/ (local)
Warning Unable to detect your local IP address
If you're on an Ubuntu machine, try installing net-tools with 'apt install net-tools'

200 /
404 /favicon.ico
404 /favicon.ico
404 /favicon.ico
404 /favicon.ico

You access http://localhost:3000/ , you can see a built page

Setting up CSS

Lume is not able to build CSS by default, so you need to edit your _config.ts:

import lume from "lume/mod.ts";
import postcss from "lume/plugins/postcss.ts";

const site = lume();

site.use(postcss());

export default site;

You added the PostCSS plugin. Next, you make style files:

$ touch styles.css
$ mkdir _includes/css
$ touch _includes/css/base.css

styles.css can load by other files, it is public. _includes directory is searched for the @import. So, you make several divided css files in _includes/css directory, and you import those into styles.css

styles.css:

@import "css/base.css";

_includes/css/base.css :

body {
  background-color: antiquewhite;
}

And, you edit _includes/layouts/main.njk to add link tag in <head>:

<link rel="stylesheet" href="/styles.css">

You restart lume -s, you can see the styled page

Using images

If you want to use images by Lume, you will edit _config.ts:

import lume from "lume/mod.ts";
import postcss from "lume/plugins/postcss.ts";

const site = lume();

site
  .use(postcss())
  .copy("img");   // added

export default site;

This setting is meaning to copy img directory from the source to the built directory (_site). So, you make an img directory and put images into it.

$ mkdir img
$ cp /path/to/profile.jpg img/profile.jpg

And, you load the image in index.md:

---
title: The first static page
layout: layouts/main.njk
---

# The first static page

This is an example.

* foo
* bar
* baz

![profile](/img/profile.jpg)