I was getting tired of my old blog and wanted to play with CSS and code a lil’ bit. So here’s the result. I must say, I’m pretty happy with the result. 3 new tools, I’ve never (heavily) used before, helped me with that. The code is here.
First, Webby, a static site generator. I’m pretty sure blog engines like Typo, Mephisto and the like are gonna disappear pretty quickly from the blogosphere in favour of static sites. Any good blog engine caches all pages, which ends up being a static website generator. You just don’t need a dynamic app for your blog. Except for the comments, but now there’s Disqus and IntenseDebate.
The only annoying thing about Webby is that I didn’t want my URLs to end with
.html. But, that was pretty easy to patch.
# Monkey patch Webby to have nicer URLs. # Generate each html pages in a <page_name>/index.html file. # So the URL will look like /<page_name> module Webby::Resources class Page < Resource def destination dest = super if prettify? File.join(File.dirname(dest), File.basename(dest, ".*"), "index.html") else dest end end def url if prettify? super.gsub(/index\.html$/, "") else super end end private def prettify? filename != "index" && extension == "html" end end end
I also wanted to give a second try to Haml and Sass and found Compass in the process. It’s Blueprint CSS without the copy-pasting. Sass makes it easy to reuse some chunks of code, like this one, that makes the footer stick to the bottom.
=attach_footer( !footer_height ) body :margin 0 :padding 0 0 !footer_height 0 #footer :position absolute :bottom 0 :left 0 :width 100% :height !footer_height body > #footer :position fixed * html body :overflow hidden #content :height 100% :overflow auto
I also took the time to align everything to the grid, that was pretty hard for me.
Finally, I should mentioned that my logo was heavily inspired by Jon Tan’s. I found the idea to make it all with CSS so awesome, I had to (try to) copy it!
Let me know what you think of my new design/site!