Static Shock

GitHub

*THE* Static Site
Generator for Dart

Activate Static Shock:

dart pub global activate static_shock_cli

Get started with our Quickstart guide

*THE* Static Site
Generator for Dart

GitHub

Copy static assets

Directly copy images, fonts, HTML, CSS, and JavaScript from your source set to your final website build.

void main() {
  final staticShock = StaticShock()
    ..pick(DirectoryPicker.parse('images'))
    ..pick(DirectoryPicker.parse('fonts'))
    ..pick(FilePicker.parse('favicon.ico'));

  staticShock.generateWebsite();
}

Copy static assets

Directly copy images, fonts, HTML, CSS, and JavaScript from your source set to your final website build.

void main() {
  final staticShock = StaticShock()
    ..pick(DirectoryPicker.parse('images'))
    ..pick(DirectoryPicker.parse('fonts'))
    ..pick(FilePicker.parse('favicon.ico'));

  staticShock.generateWebsite();
}

Add plugins

Select features that you want to add, like Markdown, Jinja templates, and pretty URLs.

void main() {
  final staticShock = StaticShock()
    ..plugin(const MarkdownPlugin())
    ..plugin(const JinjaPlugin())
    ..plugin(const PrettyUrlsPlugin())
    ..plugin(const SassPlugin());

  staticShock.generateWebsite();
}

Add plugins

Select features that you want to add, like Markdown, Jinja templates, and pretty URLs.

void main() {
  final staticShock = StaticShock()
    ..plugin(const MarkdownPlugin())
    ..plugin(const JinjaPlugin())
    ..plugin(const PrettyUrlsPlugin())
    ..plugin(const SassPlugin());

  staticShock.generateWebsite();
}

Write articles with Markdown

Enjoy the ease of writing with Markdown. Specify your desired layout, title, URL, and tags with Front Matter.

---
title: Quickstart
---

Static Shock is a static site generator, written in Dart.

To get started, activate the Static Shock command-line interface on your computer:

    dart pub global activate static_shock_cli

Create a new static website project:

    shock create

Write articles with Markdown

Enjoy the ease of writing with Markdown. Specify your desired layout, title, URL, and tags with Front Matter.

---
title: Quickstart
---

Static Shock is a static site generator, written in Dart.

To get started, activate the Static Shock command-line interface on your computer:

    dart pub global activate static_shock_cli

Create a new static website project:

    shock create

Compose layouts with Jinja templates

Insert values, insert content, and loop through pages, with the Jinja templates plugin.

<html>
 <head>
   <title>{{ title }}</title>
 </head>
 <body>
   {{ content }}
 </body>
</html>

Compose layouts with Jinja templates

Insert values, insert content, and loop through pages, with the Jinja templates plugin.

<html>
 <head>
   <title>{{ title }}</title>
 </head>
 <body>
   {{ content }}
 </body>
</html>

Compile Sass to CSS

Save time by writing Sass, and then compile that Sass to CSS in your final website build, using the Sass plugin.

#header {
  .branding {
    .title {
      color: WHITE;
      font-weight: bold;
    }
  }
}

Compile Sass to CSS

Save time by writing Sass, and then compile that Sass to CSS in your final website build, using the Sass plugin.

#header {
  .branding {
    .title {
      color: WHITE;
      font-weight: bold;
    }
  }
}

Showcase

Documentation Websites

Contributors