To be honest, I quite dislike the default Github plugin for Octopress. While it works and is nice, It’s not at all what I would want on a blog. So I decided to make my own one, based on the Google Plus plugin that already existed. It was also a nice learning experience to create and install a plugin.

First off, I created the follwing github_icon.html in the source/_includes/custom/asides/ folder:

{% if site.github_icon_username %}
	<section class='github_icon'>
		<h1>
			<a href='https://github.com/{{ site.github_icon_username }}'>
			{% img /images/github_32.png 32 32%}
			Github
			</a>
		</h1>
	</section>
{% endif %}

The image I used can be downloaded from http://i.imgur.com/pKRJNiZ.png, and you need to save it into source/images/. Thats probably the easiest part to do :)

Then, it needed the github_icon_username variable, so in _config.yml I added:

#GithubIcon
github_icon_username: ry167

Obviously, replace ry167 with your github username.

It really needs styling, it breaks to hell otherwise. While you can apply the googleplus class to it, you can also create your own by creating the following file, github_icon.scss in sass/plugins/:

.github_icon h1
{
	-moz-box-shadow:none !important;
	-webkit-box-shadow:none !important;
	-o-box-shadow:none !important;
	box-shadow:none !important;
	border-bottom:0px none !important;
}

.github_icon a
{
	text-decoration:none;
	white-space:normal !important;
	line-height:32px;
}

.github_icon a img
{
	float:left;
	margin-right:0.5em;
	border:0 none;
}

Finally, enable the plugin by adding custom/asides/github_icon.html to default_asides in _config.yml

Then you can have a nice button on the side like I do