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