Over this past weekend I switched my blog over from WordPress to Octopress. In this post I write about why I did it, what exactly I did to get the blog just the way I wanted, and what I plan to do in the future.
If you were to ask me what’s the difference between the two, the first thing I would tell you is that Octopress serves static HTML. The blog is generated on my local machine (usually my laptop) and then the static files are uploaded to the server. This is also called ‘baking the site.’
While I’m not an ‘A-list’ blogger and don’t have to worry about my site being Fireballed or Slashdotted (or JessicaHisched or SwissMissed) it’s comforting to know that my blog is being served as efficiently as it can be.
A lot has been said about the virtues of baking your own blogs, so I’m not gonna repeat them here. You can read what Matt Gemmell had to say about it and also what Brent Simmons wrote about it in these three articles.
For me, though, the biggest motivating factor was that I didn’t like using the Wordpress website to create and edit blog posts. The web interface is just not natural. Yes, there are apps like MarsEdit that simplify the process, but that’s still one more layer of abstraction than I care to interact with. I want the experience of writing to be as close to the metal as possible: I use a text editor to edit text - I should be able to use any text editor to edit my blog.
Enter Octopress and its support of Markdown. I set up Octopress per Matt’s recommendations and with some minor hacking I was able to migrate the blog over the course of one weekend. In what’s left of this post I’ll write about what changes I made to the system to get the blog ‘just right’ and what changes I would like to make in the future.
Floating Images
Octopress has a nice shorthand for specifying images:
{% img [class names] /path/to/image [width] [height] [title text [alt text]] %}
Using the proper class names one can have the image float left or right or otherwise set its alignment. However, I like having captions under my images. This requires a floating div that would contain both the image and the caption under it. For best results, the div would have to be about as wide as the image.
Octopress is based on Jekyll that supports the
Liquid template engine written in ruby.
I could probably have written a Liquid
plugin to do this, but I don’t know Ruby (yet) and so I had to come up
with another solution.
To get this to work I created my own markup that would be inserted into
the markdown text as an HTML comment. Markdown would preserve the HTML
comment, and it would show up in the HTML file after rake generate
was called. I wrote a small shell script call generate
that calls rake generate
and then invokes the perl script imageCaption.pl
on every generated html file:
{% include_code octopress/generate lang:bash %}
And, here’s imageCaption.pl
. It searches for the markup and
replaces it with the appropriate HTML.
{% include_code octopress/imageCaption.pl lang:perl %}
In order to tie this all together, I had to define the css classes for
the various ‘ai…’ classes. I added the following code to sass/custom/_styles.scss
:
{% include_code octopress/_styles.scss lang:scss %}
Note that I added max-width:100%
for all the divs and images -
this ensures that the images won’t get cropped when the page is
displayed on a smaller, mobile display.
You can see an example of these aligned images in my post on how lenses work.
Web Server Optimizations
I host my site on an Apache 2 web server. As I had done with my taskforest website , I decided to optimize the site and get a high score from PageSpeed. I enabled compression of html files, and turned on KeepAlive.
I also had to change my site redirections. Originally, I was
redirecting aijazansari.com to
www.aijazansari.com. However, I noticed
that my site was not being displayed correctly on Windows Internet
Explorer Version 8. As this page shows,
it’s probably due to
poorly-implemented restrictions to prevent cross-site scripting. I
changed the redirections to be the other way around, and then the site
worked fine on IE8. I’ve included the relevant part of my httpd.conf
file below:
{% include_code octopress/httpd.conf lang:apacheconf %}
Excluding Myself From Google Analytics Reports
While I tweak this blog, I’ll be accessing it very often. I don’t want my accesses to influence the Google Analytics reports. I followed the advice on this page and set up Analytics to ignore the cookie that only I would have set.
Update 2011/12/20 - These instructions didn’t work. Read my next post to see how I got it to work.
Can’t Forget The FavIcon
Finally, I overwrote the default favicon.png
with my own version.
It was the fininshing touch to get the blog ‘just right’ (for now).
Plans For The Future
The first thing I want to change about my blog is the theme. I think the default Octopress theme is very good, but I personally prefer the more minimalistic themes. I used to use Basic Maths on my WordPress site. I might have to learn some Ruby, and also learn about Liquid and Jekyll, but I would like to make a theme that’s somewhere between Minimal Mac and Basic Maths. I’m also gonna have to replace my Perl image alignment hack to a Liquid plugin soon.