@misterdai
David Boyer
Senior Software Developer
NHS Wales Informatics Service
2

@misterdai
NHS Wales
Informatics Service
Delivering national IT services
needed for modern patient care
3

@misterdai
Dynamic Generation
Static architecture
Not static content
5

@misterdai 6
Node.js
Web app
Users
API
File System
Database
Node.js
Web app / script
UsersStatic Site
API
File System
Database

@misterdai
The need for speed!
8

@misterdai
“Every 100ms delay costs
1% of sales”,
Greg Linden - Amazon
(2006)
9

@misterdai
“improved page load time by 60%, resulting in
a 14% conversion increase”,
Kyle Rush - Obama for America (2011)
10

@misterdai
Dynamic resources add latency
11
● Databases
● Web Services
● Server-side processing

@misterdai
Dynamic Security Concerns
13
● Secure version of your server-side language
● 3rd party code (modules, libraries, extensions) need
monitoring
● Ensuring that your server-side code is secure when
processing requests
● Database vulnerabilities can be a concern.

@misterdai
Points of failure
14

@misterdai
Improves on those dynamic downsides
● More secure, only a web server to attack.
● Faster, no databases or server-side processing to
construct the page.
● Fewer points of failure.
● Easily cacheable or hosted across multiple servers.
● Easier to debug, the HTML served only change when
you regenerate.
17

@misterdai
Not a fit all solution
● Highly dynamic sites.
● Sites that provide different visitors, different content
/ HTML.
● Pages made up of sections that are constantly being
updated.
18

@misterdai
Mix and match
● Static content pages mixed with dynamic server
pages.
● Static generated site, backed by an API and client
side JavaScript for dynamic components.
● Dynamic content management system producing a
static based site.
19

@misterdai
Client-side Dynamic
● Areas of your static pages can still be dynamic using
client side JavaScript.
○ Recent tweets
○ Visitor comments
○ Analytics
○ Social Media sharing
20

@misterdai
Suggested usages
● Project scaffolder
● Build tool
● EBook Generator
● Technical Docs
● Article / Blog based sites
● Startup / Product based sites
21

@misterdai
Metalsmith TL;DR
23
1. Recursive read of all files in the ./src directory.
2. Parse files for `front-matter`
○ Idea lifted from Jekyll, another static site generator (Ruby).
○ front-matter uses YAML for defining data
3. Manipulate file data through series of plugins.
4. Write the results to a ./build directory.

@misterdai
---
title: This is the page title
date: 2015-10-27
---
## Article header
Collaboratively administrate empowered markets via plug-
and-play networks. Dynamically procrastinate B2C users after
installed base benefits. Dramatically visualize customer
directed convergence without revolutionary ROI.
24

@misterdai
npm install --save metalsmith
25

@misterdai
const Metalsmith = require('metalsmith');
const metalsmith = new Metalsmith(__dirname);
const buildComplete = (error) => {
if (error) return console.error(error);
console.timeEnd('Built');
};
console.time('Built');
metalsmith.build(buildComplete);
26

@misterdai
Metalsmith plugins
27
● Provided to metalsmith through the .use(fn) method.
● Plugin is provided with a list of files found and parsed
by metalsmith.
● A reference to the metalsmith instance.
● Callback function to signal plugin is complete, useful
for async operations.

@misterdai
metalsmith
.use(function(files, metalsmith, done) {
Object.keys(files).forEach(function(file) {
if (file.match(//fullstackcon//i)) {
files[file].category = 'fullstackcon';
}
if (files[file].draft) {
delete files[file];
}
});
const metadata = metalsmith.metadata();
metadata.siteTitle = 'Static Sites';
done();
})
28

@misterdai
files[filepath] = {
mode: '0666', // File system mode
contents: Buffer(), // File content - front-matter
stats: {dev, mode, …}, // Node.js fs.stat object
…: …, // ← plus front-matter that was parsed
}
29

@misterdai
npm install --save metalsmith-markdown
30

@misterdai
---
date: 2015-10-27
---
## Article header
31

@misterdai
// -----
const markdown = require('metalsmith-markdown');
console.time('Built');
metalsmith
.use(markdown())
.build(buildComplete);
32

@misterdai
npm install --save metalsmith-layouts jade
33

@misterdai
---
date: 2015-10-27
layout: page.jade
---
## Article header
34

@misterdai
const layouts = require('metalsmith-layouts');
metalsmith
.use(markdown())
.use(layouts({
engine: 'jade',
basedir: `${__dirname}/layouts`,
}))
.build(buildComplete);
35

@misterdai
metalsmith-collections
● Create sorted, groups of files.
● Supports multiple groups.
● Useful for providing listings such as a list a blog posts
or an index of pages.
● Collections are array based, easy to slice into smaller
chunks or to iterate.
36

@misterdai
metalsmith-pagination
37
● Works with metalsmith-collections
● Provides methods to easily paginate collections
● Take advantage of data and methods within Jade (or
other) templates

@misterdai
metalsmith-permalinks
38
● Set rules to form URLs for your pages.
● Use metadata collected from the parsed files.
● Example: {pattern: ‘:date/:title’}
● Creates a file within the path and provides a new `.
path` attribute in the file data.
● Also supports date formatting
○ {pattern: ‘:date/:title’, date: ‘YYYY-MM-DD’}

@misterdai
metalsmith-*
39
● http://www.metalsmith.io/
● metalsmith-more
● metalsmith-feed
● metalsmith-lunr
● metalsmith-prism
● metalsmith-redirect

@misterdai
Building out your Metalsmith site
40
● Paginated blog post index.
○ Support tags and categories.
● Search support (Google Custom, Lunr.js).
● Comments (Disqus, Discourse, Isso).
● RSS feeds, Social media sharing.
● Contact form (Google Docs, Wufoo)
● Highlight code (Prism, Highlight.js)

@misterdai
Thanks for listening!
David Boyer
@misterdai
http://misterdai.yougeezer.co.uk
41

Static site generation using Metalsmith (Node.js)

More Related Content

Similar to Static site generation using Metalsmith (Node.js) (20)

Recently uploaded (20)

Static site generation using Metalsmith (Node.js)