Static Site Engines with Node + Express

by Kevin Leary

Principal Front-end Engineer at MIT Technology Review     @kevinlearynet


2. Make content additions and changes easy and painless

1. Provide international partners with access to MIT branding and style guidelines

3. Easy maintenance and workflow 

Routing & Views

Express.js routes URL requests to corresponding views, mapping the path to a Markdown template name dynamically.


For example, visiting /elements will load layout-simple.html with elements.html included in the main content area.


Swig templates are configured as the Express view engine, providing inheritance and extendability. Custom tags and filters allow us to compile markdown to HTML at the view level.

// tag for includes
{% marked %}
    {% include view %}
{% endmarked %}

// filter for vars
{{ content|marked }}


GitHub Flavored Markdown syntax is used in sub-view templates that are referenced within a layout template, making page additions and updates simple for UX designers.

## Story lead

### HTML
<header class="story-lead">
	<h2 class="flag"><a href="/businessreports/">Business Report</a></h2>
	<h3>Computing News</h3>
	<h1>Rise of the Robot Security Guards</h1>
	<p class="intro">Startup Knightscope is preparing to roll out human-size robot patrols.</p>
	<p class="byline">By <a href="/author/rachel-metz/">Rachel Metz</a> on <time>November 13, 2014</time></p>


Heroku hosts providing us with:

  1. Staging and production environments
  2. CLI-based server management
  3. Git deployment


Gulp automates local development and build processes:

  - Concatenate and minify client-side JS & LESS (w/LiveReload)

  Start local server and reload on changes with Nodemon

All done.

by           Kevin Leary




twitter    @kevinlearynet

Thanks for listening.

Static Site Engines with Node + Express

By Kevin Leary

Static Site Engines with Node + Express

Building a flexible static site engine using Node.js, Express, and GitHub Flavored Markdown.

  • 1,701