Skip to content


Repository files navigation




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.


I followed this guide to set up.

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" } } }); </script>
<script type="text/x-mathjax-config">
	tex2jax: {
	  inlineMath: [ ['$','$'], ["\\(","\\)"] ],
	  processEscapes: true
<script src="" type="text/javascript"></script>


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 for the website can be reproduced with attribution and without warranty, under the MIT license.

Content is licensed under the Creative Commons.