@misterdai

Static site generation using Node.js

#fullstackconDavid Boyer

NHS Wales Informatics Service

@misterdai

1

@misterdai

David BoyerSenior Software Developer

NHS Wales Informatics Service

2

@misterdai

NHS WalesInformatics Service

Delivering national IT services

needed for modern patient care

3

@misterdai

Static sites

4

@misterdai

Dynamic Generation

Static architecture

Not static content5

@misterdai 6

Node.jsWeb app Users

API

File System

Database

Node.jsWeb app / script UsersStatic Site

API

File System

Database

@misterdai

Why not dynamic?

7

@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

Security

12

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

Running Costs

@misterdai

Why Static?16

@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

Metalsmith22

@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 titledate: 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

---title: This is the page titledate: 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.

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

---title: This is the page titledate: 2015-10-27layout: page.jade---

## 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.

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