@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)

Recommended

Recommended

More Related Content

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

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

Recently uploaded

Recently uploaded (20)

Static site generation using Metalsmith (Node.js)