Forging Static Sites With Metalsmith Rob Ribeiro azurelogic

  • Slides: 15
Download presentation
Forging Static Sites With Metalsmith Rob Ribeiro @azurelogic https: //azurelogic. com

Forging Static Sites With Metalsmith Rob Ribeiro @azurelogic https: //azurelogic. com

Telling you what I’m about to tell you › Why static pages? › What

Telling you what I’m about to tell you › Why static pages? › What is Metalsmith? › Getting started › Plugin pipeline › Metadata › Demo › Tips › Deployment

Why static pages? › A different way to think about the modern website ›

Why static pages? › A different way to think about the modern website › CMSs don’t work for every scenario › Word. Press is a nightmare › Serving lots of traffic on a small server is hard, but much easier when all you have to do is read a file › Even Git. Hub Pages does it › What if you need dynamic content? ? ? – Pair with nginx to serve static pages while reverse proxying other service for dynamic content

What is Metalsmith? › http: //www. metalsmith. io/ – “An extremely simple, pluggable static

What is Metalsmith? › http: //www. metalsmith. io/ – “An extremely simple, pluggable static site generator. ” › Built for Node. js › Uses a plugin system that powers a build pipeline – Similar to Gulp builds or how Express processes requests › Configurable via code or JSON file › Can be used to build much more – e. Books and technical docs

Starting a Metalsmith project › Install Node - https: //nodejs. org/ – Compatible with

Starting a Metalsmith project › Install Node - https: //nodejs. org/ – Compatible with io. js - https: //iojs. org/ › Setup: – $ npm init; npm install --save metalsmith › File structure: – $ mkdir source templates; touch build. js

Directory structure › node_modules/: npm-installed libraries go here, including metalsmith and plugins › build/:

Directory structure › node_modules/: npm-installed libraries go here, including metalsmith and plugins › build/: output directory; this is the result of processing src/ through the plugin pipeline › src/: souce directory; should contain. md files, JS, CSS/Less/SASS, images › templates/: used for giving overall structure to the markdown documents › build. js: defines your build pipeline in code › package. json: your npm config; stores information about what ends up in node_modules/

Core functions › metalsmith(__dirname): initialize metalsmith in current dir; returns metalsmith object for starting

Core functions › metalsmith(__dirname): initialize metalsmith in current dir; returns metalsmith object for starting method chain ›. metadata(obj): adds properties of obj to metadata of all files ›. source(‘. /src’): set the source dir ›. destination(‘. /build’): set the output dir ›. use(plugin): register a plugin into the build pipeline ›. build(cb): terminates the pipeline chain and triggers the build process; cb takes an error param

Metadata › Metadata is various info useful for templating, grouping, sorting, etc. › Every

Metadata › Metadata is various info useful for templating, grouping, sorting, etc. › Every file that needs additional metadata can start with a YAML-like front matter section: --title: Hello World author: Rob Ribeiro publish. Date: 2015 -03 -19 template: post. jade ---

Plugin Pipeline › Overall goal of the pipeline: copy files from source to destination

Plugin Pipeline › Overall goal of the pipeline: copy files from source to destination while passing each one through every plugin ›. use(plugin) is does all of the magic › Metadata for a file is available during the processing of each step › Plugins may add, modify, or remove metadata

Plugins › metalsmith-branch: conditionals › metalsmith-collections: create collections in metadata › metalsmith-excerpts: extract first

Plugins › metalsmith-branch: conditionals › metalsmith-collections: create collections in metadata › metalsmith-excerpts: extract first <p>metalsmithmarkdown: process markdown to HTML › metalsmith-permalinks: projects. html projects/ › metalsmith-serve: development webserver › metalsmith-templates: process templates › metalsmith-watch: watch source directory and automatically rebuild changed files

Demo

Demo

Tips › With metalsmith-templates, you still need to install your template engine › Use

Tips › With metalsmith-templates, you still need to install your template engine › Use process. env. NODE_ENV to set your environment and control what plugins are in the pipeline or what scripts are included › Remember to include the live reload script in your layout to enable this functionality during development – script(src="http: //localhost: 35729/livereload. js") › Permalinks works well with a properly configured nginx index directive – index. html index. htm;

Deployment › Codeship: Continuous Deployment – https: //codeship. com/ › Deploy straight from Bit.

Deployment › Codeship: Continuous Deployment – https: //codeship. com/ › Deploy straight from Bit. Bucket or Git. Hub › SSH into your server and run a script that does this in the appropriate directory git pull export NODE_ENV=production node build. js › Your webserver (i. e. nginx) takes care of the rest

Tools, libraries, etc. › Node. js: JS runtime – https: //nodejs. org/ https: //iojs.

Tools, libraries, etc. › Node. js: JS runtime – https: //nodejs. org/ https: //iojs. org/ › Metalsmith: static site generator – http: //www. metalsmith. io/ › Jade: template Engine – http: //jade-lang. com/ › Markdown: plain text markup – http: //daringfireball. net/projects/markdown/ › Nginx: web server – http: //nginx. org/ › Codeship: continuous deployment service – https: //codeship. com/

Thanks! @azurelogic https: //azurelogic. com

Thanks! @azurelogic https: //azurelogic. com