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.
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.
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
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
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.
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
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
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’}
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)