This content originally appeared on DEV Community and was authored by Kazuki Baba
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
You restart lume -s
This content originally appeared on DEV Community and was authored by Kazuki Baba
Kazuki Baba | Sciencx (2022-01-13T01:12:22+00:00) Lume, which is the simplest static site generator for Deno. Retrieved from https://www.scien.cx/2022/01/13/lume-which-is-the-simplest-static-site-generator-for-deno/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.