New Site

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.

Webby

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

Compass

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!