17 May 2020
If you're a data scientist/bioinformatician/whatever and are looking at making your own static website, you can't go wrong with GitHub Pages (https://pages.github.com). It's free, it's easy, and it's fast. There are plenty of tutorials on the subject and I'm not an expert, so, this is not a guide, just a breif showcase.I first made a github page a few years ago for the Adelaide Protein Group for which I’m the webmaster. The group started in 2008 as a special interest group of the Australian Society for Biochemistry and Molecular Biology. In the early years the APG needed the website to manage the event RSVP functionality, email newsletters etc. They settled on a traditional joomla website, spending a few hundred dollars per year for the domain and hosting.
In 2018 I built a new, slim website for the APG. We had moved to collecting RSVPs using Eventbrite (free) and sending our newsletters with Mailchmip (free), so we no longer needed dynamic website hosting. The new website is hosted using GitHub pages (also free), with DNS by cloudflare (you guessed it, free). The only thing we now pay for is the domain name (approx. $12/year). All in all, it saves a lot of money that is better spent on APG events. It was a no-brainer.
I started by cloning the theme I wanted (minima for the APG, midnight for this blog).
git clone https://github.com/pages-themes/midnight.git
You could just create the repo and select a theme, the idea being you only need to add and modify a few files to make your website but I wanted to customise the look and funcionality. For the APG website I made quite a few tweaks to change the look and feel, and to get a feel for the inner workings of jekyll. For this site I just changed some colours and tweaked some padding in the CSS. I also had to tweak the default.html template file to accomodate the new nav bar.
Jekyll has inbuilt support for blog posting. New blog posts simply go in a _posts/ directory with the format yyyy-mm-dd-title.md; Jekyll automatically infers the date and title, creates a url for the post, and even grabs an excerpt from the content. Some ‘front matter’ goes at the top of this file:
---
layout: post
category: misc
---
The post template posts.html I had to create, but it simply builds on the theme’s default template to show the contents of the post:
---
layout: default
---
<h1>{{ page.title }}</h1>
<p>{{ page.date | date_to_string }}</p>
{{ content }}
I already knew the structure that I wanted so I went ahead and added the pages as well as links for the nav bar:
These pages are implicitly available at /about, /projects etc. but you can also manually set the permalinks within those files, for instance to make silly-file-name.html accessible at /sensible/url.
Finally, add some code (thanks google) to cycle over posts and display a list of links, for instance in projects.html:
{% for post in site.posts %}
<ul>
{% if post.category == "project" %}
<li>
<h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
<p>{{ post.date | date_to_string }}</p>
<p>{{ post.excerpt }}</p>
</li>
{% endif %}
</ul>
{% endfor %}
So as you can see there’s only a handful of steps you need to do to set up the site’s files and make it your own. Deployment is easy, just dump the files in your GitHub pages repo, and push. Your site is now published at reponame.github.io.
Setting up a custom domain takes a few extra steps. For the APG website I configured A and CNAME records on cloudflare pointing at github. Pointed domain registry name servers at cloudflare. Added the domain name in the github repo’s settings (it creates a file in the repo called CNAME). For this site i got the domain from porkbun. Porkbun has an option to just input your github username and it configures all the DNS records for you.
That’s basically all there is! Adding posts is easy; locally I just create a new file in _posts/, give it a category and add the content as markdown. Test the website locally to make sure it looks fine:
bundel exec jekyll serve
Commit the changes and push, and the website gets automtically rebuilt by GitHub. As you can see, you get a fair amount of website for very little cost and effort.
You can view the files for this website at github.com/beardymcjohnface/beardymcjohnface.github.io