node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »



This is a grunt multi-task for generating static blogs from posts written in markdown. It was designed to be used with Lineman, but should be generally useful to someone trying to accomplish the same.

Here's an easy-to-clone repo that uses it: testdouble/lineman-blog


There are a few spiffy features of grunt-markdown-blog that make it pretty useful:

  • Parses markdown with the "marked" module, which means it's fast. It also means you get Github-flavored-markdown features like code fences.
  • Highlights code snippets with Highlight.js, which means you can just drop in a Highlight.js CSS file and get crazy-great syntax highlighting. Highlight will try to auto-detect the language of the snippet, but it's more reliable to specify it in a code fence (e.g. ```` coffeescript `)
  • Supports JavaScript & CoffeeScript headers, which can then be accessed in templates easily. Example below.


A post might look like this:

title: "Learning to love again with Lineman.js"
date: "2013-06-15"
  name: "Justin Searls"
  type: "youtube"
  url: ""

Summary Cupcake wypas pastry sweet roll. Cake ice cream caramels apple pie donut chupa chups. Sugar plum dessert liquorice caramels jelly sugar plum ice cream applicake. Jelly beans tart carrot cake caramels liquorice macaroon gummi bears bonbon gummies.

All of those goodies between the "---" headers will be evaluated as JavaScript or CoffeeScript. So long as it evaluates to an object with properties, those will be accessible from your templates like so:

<div class="byline">
  <% if(post.get('author')) { %>
   by <a href="#"><span class="author"><%= post.get('author').name %></span></a>
  <% } %>


Here's an example configuration in CoffeeScript, which more or less mirrors the default configuration.

    author: "Full Name"
    title: "my blog"
    description: "my blog where I write things"
    url: ""
    disqus: "my_disqus_id" #<-- just remove or comment this line to disable disqus support 
    rssCount: 10 #<-- remove, comment, or set to zero to disable RSS generation 
    dateFormat: 'MMMM Do YYYY'
      wrapper: "app/templates/wrapper.pug"
      index: "app/templates/index.pug"
      post: "app/templates/post.pug"
      page: "app/templates/page.pug" #<-- optional static pages 
      archive: "app/templates/archive.pug"
      posts: "posts/*.md"
      pages: "pages/**/*.md" #<-- optional static pages 
      index: "index.html"
      archive: "archive.html"
      rss: "index.xml"
    dest: "generated"
      js: "../js/app.js"
      css: "../css/app.css"
    dest: "dist"
      js: "../js/app.min.js"
      css: "../css/app.min.css"

Watching for changes

If you use a watch plugin with grunt, you can also do something like this for development:

    files: ["app/posts/*.md""app/pages/**/*.md""app/templates/*.pug"]
    tasks: ["markdown:dev"]