Octopress For Static Blogging
Oct 6Thank you, Wordpress. You were fantastic to me for over 5 years, but I’m moving on to something new. In efforts to keep things fresh, learn something new, and improve the performance of this blog, I am starting to blog with Octopress, which is a blogging platform built on Jekyll.
The advantages of this system include (but are not limited to):
- It serves static web pages so it’s fast.
- GitHub offers built-in support so my blog is now in proper source control and hosted for free!
- The completed website is generated on my machine and pushed to a webserver so I could easily move webhosts at any time.
There are plenty of write-ups about transitioning to a Jekyll-powered blog. Namely I used exitwp to extract the posts.
Octopress includes a pretty decent stylesheet, which made it easy to get up and writing. However, I ended up customizing it that my blog would not look like all of the other Octopress-powered websites out there. Some of the things that I added were:
##Sitemap Octopress included a sitemap plugin, but I didn’t like that it used the file modification time. In theory that works great, but for some reason it always showed every post with the exact same modification time. So I just created my own:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="/sitemap.xsl"?>
<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>{{ site.url }}/</loc>
<lastmod>{{ site.time | date_to_xmlschema }}</lastmod>
<changefreq>daily</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>{{ site.url }}/favorite-posts/</loc>
<lastmod>2012-02-07T20:59:36+00:00</lastmod>
<changefreq>weekly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>{{ site.url }}/about/</loc>
<lastmod>2012-02-07T20:59:36+00:00</lastmod>
<changefreq>weekly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>{{ site.url }}/my-photo-gear/</loc>
<lastmod>2012-09-07T20:59:36+00:00</lastmod>
<changefreq>weekly</changefreq>
<priority>0.6</priority>
</url>
{% for post in site.posts %}
<url>
<loc>{{ site.url }}{{ post.url }}</loc>
<lastmod>{{ post.date | date_to_xmlschema }}</lastmod>
<changefreq>monthly</changefreq>
<priority>0.2</priority>
</url>
{% endfor %}
</urlset> ##Atom Feed I started with this simple Jekyll feed in order to create a custom Atom Feed that looks like this:
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[{{ site.title }}]]></title>
<subtitle><![CDATA[{{ site.subtitle }}]]></subtitle>
<link href="{{ site.url }}/atom.xml" rel="self"/>
<link href="{{ site.url }}/"/>
<updated>{{ site.time | date_to_xmlschema }}</updated>
<id>{{ site.url }}/</id>
<author>
<name><![CDATA[{{ site.author | strip_html }}]]></name>
</author>
<rights>Copyright (c) 2007-2012 {{ site.author | strip_html}}</rights>
{% for post in site.posts limit: 10 %}
<entry>
<title type="html"><![CDATA[{{ post.title | cdata_escape }}]]></title>
<link href="{{ site.url }}{{ post.url }}"/>
<updated>{{ post.date | date_to_xmlschema }}</updated>
<id>{{ site.url }}{{ post.id }}</id>
<content type="html"><![CDATA[{{ post.content | expand_urls: site.url | cdata_escape }}]]></content>
</entry>
{% endfor %}
</feed> ##Retaining Sidebar Collapsed State The default template for Octopress includes a nifty sidebar that can be collapsed. To improve that functionality, I included the jQuery Cookie plugin and edited the addSidebarToggler function in octopress.js like so:
function addSidebarToggler() {
if(!$('body').hasClass('sidebar-footer')) {
$('#content').append('<span class="toggle-sidebar"></span>');
$('.toggle-sidebar').bind('click', function(e) {
e.preventDefault();
if ($('body').hasClass('collapse-sidebar')) {
$('body').removeClass('collapse-sidebar');
jQuery(window).trigger("resize");
jQuery.cookie('sidebar_collapsed', "0", { expires: 7, path: '/', raw: true });
} else {
$('body').addClass('collapse-sidebar');
jQuery(window).trigger("resize");
jQuery.cookie('sidebar_collapsed', "1", { expires: 7, path: '/', raw: true });
}
});
}
...
}Additionally I added the following code:
jQuery(document).ready(function () {
var a = jQuery.cookie("sidebar_collapsed", {
raw: true
});
if (a === "1") {
$("body").addClass("collapse-sidebar");
} else {
$("body").removeClass("collapse-sidebar");
}
});
