assemble

a static site generator for Node | Grunt | Yeoman


BUILD SOMETHING

What?


So what is a "Static Site Generator" and why?

Takes small, template chunks and groups them into a full page.
This gives you ease of development and a fast and secure website.
 

Digging deeper...

Templates!
Assemble allows use of either Lo-Dash or Handlebars templates, depending on where the templates are used.

- Lo-Dash templates are used for configuration and metadata. 
- Handlebars templates are used for content.


Build a layout page.



<!DOCTYPE html> 
<html lang = "en"> 
  <head> 
    <meta charset ="UTF-8"> 
    <title> {{title }} </title> 
  </head> 
  <body> 
    {{> body  }} 
  </body> 
</html> 

This wraps your content and fills in the {{> body}} with whatever is in the page you're rendering.

Make a page!

Page.md.hbs
---
title: Just testing some stuff on this page, it should not be published
area: docs
section: templates
---

## Rendering Pages

### Excluding pages

** From the YAML Front Matter of a page**


You can write in markdown or just HTML

Make a partial

Partials are included into pages and can be reused 
throughout the site. 

These can also leverage markdown or HTML
---
{{#logo}}
logo:
  URL: {{URL}}
    classes:
    {{#classes}}
    - {{.}}
    {{/classes}}
  width: {{width}}
  height: {{height}}
  title: {{title}}
{{/logo}}
---

Looking at Gruntfile.js

assemble: {
    options: {
		data: 'path/to/config.json',
		assets: 'path/to/assets',
    },
    project: {
        options: {
            layout: "path/to/default-layout.hbs",
            partials: "path/to/partials/**/*.hbs"
        },
        files: {
            'dest': ["path/to/pages/**/*.hbs" ]
        }
    }
},

easily point your paths for your 
pages, partials, and layout

So....


Let's Build Something!

assemble

By Adam Moore

assemble

  • 1,919