Duo Color is a template for the static site generator Middleman and its blog extension.

It features a responsive HTML5 CSS3 based design based on Bootstrap which makes it easy to modify.

Live Demo


This template incorporates a lot of features:

  • LaTeX formulas using MathJax, see demo
  • syntax highlighting using pygmentize-compatible Rouge which looks exactly like embedded gists, see demo
  • Middleman uses the kramdown markdown parser by default, which makes it very to use table of contents (TOC), see original post
  • Bower is used to ease the updating of javascript libs (modernizer, jquery)
  • this templates comes not only with a robots.txt, but also with a humans.txt
  • to help search engines to find your content, a sitemap.txt and sitemap.xml is generated for you
  • blog search provided by DuckDuckGo
  • you do not only get one feed for your blog posts, but also feeds separted by tags (middleman proxies to the win)
  • all css files and javascript files are jointly minified to save bandwith and elements to loads
  • nice icon fonts Fontello (see demo and Glyphicons at your disposal
  • disqus recent comments for your blog as aside
  • disqus number of comments per post on your blog post overview page

There have been made some attempts to increase the privacy of visitors:

  • we host most js and css ourself (not the mathjax one, if you use it; not the Google Webfont)
  • we use DuckDuckGo instead of google
  • For sure, you better don't use Google Analytics. If you do, the provided script lets google remove the last bits of the IP address.
  • Be aware that embedding widgets (G+, Twitter, Gist) will reveal information about your visitors to these services.

The template is somehow prepared for hosting on github, that's why the errorpage will be named 404.html. If you have a custom domain, you may want to add a CNAME file to the source directory.


  • read the Middleman docs
  • check data/site.yml
  • check config.rb
  • check updates of javascript lists: bower install, bower update
  • decide, if you want to add a CNAME file if you use github
  • if you want to use more than one language, consider which naming scheme you want to use: If you tweak it the right way, you can use Apaches content-negotiation feature to direct your visitors directly to the appropiate landing page using their browser language settings.
  • setup your .htaccess file to use the error page 404.html or change its name
  • there is a placeholder picture in the file 404.html – take another one!
  • The duckduckgo results page is customized by some post variables next to the search string. Have a look in _site-search.slim to make it fit your needs
  • add the missing lines to ease your deployment: middleman-deploy
  • comment in one of the tracking snippets if you want to use Google or Piwik Analytics


Issues and Comments

If you find a bug, please issue a bug report right at the Github project. Patches are most welcome by push requests, but I don't mind emails as well. You find my contact details in the section below.


pgp fingerprint: F6A9 332D AA28 625E 59A8 F758 7BF6 0F4A 861B C3A3





About This Template

This template was originally developed for my personal blog


Template Duo Color (c) 2014 by Robert Riemann

Except where otherwise noted, Template Duo Color is licensed under the MIT license.

You should have received a copy of the license along with this work. If not, see