sitegen 2.0.1

  • Readme
  • Changelog
  • Installing
  • 34

SiteGen #

Static site generator. Includes a webserver, sass + autoprefix support
Wants to be Jekyll for Dart

Before you read on - check out this video:


Example #

  • Install SiteGen pub global activate sitegen
  • Clone the example from
  • run sitegen -w
  • open another console window and run pub run build_runner serve --delete-conflicting-outputs --live-reload

Play with the sample files...

Support for https-connection! #

This is absolutely mandatory if your REST-Server uses HTTP Strict Transport Security (HSTS)

Here you can see the necessary configuration for HTTPS-Support
Generate a self-signed certificate, name it dart.cert and dart.key, place it under

Support for SASS_PATH #

Understanding and Using Sass Load Paths

These settings in your .sitegen/site.yaml ()

    sasscompiler: sass
      - "package:zengen"
      - "package:mdl"

generate generate the following SASS_PATH:

sitegen -s

        Loglevel:                  info
        SASS compiler:             sass
        SASS_PATH (only for sass): /Users/mikemitterer/.pub-cache/hosted/

As you can see the first path is resolved to .pub-cache, the second path is resolve to my local working dir where the mdl-library resides

Now you can define your SASS-Import as follows:

    // Imports package:mdl/lib/assets/styles/button/variables
    @import "assets/styles/button/variables";

What it does #

SiteGen is a static site generator in Dart, webserver included. With extra assets-folder and partials-support.
You can write your pages in HTML or Markdown. For Templates Mustache is supported.

A webserver for a quick review is included. On Mac you also get automatic page refresh. On other platforms you could try LivePage chrome extension for maximum productivity.

Here you can see a typical site structure.

Under you can see the result!

Check out the sample! or download the sample as .TGZ.

├── .sitegen
│   ├── html
│   │   ├── _content
│   │   │   ├── about
│   │   │   │   └── index.html
│   │   │   ├── assets
│   │   │   │   ├── images
│   │   │   │   │   ├── android-desktop.png
│   │   │   │   │   ├── favicon.png
│   │   │   │   │   └── ios-desktop.png
│   │   │   │   └── styles
│   │   │   │       └── styles.scss
│   │   │   ├── features.html
│   │   │   ├── index.html
│   │   │   ├── main.dart
│   │   │   ├──
│   │   │   ├── special
│   │   │   │   ├── template.html
│   │   │   │   └── xtreme.html
│   │   │   └── technology.html
│   │   ├── _data
│   │   │   ├── families.json
│   │   │   ├── menu.json
│   │   │   └── xmen.yaml
│   │   ├── _partials
│   │   │   ├── cards
│   │   │   │   └── wide.html
│   │   │   └── header.html
│   │   └── _templates
│   │       ├── default.html
│   │       └── info_page.html
│   ├── refreshChrome-1.0.applescript
│   ├── refreshChromium-1.0.applescript
│   ├── refreshDartium-1.0.applescript
│   └── site.yaml
├── pubspec.yaml
└── web
    ├── about
    │   └── index.html
    ├── assets
    │   ├── images
    │   │   ├── android-desktop.png
    │   │   ├── favicon.png
    │   │   └── ios-desktop.png
    │   └── styles
    │       ├── styles.css
    │       └── styles.scss
    ├── features.html
    ├── index.html
    ├── main.dart
    ├── markdown.html
    ├── special
    │   ├── template.html
    │   └── xtreme.html
    └── technology.html

.sitegen: This is where your (optional) site.yaml lives
This folder is also used to store autgenerated scripts - in the case above you can see the script to refresh Chromium on Mac.

.sitegen/html/_content: This is where SiteGen will look for your files to generate the site from. The following file-formats are supported:

  • .md
  • .markdown
  • .dart
  • .js
  • .json
  • .html
  • .scss
  • .css

.sitegen/html/_data: [optional] This is the place where you can store your data-files.
The following file-formats are supported:

  • .yaml
  • .json

SiteGen injects your data into a global _data variable. Here is a sample how to use such data:


.sitegen/html/_assets: [optional] Additional assets that you don't want to have in _content. For example .scss or .jpg files.

.sitegen/html/_templates: The directory containing your HTML+Mustache templates.

web: Following Dart conventions - this is your default output directory.

site.yaml #

Optional YAML file that stores your global values and config options. Values set here can be accessed from all templates and markdown files.

  author: Mike Mitterer

Can be used in your template (default.html) as


You can also use site.yaml to overwrite your SiteGen default configuration.
Supported vars:

  • content_dir: .sitegen/html/_content
  • template_dir: .sitegen/html/_templates
  • data_dir: .sitegen/html/_data
  • partials_dir: .sitegen/html/_partials
  • assets_dir: .sitegen/html/_assets
  • output_dir: web
  • workspace: .
  • date_format: dd.MM.yyyy
  • yaml_delimeter: ~~~
  • use_markdown: true
  • default_template: default.html
  • sasscompiler: sassc
  • usesass: true
  • autoprefixer: true
  • browser: Chromium
  • talktome: true (on OSX, false on all the other OSs)
  • watchfolder1, watchfolder2 and watchfolder3

Markdown #

SiteGen lets you use markdown to write your site content. At the beginning of each markdown file, you have the option to use a YAML block to define custom values that you can inject into your templates. Example:

title: A Blog Post
published: 01/01/2014
category: example
    - StillShot
    - Rants
    - Etc.
Normal Markdown content here...

As you can see, a line of tildes (~) is used to designate your YAML block. You can access/inject your values into your pages using mustache template syntax. You can do this either inside your dedicated HTML/mustache templates:


Or, you can embed your values within the markdown file itself:

  - __{{.}}__

so you can take advantage of templating and markdown at the same time.

Simply place all your files in your content_dir and SiteGen will generate your site accordingly.
If your markdown file has a .md extension it will be renamed to .html.

Templates #

As mentioned above, you can access any variables set within your markdown files from your templates using mustache. Options set from your site.yaml / site_options can be accessed through the _site variable, like so:


where author is a property defined in your site.yaml / site_options. You can access these values from your markdown or from your html files.

Every page and template has access to the following values:

  • title: title, usually set inside each markdown file, but is set to the name of markdown file if left blank
  • _site: site.yaml values
  • _date: the post/markdown file's last modified date
  • _content: converted markdown content (only accessible from templates)
  • _page.relative_to_root: will be replaced with some '../' depending on the nesting level of your page (check about/index.html)

The default template is 'default.html' but you can overwrite this behavior if you add a 'template' var to the yaml-block of your content file.

template: info_page

Partials #

Files / Directories in your _partials-Folder will be translated into partials-names.
For example: _partials/category/ translates into {{>}}
A partial can be either a .md or a .html file

You can also use partials in the files yaml block:

template: default.html    
dart: ->usage.badge.dart  


If SiteGen finds a .scss file in your output dir (web) it compiles it to the corresponding .css file.
Install instruction for SASS can be found here
In short it's gem install sass and gem install sassc

You can turn off SASS either with --no-usesass or with the appropriate setting in site.yaml

Or - event better, install sassc: brew install sassc

Autoprefixer #

After compiling .SCSS to .CSS SiteGen calls autoprefixer

You can turn off Autoprefixer either with --no-useapfx or with the appropriate setting in site.yaml

Install #


    pub global activate sitegen


    # activate sitegen again
    pub global activate sitegen


    pub global deactivate sitegen   

Usage #

Usage: sitegen [options]
    -s, --settings         Prints settings
    -h, --help             Shows this message
    -g, --generate         Generate site
    -c, --generatecss      Generate CSS (compile SCSS2CSS)
    -w, --watch            Observes SRC-dir
    -x, --watchandserve    Shortcut to watch and serve
    -i, --init             Initializes your site
                           (not combinable with other options)

        --serve            Serves your site
        --[no-]usesass     Enables / disables SASS to CSS compiler
                           (defaults to on)

        --[no-]useapfx     Enables / disables Autoprefixer
                           (defaults to on)

        --[no-]talktome    Enables / disables Speek-Output
                           (defaults to on)

        --ip               Sets the IP-Address to listen on
                           (defaults to "")

        --port             Sets the port to listen on
                           (defaults to "8000")

        --docroot          Document root
                           (defaults to "web")

    -v, --loglevel         Sets the appropriate loglevel
                           [info, debug, warning]


    'Generates all basic files and folders:                'sitegen -i'
    'Observes the default dirs and serves the web-folder:  'sitegen -w --serve'
    'Observes the default dirs and serves the web-folder:  'sitegen -x'
    'Generates the static site in your 'web-folder':       'sitegen -g'

Go to your project root (this is where your pubspec.yaml is) and type:

sitegen -i

This creates a basic file structure for you.

Now type

sitegen -w --serve

This servers your files under http://localhost:8000/

If you are using Chromium on Mac you will get a automatic page refresh for free!

Hints #

  • Just serve a local dir on port 8000 without generating something:
    sitegen --serve --docroot .

  • Sitegen observes automatically it's basefolders like content, web aso. but if you want additional folders that should be observed so that sitegen automatically regenerates it's file - set watchfolder[1-3] in you site.yaml

  • Test your App with Chrome and use sitegen as server (MAC + Linux only)
    pub build && cd build/web && sitegen --serve --port 9000 --docroot . || cd -

    Runs "pub build" - if this runs without errors cd to "build/web" In "build/web" run sitegen as server on port 9000 and set docroot to . (current dir (default would be "web"))
    || means if the prev command ends with an error (Ctrl + C to cancel sitegen)
    jump back where you came from. You should be back in your base folder (where your pubspec.yaml is)

Features and bugs #

Please file feature requests and bugs at the issue tracker.

Thanks #

I want to thank "Enrique Gavidia" for his stillshot package that I used as basis for SiteGen.

License #

Copyright 2019 Michael Mitterer (,
IT-Consulting and Development Limited, Austrian Branch

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
either express or implied. See the License for the specific language
governing permissions and limitations under the License.

If this plugin is helpful for you - please (Circle) me or star this repo here on GitHub.

Change Log for sitegen #

Static site generator for Dart, webserver included.

Unreleased #

Feature #

v1.7 - 2017-12-15

Feature #

  • Testing for necessary, installed commands 6477ea7

v1.6.4 - 2016-12-15

Fixes #

  • sitegen --serve did not check if .packages-file is available a36b0e5

Docs #

  • Import (scss) sample added to README 670fbeb

v1.6.1 - 2016-12-07

Feature #

  • -k cmdline option added, shows available keys for site.yaml 8decde6

v1.6.0 - 2016-12-06

Feature #

v1.5.0 - 2016-12-06

Feature #

  • No need for packages-folder anymore 39adc76

v1.4.2 - 2016-11-16

Docs #

v1.4.1 - 2016-10-20

Feature #

v1.4.0 - 2016-09-12

Refactor #

  • Server defaults to instead of 7a0ca46

v1.3.3 - 2016-09-09

Feature #

  • You can overwrite the port in .sitegen/site.yaml with port: "7000" b15fa01

v1.3.2 - 2016-07-06

Feature #

  • Works now with autoprefixer-cli 713f325

v1.3.0 - 2015-12-08

Docs #

v1.2.4 - 2015-11-16

Feature #

Docs #

  • Improved description in site.yaml 960733a

v1.2.0 - 2015-10-29

Feature #

  • Makes it much easier to generate a menu, better sample 8884e95

v1.1.7 - 2015-08-14

Docs #

  • Link to video did not work in 72234cb

v1.1.5 - 2015-08-14

Feature #

  • --ip option to set your local IP 4d5da10

v1.1.4 - 2015-06-18

Docs #

v1.1.3 - 2015-06-15

Feature #

  • Additional watch-folders added b9523c0

Docs #

v1.1.2 - 2015-06-09

Docs #

v1.1.0 - 2015-06-09

Feature #

  • Speech output is only enabled on Mac 8a926b4

v1.0.1 - 2015-05-29

Chore #

  • Breaking change - html-folder moved into .sitegen 935b607

Feature #

  • You can now specify where your doc-root is (was by default web) a7cae49

v1.0.0 - 2015-05-26

Feature #

  • Extra Assets-Dir can be defined f919fa9

v0.4.1 - 2015-04-23

Feature #

  • Accepting images in content-dir a9c0910

v0.3.3 - 2015-04-21

Fixes #

  • Empty site.yaml crashes SiteGen 91ac1d3

v0.3.2 - 2015-04-21

Fixes #

  • watched folder checked the wrong Timer 267f4f9

v0.3.1 - 2015-04-21

Feature #

  • SiteGen waits until all files and folders are updated until it starts to regenerate it's files 404f9f1

v0.3.0 - 2015-04-20

Feature #

v0.2.1 - 2015-04-17

Feature #

  • Shortcut for watch + serve added 7be5a76

v0.2.0 - 2015-04-17

Feature #

  • SASS and Autoprefixer can be turned off 86c2ea6

v0.1.3 - 2015-04-14

Fixes #

  • Packages are now excluded from watch-dirs d1412fe

v0.1.2 - 2015-04-14

Fixes #

  • data-dir was not watch-enabled b52798b

v0.1.1 - 2015-04-14

Fixes #

v0.1.0 - 2015-04-14

Feature #

  • data-files (yaml + json) can be used 8beec7a

Fixes #

  • sass + Autoprefixer are working for larger files too 7e26392

v0.0.6 - 2015-04-08

Feature #

v0.0.5 - 2015-03-30

Feature #

  • -i creates a basic file-structure for you 35c3d4e

v0.0.3 - 2015-03-30

Docs #

  • Screenshot did not work on pub 96d17d8

v0.0.2 - 2015-03-30

Feature #

Docs #

This was generated with Changelog for Dart

Use this package as an executable

1. Install it

You can install the package from the command line:

$ pub global activate sitegen

2. Use it

The package has the following executables:

$ sitegen

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  sitegen: ^2.0.1

2. Install it

You can install packages from the command line:

with pub:

$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:sitegen/sitegen.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Jan 17, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.0
  • pana: 0.13.4

Health suggestions

Fix lib/src/Application.dart. (-18.58 points)

Analysis of lib/src/Application.dart reported 41 hints, including:

line 4 col 28: Unnecessary new keyword.

line 11 col 11: Don't explicitly initialize variables to null.

line 15 col 11: Don't explicitly initialize variables to null.

line 18 col 11: Don't explicitly initialize variables to null.

line 20 col 31: Unnecessary new keyword.

Fix lib/src/Generator.dart. (-16.09 points)

Analysis of lib/src/Generator.dart reported 35 hints, including:

line 3 col 1: Prefer using /// for doc comments.

line 12 col 1: Prefer using /// for doc comments.

line 20 col 9: Unnecessary new keyword.

line 26 col 28: Unnecessary new keyword.

line 33 col 38: Unnecessary new keyword.

Fix lib/src/Config.dart. (-4.89 points)

Analysis of lib/src/Config.dart reported 10 hints, including:

line 3 col 1: Prefer using /// for doc comments.

line 8 col 28: Unnecessary new keyword.

line 43 col 43: Unnecessary new keyword.

line 44 col 32: Unnecessary new keyword.

line 153 col 45: Unnecessary new keyword.

Fix additional 5 files with analysis or formatting issues. (-8.38 points)

Additional issues in the following files:

  • lib/src/Init.dart (10 hints)
  • lib/src/CommandManager.dart (3 hints)
  • lib/sitegen.dart (2 hints)
  • bin/sitegen.dart (1 hint)
  • lib/src/Options.dart (1 hint)

Maintenance issues and suggestions

Use analysis_options.yaml. (-10 points)

Change the name of your package's .analysis_options file to analysis_options.yaml.

Read more about the setup of analysis-options.yaml.

Support latest dependencies. (-10 points)

The version constraint in pubspec.yaml does not support the latest published versions for 1 dependency (intl).

Maintain an example. (-10 points)

Create a short demo in the example/ directory to show how to use this package.

Common filename patterns include main.dart, example.dart, and sitegen.dart. Packages with multiple examples should provide example/

For more information see the pub package layout conventions.

The package description is too short. (-9 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.

Package is getting outdated. (-1.64 points)

The package was last published 53 weeks ago.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0 <3.0.0
args ^1.4.0 1.5.2
console_log_handler ^1.0.0 1.1.6
http_server ^0.9.0 0.9.8+3
intl ^0.15.0 0.15.8 0.16.1
logging >=0.11.3 <1.0.0 0.11.4
markdown ^2.0.0 2.1.3
mustache ^1.0.0 1.1.1
packages ^0.4.0 0.4.4
path ^1.0.0 1.6.4
system_info ^0.1.0 0.1.2
validate ^1.0.0 1.7.0
where ^6.0.0 6.5.0
yaml ^2.1.0 2.2.0
Transitive dependencies
ansicolor 1.0.2
build_cli_annotations 1.1.0
charcode 1.1.2
collection 1.14.12
file_utils 0.1.4
globbing 0.3.0
meta 1.1.8
mime 0.9.6+3
optional 3.1.0 4.0.1
source_span 1.6.0
string_scanner 1.0.5
term_glyph 1.1.0
Dev dependencies
build_runner any
build_test any
grinder any
test any