Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

DocPad

Awesome static site generator

2012-05-30 @ParisJS

by DjebbZ

Who am I ?

Khalid Jebbari

DjebbZ on the web
@Dj3bbZ (@DjebbZ was already taken...)

Drupal developer for 3 years
(Drupal is a PHP CMS that is taking over the CMS world)

CMS : Content Management System

All-in-one tool to build, deploy and manage a website

ex: Wordpress, Drupal, Joomla

The CMS problem(s)

In no specific order :

  1. Complex, steep learning curve
  2. Content model proprietary and not so obvious
  3. Content prisoner of database
  4. Not very well coded…
  5. … and often written in cough PHP cough
  6. Extending them is rather complex
  7. Most of them are not RESTful
  8. Front end possibilities are limited
  9. Who said performance ?
  10. Often too big for the needs
  11. Mix UX and DX (hint: it doesn't work)
  12. You become a CMS developer instead of a Web developer (not good)
  13. and so on…

It boils down to one thing :

Knowing HTML & CSS is not enough !

Static site generators to the rescue

A simple equation :

Layouts (HTML + CSS + Templating language)
+
Content
=
Final HTML output

Qualities of generators

  1. Far less complex
  2. Write layout once, then focus on content
  3. No database, no web server = less problems
  4. HTML & CSS + a templating language is enough
  5. Performance is unbeatable
  6. Total control over the final markup
  7. Enough for most needs

DocPad to rule them all

  1. The templating/server-side language of your choice (plain HTML and CSS is fine, but also jade, eco, coffeekup, coffeescript, markdown, LESS, SASS, Stylus, Roy, even ERB or PHP !)
  2. "Real" database of content with a powerful query engine
  3. Crazy rendering system
  4. Infinite custom metadata and configuration
  5. Plugins system
  6. Not limited to blogs at all : corporate, news, portfolio, presentation, whatever

A database ? A query engine ?

Yes, Backbone and QueryEngine !

In DocPad, content is represented as Backbone Models and Collections during the render process.

Query-Engine provides extensive Querying, Filtering, and Searching abilities for Backbone.js Collections as well as JavaScript arrays and objects

QueryEngine supports NoSQL queries. Cool.

QueryEngine in DocPad example

Display posts title sorted by date (code in eco)


<% for post in @database.findAll(layout: 'post').sortArray(date:-1) : %>
  
<%= post.title %>

<% end %>

Crazy rendering system ? (1/2)

Documents rendered based on extensions :

  • index.html.md => Markdown to HTML => index.html
  • mypage.html.md.eco => ECO to Markdown to HTML => mypage.html
  • app.js.coffee => CoffeeScript to Javascript => app.js

Example from this presentation's default.html.eco


<title><%= @document.title %> | <%= @site.name %></title>

Crazy rendering system ? (2/2)

This works too :

  • styles.css.styl.eco => Dynamically create CSS rules based on content or configuration
    ex: custom colors, css grid, dynamic id...
  • app.js.eco => Dynamically generate js code
    ex: call custom code based on html id's (I did it !)
  • .htaccess.eco => Dynamically create redirect rules based on content or configuration
    Yes we can

Possibilities are endless

Demo

Let's view this presentation's code !

Check-list :

  • documents, metadata
  • layouts
  • partials
  • docpad.cson
  • adding a new slide

Credits and thanks

Paris.js for hosting the event

Benjamin Lupton for creating DocPad

Drupal and its community for teaching me a lot about CMS

Impress.js, the tool used to create this presentation

GrandChaos600 for the That's all Folks font (next slide)

Warner Bros for the Looney Toons image (next slide)

That's all Folks ! Any question ?

This presentation is available here : https://github.com/DjebbZ/docpad-paris-js