Branch: gh-pages
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.




I recently decided to make a webpage to act as both a portfolio to demonstrate some of my interesting projects, as well as a 'scientific blog' to informally log what I have been thinking about.

I do like writing in markdown – I currently have a better-than-sublime (no pun intended) setup using the delicious Atom text editor which makes writing a pleasure. As such, I wanted a web platform that allows you to write posts in markdown. Github pages with Jekyll seemed to be the right choice. I had no prior experience in HTML/CSS, but it wasn't too hard to pick up the small bits necessary.

Theme and style

I decided to use the Hyde theme as a basis. In the author's words:

Hyde is a brazen two-column Jekyll theme that pairs a prominent sidebar with uncomplicated content. It's based on Poole, the Jekyll butler.

Hyde screenshot

But I've changed a few minor things, including the font and the colour.


For the main body and all the text, I was torn between Crimson, Garamond, and Palatino.

  • Crimson is marginally more informal, and it is pretty easy on the eyes. I am worried that it is not 'web-safe'.
  • Palatino and Garamond are both classy, and it is hard to decide between the two. I'm leaning towards Palatino, as Garamond is a lot 'thinner'. Personal preference though.

Weighing in these considerations, my CSS looks like this:

font-family: "Crimson Text", Palatino, Garamond,
Times, serif;

For the sidebar, I decided to go with a sans-serif font. It looks cleaner and more professional. Arial was the easy option.


The whole website is in a lovely shade of purple. Hyde comes packed with a choice of some base16 themes, but no thanks. I added the following css to define my purpz theme.

.theme-base-purpz .sidebar {
  background-color: #2f0857;
/* pww 2014-12-17 - moved from poole.css to each theme */
.theme-base-purpz .content a,
.theme-base-purpz h1, h2, h3, h4, h5, h6,
.theme-base-purpz .related-posts li a:hover {
  color: #5c14a4;

Then it is just a matter of putting:

<body class="theme-base-purpz">

into your default layout html file.


I am using MathJax to render my maths. To get it to work, I just added the following html into my head.html file under my _includes/ folder:

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({ TeX: { equationNumbers: { autoNumber: "AMS" } }, tex2jax: { inlineMath: [ ['$','$'],], displayMath: [ ['$$','$$'] ], processEscapes: true, } });
<script type="text/javascript" src="">


I started with the default domain, which was, but after a while I started to feel that this was too clunky. I decided to shop around for a nice domain, and found what I thought was a bargain on I think my new domain is costing me US$6 for the next 5 years, which is a good deal.

Namecheap offers a very useful guide for linking your new domain with github pages blogs, and this was actually very easy to do.

However, it broke a lot of the CSS and internal links because of the new url, which means that I had to go and edit all the baseurl stuff etc. So my advice for someone aspiring to make a github pages blog is to set up your custom domain before adding content.


Code can be reproduced with attribution and without warranty, under the MIT license.