Static Site Generation using Metalsmith

Overview of what static site generation actually means, how it compares to dynamic based sites and areas of cross-over between the two. Then delves deeper into Metalsmith as the Node.js tool used to demonstrate the generation process.

Transcript

1. @misterdai Static site generation using Node. js #fullstackcon David Boyer NHS Wales Informatics Service @misterdai 1
2. @misterdai David Boyer Senior Software Developer NHS Wales Informatics Service 2
3. @misterdai NHS Wales Informatics Service Delivering national IT services needed for modern patient care 3
4. @misterdai Static sites 4
5. @misterdai Dynamic Generation Static architecture Not static content 5
6. @misterdai 6 Node.js Web app Users API File System Database Node.js Web app / script Users Static Site API File System Database
7. @misterdai Why not dynamic? 7
8. @misterdai The need for speed! 8
9. @misterdai “Every 100ms delay costs 1% of sales”, Greg Linden - Amazon (2006) 9
10. @misterdai “improved page load time by 60%, resulting in a 14% conversion increase”, Kyle Rush - Obama for America (2011) 10
11. @misterdai Dynamic resources add latency 11 • Databases • Web Services • Server-side processing
12. @misterdai Security 12
13. @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.
14. @misterdai Points of failure 14
15. @misterdai 15 Running Costs
16. @misterdai Why Static? 16
17. @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
18. @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
19. @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
20. @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
21. @misterdai Suggested usages • Project scaffolder • Build tool • EBook Generator • Technical Docs • Article / Blog based sites • Startup / Product based sites 21
22. @misterdai Metalsmith 22
23. @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.
24. @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
25. @misterdai npm install --save metalsmith 25
26. @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
27. @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.
28. @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
29. @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
30. @misterdai npm install --save metalsmith-markdown 30
31. @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. 31
32. @misterdai // ----- const markdown = require('metalsmith-markdown'); console.time('Built'); metalsmith .use(markdown()) .build(buildComplete); 32
33. @misterdai npm install --save metalsmith-layouts jade 33
34. @misterdai --- title: This is the page title date: 2015-10-27 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
35. @misterdai const layouts = require('metalsmith-layouts'); metalsmith .use(markdown()) .use(layouts({ engine: 'jade', basedir: `${__dirname}/layouts`, })) .build(buildComplete); 35
36. @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
37. @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
38. @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’}
39. @misterdai metalsmith-* 39 • http://www.metalsmith.io/ • metalsmith-more • metalsmith-feed • metalsmith-lunr • metalsmith-prism • metalsmith-redirect
40. @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)
41. @misterdai Thanks for listening! David Boyer @misterdai http://misterdai.yougeezer.co.uk 41