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 }

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.

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 }

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.

Copy of Static Site Engines with Node + Express

By Kevin Leary

Made with Slides.com

Copy of Static Site Engines with Node + Express

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

  • 1,436

More from Kevin Leary