Static Site Generation using Metalsmith

@misterdai Static site generation using Node. js #fullstackcon David Boyer
NHS Wales Informatics Service @misterdai 1

@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 Static sites 4

@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 Users Static 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 Metalsmith 22

@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

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

layout: 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

Static Site Generation using Metalsmith

Static Site Generation using Metalsmith

More Decks by David Boyer

Other Decks in Technology

Featured

Transcript