Static Site Engines with Node + Express

styleguide.technologyreview.com

by Kevin Leary

Principal Front-end Engineer at MIT Technology Review

kevinleary.net     @kevinlearynet

Goals

2. Make content additions and changes easy and painless

{link:styleguide.technologyreview.com}

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.

{ gist:routes.js }

Templating

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 }}

{ gist:layout-default.html }

Markdown

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
```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>
</header>
```

{ gist:_elements.html }

Environments

Heroku hosts styleguide.technologyreview.com 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

{ gist:gulpfile.js }

All done.

by           Kevin Leary

slides      slides.com/kevinleary/node-static-site-engines

code       gist.github.com/Kevinlearynet/3d298ee15a75de36db9f

web        kevinleary.net

twitter    @kevinlearynet

Thanks for listening.

Static Site Engines with Node + Express

By Kevin Leary

Made with Slides.com

Static Site Engines with Node + Express

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

  • 2,670

More from Kevin Leary

  • Copy of Static Site Engines with Node + Express
    Kevin Leary
    1436