Dropping WordPress for Pretzel

A few months back I read an post by GitHub founder Tom Preston-Werner, called Blogging Like a Hacker. It really struck a nerve in me, why had we moved to huge CMS systems for little things like blogs? The idea of “building” a set of static HTML pages and pushing to a web server just made sense to me. Since I don’t get to code as often as I would like anymore, I thought this would be a good opportunity to play around.

###Requirements### If I was going to rebuild my blog again, I was going to take the chance address several goals for my site. But one of my top goals was to learn as much as I could about recent web development trends.

  • Responsive design.
  • Enable my photography posts.
  • Write posts in Markdown.
  • Utilize Git for deployment.
  • Improved performance.

####Pretzel#### The team working on Code52 have been working on some pretty cool projects, along with MarkPad they have created a static site generator called Pretzel. Pretzel is heavily influence by Jekyll and shares many of the same technologies, but implemented in C# instead of Ruby. I have played around with Jekyll, and it is great, but I am a little more comfortable in .Net and I wanted to support the work that the Code52 team was producing.

####Responsive Design#### It seems that the latest thing in web design is building out a responsive site. A single site that can scale effectively from a smart phone, tablet, to a full screen desktop. There are several frameworks that exist that can significantly accelerate the design. I decided to utilize the Skeleton grid framework. Skeleton uses a 960 pixel grid system and media queries. It is a pretty simple design, and had just enough of what I was looking for without a ton of features I currently don’t need.

###Photography Posts### My site has always been a location where I share my photography work. So I needed to come up with a way to publish my photographs without a ton of manual intervention. When I was using Wordpress I had a few plugins that would produce multiple image resolutions and extract metadata about the photographs to include within a post. I never loved this approach but for the most part it worked. I was looking for something that would work similar to writing blog posts with Markdown but for my photographs.

####Adobe Lightroom#### Then I remembered that Adobe Lightroom, the application I rely upon to manage my photographs, has a capability call Web Galleries. The out of box Web Galleries that Lightroom ships with are templates that produce either an HTML or Flash site. Neither of these were really what I was looking for, but then I remembered that Adobe has a SDK and they enable you to define your own gallery.

Using the Lightroom SDK I was able to produce a custom web gallery template that outputs multiple image resolutions along with a markdown file I could use within Pretzel. There is enough detail here for its a future post. And once I clean up the template a little more I will share it out for those that are interested.

###Publishing### At this point I have a responsive site design. I am able to write blog posts in markdown. Create photography posts from Lightroom. Using Pretzel I can generate out a static HTML site and test it locally. I can FTP the contents of the _site folder from Pretzel to my server but I really wanted to be able to utilize git for publishing. I am already using git to manage the my site template so being able to publish via git would be pretty cool.

It turns out that configuring a git within Bluehost, was not very difficult. I was able to setup a bare git repository to push the site into. And using a post receive hook, the changes to the site get pulled down into the public www directory.

###Conclusion### So far this has been a really fun project. I learned a ton about responsive web design, a little about git, and more than I ever wanted to now about extending Lightroom. I have shared the source to the site template at markgroves.codeplex.com. Let me know what you think.