Yass

Yet Another Static Site (generator)
(17/03/2021)
Repo: https://github.com/bomboclat/yass

Yass is a static site generator that I've written to build this website. It's like a glue written in shellscript (~90 lines of code) between sfi that import various website pieces (menu, footer, content, etc...) and smu that compile Markdown-like syntax to HTML.

Index

Features
Dependencies
HOW-TO
- Build a website
- Directory structure

Features

Checks and transform relative links
Can build complex and nested website architecture, thanks to sfi
Support and convert markdown like syntax to HTML, thanks to smu
Simple and hackable
Works on almost POSIX systems

Dependencies

The only dependencies are: sh(1), find(1), dirname(1), sed(1), sfi, smu. Both sfi and smu required only a C compiler to build and make (optional), the others deps (sh, find, dirname and sed) are standard unix utilities.

HOW-TO

This tutorial explains how to build a website using Yass. To follow this how-to, you need git and a C compiler already installed in your system.

For this tutorial, I will also use the "quick and dirty" step in the README.md.

Build a website

First of all, you need to clone the repository:

git clone https://github.com/bomboclat/yass.git --recursive
cd yass

IMPORTANT!: You should use the flag --recursive to clone all repo submodules. Or you can run the command git submodule init && git submodule update in the cloned repository.

Compile all dependencies:
```
make
```
Build the example website using Yass:
```
./yass examples
```

Yass places the compiled website in the ./build directory by default. You can test it with any web server. For example, to test the website I use the python3 default web server:

python3 -m http.server -d build/ -b 127.0.0.1 8080

Now you can browse your beautiful website at http://localhost:8080 :D
It will be somthing like this

example website

Directory structure

Now let's take a look inside the examples directory

cd examples

You will find a directory structure like this:

.
├── template.html
├── index.md
├── articles
│   ├── template.html
│   ├── index.md
│   └── example.md
├── components
│   ├── banner.html
│   ├── footer.html
│   └── menu.html
├── css
│   ├── components
│   │   ├── banner.css
│   │   ├── content.css
│   │   └── menu.css
│   └── style.css
└── static
    └── nyan.png

You will notice that in the current (.) and articles directories, there are two files: index.md and template.html.

index.md: holds the content of the sections main page and, it's written in Markdown-like syntax.

For example, ./index.md is the home page content and, articles/index.md is the main page content of the "articles" section.

For more information about the syntax read the smu documentation
template.html: is the section HTML template, all .md pages in the same directory are compiled with this template.

For more information about the syntax read the sfi documentation

The examples directory contains also 3 sub-directories:

components: contains HTML imports for template.html files.
css: contains style.css import for template.html files.
- css/components: contains components CSS styles imported in the style.css file.
static: contains files that should not be modified by Yass.

Back to menu

Home

Articles