Lod is a static site generator (SSG) with zero configuration.
It lets you write plain old HTML and gradually add layouts, preprocessed CSS and ES6 JavaScript just by referencing them from HTML.
No boilerplate is required.
Lod just needs an index.html entry file.
The output build will be optimized, minified and ready to deploy.
$ go get github.com/alefunion/lod
Go to the project's root directory, write an index.html file and run lod:
$ lod
2021/12/12 12:12:12 ⚡️ SSG in 12ms
The watch or w subcommand makes Lod watch for changes and generate a new build when required:
$ lod w
2021/12/12 12:12:12 ⚡️ SSG in 12ms
2021/12/12 12:12:12 🌐 Served at http://localhost:8080
2021/12/12 12:12:12 ⏳ Watching for changes...
At the same time, a file server is run over the output directory.
You can provide another address to listen on, just after the watch subcommand:
$ lod watch :3000
HTML files are handled as Go templates and can start with a front matter.
A layout is an HTML file containing a named block (used as a placeholder):
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
{{block "main" .}}{{end}}
</body>
</html>To use a layout, start the HTML file with a frontmatter containing a layout key referencing the layout file, relative to project's root:
---
layout: layout.html
---
{{define "main"}}
<h1>Example</h1>
<p>Lorem ipsum.</p>
{{end}}Layouts can also be nested.
Frontmatter's content can be accessed inside the HTML body. It is also passed to layouts:
<!DOCTYPE html>
<html>
<head>
<title>Example{{if .title}} – {{.title}}{{end}}</title>
</head>
<body>
<h1>{{.title}}</h1>
{{block "main" .}}{{end}}
</body>
</html>---
layout: layout.html
title: Test
---
{{define "main"}}
<p>{{.title}} page</p>
{{end}}CSS files are automatically minified and bundled.
Same for Sass/Scss files for which the compiler is built in.
Just reference the file in the HTML:
<link rel="stylesheet" href="main.scss" />As inside HTML, filepaths of assets referenced in style files must be relative to project's directory.
JS and TS files are automatically minified and bundled.
As they are handled by esbuild, you can use the latest syntax, like ES6 imports.
<script src="scripts/main.js"></script>Other content types are copied as is with a hashed filename.