HANG

Creating Static HTML sites with Assemble.io

What is HANG?

Handlebars
Assemble
Npm

Grunt

Why use it?

  • Static HTML sites are fast
  • Easily maintainable
  • Easy to learn
  • Can be as complex as you want it to be
  • Quick to setup
  • Used for blogs, micro-sites, etc.

Setup

Install Assemble

$ npm install assemble --save-dev

npm install

add it to your Gruntfile

grunt.loadNpmTasks('assemble' );

Install Assemble (cont.)

setup the task

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

Other good things to do

watch!

watch: {
      files: ['templates/**/*', 'assets/css/**/*'],
      tasks: ['build']
    }

Other good things to do

get sassy

sass: {
        build: {
            files: {
                './build/assets/css/main.css': './assets/css/main.scss'
            }
        }
    }

Other good things to do

copy all the things

copy: {
      build: {
        files: [
          {expand: true, src: 'assets/css/*.css', dest: 'build'},
          {expand: true, src: 'assets/js/*.js', dest: 'build'},
          {expand: true, src: 'assets/img/**/*', dest: 'build'}
        ]
      }
    }

Directory Structure

HANG

Assets

Templates

js

css

img

layouts

partials

default layout

layouts/default.hbs

<!DOCTYPE html>
<html lang="en">
	<head>
		{{> head }}
	</head>
	<body>
		{{> header}}
		{{> nav}}		
		<section class="main">
			{{> body }}
		</section>
		{{> footer }}
		{{> scripts}}	
	</body>
</html>

Some Examples

head.hbs

<!-- page title -->
<title>{{ page.title }}</title>
<!-- Meta junk -->
<meta charset="UTF-8">
<meta name="description" content="Small Buisness Website">
<meta name="keywords" content=" ">
<meta name="author" content="Ben Spoon">

<!-- CSS Files -->
<link href="assets/css/main.css" rel="stylesheet" type="text/css"/>

layouts/partials

nav

templates/partials

<!-- Nav -->
<nav>
  <ul>
  	<li><a href="index.html">Coffee</a></li>
  	<li><a href="menu.html">Menu</a></li>
  	<li><a href="#">Coffee House</a></li>
  	<li><a href="#">Responsiblity</a></li>
  	<li><a href="#">Card</a></li>
  	<li><a href="#">Shop</a></li>
  </ul>
</nav>

index.hbs

templates/index.hbs

---
title: Starbucks mockup website
published: true
---
<div>
   <p> Sort of text or something! </p>
</div>
<img src="{{assets}}/potato.png" alt="Jason K"/>

index.hbs

templates/index.hbs

---
title: Starbucks mockup website
published: true
---

Title - page title

Published - does this page get processed? 

Check out all the built in variables here: http://jekyllrb.com/docs/variables/

Custom front matter variables

{{#if content-description}}
    <meta name="description" content="{{content-description}}">
{{/if}}
---
title: Example Page
content-description: This page is an example
---

Custom assemble build variables

<div>
   <p> Sort of text or something! </p>
</div>
<img src="{{assets}}/potato.png" alt="Jason K"/>
 assemble: {
      options: {
        assets: "assets/",
        data:   "config.json",
        ext: '.html',
        flatten: true,
        helpers: [
          "handlebars-helpers"
        ],
        contextual: {
          dest: 'build/'
        }
      },

Those are the basics.

live-server

It's magic.

https://www.npmjs.com/package/live-server

live-server

$ npm install live-server -g
$ cd build && live-server

Seriously, thats it.

assemble@beta

and then there is

Changes the workflow

  • No grunt job, instead an assemble file
  • assemble becomes it's own task
  • Adds grunt/gulp task includes

Check it out: https://github.com/assemble/assemble

Building Static Sites with Assemble

By Ben Spoon

Made with Slides.com

Building Static Sites with Assemble

  • 1,046

More from Ben Spoon