entu-ssg

Entu SSG

Benefits

• Simple Pug (Jade), Markdown, Yaml static site generator.
• Use Your favorite tools/editors.
• Generate static HTML files from Pug templates or Markdown.
• Generate site CSS from Stylus files.
• Pass data to templates with Yaml files.
• Use locale identificator in filenames to generate locale specific content.
• ...

Installation and usage

Download latest build, unzip and run. Choose config.yaml file and it will:

1. generate HTML/CSS files
2. start server on localhost
3. monitor source folder for changes and (re)generate necessary HTML/CSS.

Configuration

Sites build process is configurable by Yaml file and its path must be first argument for entu-ssg.js. Required parameters are:

• locales - List of locale folders to generate. You can put locale identificator to filename (like index.en.pug or data.et.yaml) for locale speciffic content.
• source - Folder with source files (realtive to build config.yaml). Folders beginning with underscore are ignored.
• build - Folder to put generated HTML (realtive to build config.yaml).
• assets - Folder with static assets (JS, images, ...).
• protectedFromCleanup - List of paths what is not deleted if build.sh is ran with cleanup parameter. Relative to build path.
• server.port - What port to use for serving on localhost.
• server.assets - Serving page in localhost will map this url to folder specified in assets parameter.
• dev.aliases - Build pages aliases.
• dev.paths - List of (source) paths to build. Relative to source path.

Example build configuration file:

locales:
  - en
  - et
source: ./source
build: ./build
assets: ./assets
protectedFromCleanup:
  - assets
  - index.html
server:
  port: 4000
  assets: /assets/
dev:
  aliases: true
  paths:
    - test/page1
    - test/page2

Content

Page content - index.pug

Page content is generated from index.pug file. All other files are ignored, but You can use those files for Pug include/extends. You can put locale identificator to filename (like index.en.pug) for locale speciffic content.

Page data and configuration - data.yaml

To pass data to index.pug use data.yaml file. This data is passed to index.pug in object named self (To get property text from data.yaml use self.text in index.pug).

You can put locale identificator to filename (like data.en.yaml) for locale speciffic content.

Some page parameters will change how HTML is generated. Those are:

• disabled - If true, page will not be generated nor loaded to self.otherLocales object.
• path - If set, it will override folder based path.
• aliases - List of path aliases. Will make redirekt urls to original path.
• data - Files to load data from. This data is passed to index.pug in object named self.data. You can use relative path (./ or ../). If used, it's relative to data.yaml file. Root (/) path is Your source folder (set in config.yaml).

Example page data.yaml:

path: /testpage1
aliases:
  - /test
  - /test123
data:
  news: ./datafiles/news.yaml
someOtherData:
  - A
  - B

Page style - style.styl

To generate page CSS use .styl files. Global style.css is combined from all .styl files (from source folder) and saved to build's root folder (like /style.css).

Page scripts - script.js

To generate page JS use .js files. Global script.js is combined from all .js files (from source folder) and saved to build's root folder (like /script.js).

On build ...

... source folder like this ...

- source
    |- _templates
    |   |- layout.pug
    |   |- mixins.pug
    |   +- somescripts.js
    |
    |- testpage1
    |   |- data.en.yaml
    |   |- data.et.yaml
    |   |- index.pug
    |   +- style.et.styl
    |
    |- testpage2
    |   |- index.en.pug
    |   |- index.et.pug
    |   |- data.yaml
    |   +- testpage2en
    |       |- index.en.pug
    |       +- data.en.yaml
    |
    |- index.pug
    +- style.styl

... will be converted to build folder like this

- build
    |- en
    |   |- index.html
    |   |- testpage1
    |   |   +- index.html
    |   |
    |   +- testpage2
    |       |- index.html
    |       +- testpage2en
    |           +- index.html
    |
    |- et
    |   |- index.html
    |   |- testpage1
    |   |   +- index.html
    |   |
    |   +- testpage2
    |       +- index.html
    |- script.js
    +- style.css