New year, new look with Octostrap3
Update: This obviously doesn’t match the current site anymore. I have moved it and switched themes a few times after writing this post.
I was getting a bit tired of the look of this site which was using a slightly modified version of the classic Octopress theme. By chance, I came across Octostrap3 which is an Octopress theme based on Twitter Bootstrap 3.. There seem to be some debate about whether Bootstrap is good or bad, but it is widely used and has some nice themes so I am going to try this out for a while.
The great thing about Octostrap3 is that it is very easy to setup and install. You just clone the theme from Github and install it with rake install. Be aware that the theme install may overwrite some of your custom modifications so I recommend backing up your blog before doing this. But then it is just two simple commands:
> git clone https://github.com/kAworu/octostrap3.git .themes/octostrap3
> rake install[octostrap3]
The rake install command overwrote my custom about aside and I had to restore it from my backup.
The documentation of Octostrap3 contain some tips on patching the panel and category labels to improve the look and make them more compatible with Bootstrap. There is a warning that these patches can affect upgrades to Octopress. So of course I implemented these patches. But since I check in all my changes to my clone of the Octopress repository, I made sure that these patches was checked in as a separate commit so that it is easy to revert or restore these patches later.
The last step was to I decide on a Bootstrap theme to use. The default theme is nice enough, but a bit too bright so I landed on the Flatly theme from Bootswatch. Installation was easy. Just download the bootstrap.min.css from Bootswatch, rename it to flatly.min.css and store it in /source/assets/bootstrap/dist/css. Then edit /source/_includes/custom/head.html replacing the two lines that include bootstrap.min.css and bootstrap-theme.min.css with one that includes flatly.min.css likes this:
<link href="/assets/bootstrap/dist/css/flatly.min.css" rel="stylesheet" type="text/css">
<!-- <link href="/assets/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"> -->
<!-- <link href="/assets/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css"> -->