Lume, which is the simplest static site generator for Deno
Tags: deno, webdev, javascript, typescript
Published: 2022-01-13 01:12:22

I tried using [lume](https://lumeland.github.io/), which is the simplest static site generator for Deno. I have searched a simple static site generator, because [GatsbyJS](https://www.gatsbyjs.com/) and stuff are not simple, I don't need GraphQL, ReactJS, etc. However, [jekyll](https://jekyllrb.com/) or [Middleman](https://middlemanapp.com/) 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](https://brew.sh/), 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` :

```bash
$ 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`:

```typescript
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` :

```bash
$ 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`:

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

`index.md`:

```markdown
---
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` 

```bash
$ 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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/igkrjyvk2dgxmowvgppd.png)

## Setting up CSS

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

```typescript
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](https://lumeland.github.io/plugins/postcss/). Next, you make style files:

```bash
$ 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`:

```css
@import "css/base.css";
```

`_includes/css/base.css` :

```css
body {
  background-color: antiquewhite;
}
```

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

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

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vlsvn190svvni53pjqyj.png)

## Using images

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

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

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

And, you load the image in `index.md`:

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

# The first static page

This is an example.

* foo
* bar
* baz

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

```

You restart `lume -s`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uu8za2m8pmxfl628t54e.png)