William Turner

William Turner

Postdoctoral Researcher in Cognitive Neuroscience

Making an academic website (like this one)

9 minute read

Published:

This is a guide to how I made this website (to help you make one too!).

What kind of website is this?

This is a static website (really just a collection of files) built using Jekyll and the academicpages template. It’s hosted for free (!) on GitHub Pages hence the funky (some might say cool?!) ‘github.io’ address.

What does is cost?

Zero dollars… 🤯 🎉

All you need is a bit of time up your sleeve, it took me ~1-2 hrs to get a basic site up and running.

What coding knowledge is required?

All that’s required is some familiarity with using a git client (I used SourceTree) and a willingness to google Markdown formatting issues until you get what you want. If you have no idea what Markdown and git are then don’t fear… learning the basics of both is actually super simple. So building a website like this even with zero experience is still very doable (it might just take you a wee bit longer!).

To ease you into things, I’ll briefly sketch out the steps that lie between you and being a website owner. First, you will use a git client (a bit like dropbox for code) to transfer all the template website files onto your computer. Then you will edit and personalise some of these newly acquired files, using the Markdown language to specify text formatting (e.g., specifying whether things should be bolded, italicised, hyperlinked etc). After you are done editing things, you will use your trusty git client to ‘push’ the files back onto the web for people to look at (in the form of your new website). That’s pretty much it! All the fancy website formatting is taken care of by the academicpages template, so you really only have to edit text files and move them around (easy!).

Are you ready to roll?

Yes! Heck yeah!!! Read on...
No! Believe in yourself!


Here’s what you need to do:

  1. Make sure you have a GitHub account. If you don’t have one then… make one! Also bear in mind that your username becomes the initial part of your website address, so you probably want to pick a professional looking username (or end up with one like mine 😬). If you really don’t want a funky ‘github.io’ address you also have the option of 💸 buying 💸 your own domain name (e.g., bestpostdoc.com… actually I just checked and it’s taken but postdoc.best is available and will only set you back AU$42.78).

  2. Make sure you have a git client installed (or do everything through terminal, if you’re into that!). If you want to follow in my footsteps exactly then use SourceTree. Download the app, make an account and link it to your GitHub. Remember, we will use SourceTree to move files from GitHub onto your computer so we can then edit them and then upload the freshly edited files back onto the web!

  3. For the initial website building process I’d recommend you just follow this excellent guide by Rob Williams. Its very clear and beautiful. Note, however, that I deviated from this guide slightly. I opted to just push my edited files onto the web immediately (using SourceTree) and fix bugs that I saw in the online version with subsequent pushes, rather than testing my website ‘locally’ (i.e. behind closed doors). I found this much easier, but in doing so you do run the risk of someone catching a glimpse of your mangled half-built website, so beware!

  4. If you have ignored my advice to go follow Rob’s guide, here’s a sketch of the steps involved… in Rob’s guide:

    1. ‘Fork’ the academicpages repository into your GitHub (this just means we make our own copy of the original bunch of files, to do whatever we want with).
    2. ‘Clone’ the newly forked repository from your GitHub onto your computer (this just means we create a local copy of the repository on our own computer… kind of like downloading everything). We do this so we can then edit the files. I did all of this with… you guessed it, SourceTree!
    3. Edit the relevant files. I used MacDown to edit all files. I started by editing the ‘_config.yml’ file, following Rob’s guide. Then I edited the ‘about.md’ file (in the ‘pages’ folder) to add in a blurb about myself. Finally I added my profile photo into the ‘images’ folder to replace the original ‘profile.png’ file.
    4. For the initial version of my website I decided to just have an ‘about me’ page with links to my twitter, email, google scholar, and github accounts on the left-hand side and nothing else. So I went to the ‘data’ folder and edited the ‘navigation.yml’ file to remove all the default links to other pages at the top of the website. To do this you just have to put a hash (‘#’) in front of the lines you don’t want. For example, to remove the publications link you do this:
# main links links
main:
  #- title: "Publications"
  #  url: /publications/

Customising your site

I later came back to my initial husk of a website and decided to add in my publications at the bottom of the ‘about me’ page.

Here’s a snapshot of the code I added in to the ‘about.md’ file to achieve this (this snippet adds in the first two publications I have listed).

### Publications

1. Ko, Feuerriegel, **Turner**, Overhoff, Niessen, Stahl, Hester, Fink, Weiss, & Bode (2022). Divergent effects of absolute evidence magnitude on decision accuracy and confidence in perceptual judgements. *Cognition*. <a href="../files/Ko_et_al_2022.pdf"><i class="fas fa-file-pdf"></i></a> <a href="https://www.sciencedirect.com/science/article/pii/S0010027722001135?dgcid=coauthor"><i class="fas fa-link"></i></a> <a href="https://osf.io/r8vfx/"><i class="fas fa-code"></i></a>

2. **Turner** (2022). Unravelling the neural mechanisms which encode rapid streams of visual input. *The Journal of Neuroscience*. <a href="../files/Turner_2022.pdf"><i class="fas fa-file-pdf"></i></a> <a href="https://www.jneurosci.org/content/42/7/1170"><i class="fas fa-link"></i></a>

With a bit of googling I worked out how to use some simple HTML to add in fancy icons like this which I use to link to a pdf copy of my papers. I put these pdfs in the ‘files’ folder and then pushed them onto GitHub with… SourceTree. Happily, you don’t need to install anything extra to use icons like this. You can search to see what other icons are available on the Font Awesome website.

To make things a bit more digestable, I’ll focus in on the code snippet that goes into making just one of these links:

<a href="../files/Turner_2022.pdf"><i class="fas fa-file-pdf"></i></a>

The first bit <a href="../files/Turner_2022.pdf"> specifies the link to the pdf document which I put in the files folder. The second bit <i class="fas fa-file-pdf"></i></a> says that the link should be an icon from the Font Awesome Solid (‘fas’) class, specifically the pdf doc one (‘fa-file-pdf’). How did I work out that I needed to write fas fa-file-pdf to get that? Well I went on the Font Awesome website and searched for ‘pdf’. I then clicked on the icon I liked and looked at the html snippet provided. If you’re particularly sharp eyed you’ll notice that this html snippet <i class="fa-solid fa-file"></i> is actually different to the one I used, and so it didn’t work when I first copied it in 😱! It turns out that this is because the academicpages template uses version 5 of Font Awesome. After some googling I found this page which showed me the old syntax for referencing icons in version 5 <i class="fas fa-file-pdf"></i> which fixed the issue! Note, for all of this to work you might need to make the small edit suggested here under the heading ‘Fixing fancy icons’.

Code chunks (and wrapping to avoid long scroll bars)

To add in a code chunk you simply add three back ticks ` before and after the code (and to get syntax highlighting you just add the language (e.g., python) straight after the first lot of back ticks). To write code inline (i.e. in the middle of a sentence) you just add one back tick either side of the code.

One issue I ran into when using this default code chunk quoting is that for long lines of code, the text wont ‘wrap’, so you can end up with a ridiculously long horizontal scroll bar. If you want to avoid that, all you need to do is open the ‘_base.scss’ file in the ‘_sass’ folder, search for the word ‘pre’ and change the following chunk:

pre {
  overflow-x: auto; /* add scrollbars to wide code blocks*/
}

to this:

pre {
  overflow-x: auto; /* add scrollbars to wide code blocks*/
  white-space: pre-line;
}

After you save and push that change it should fix the issue (at least when viewing on google chrome… I haven’t tested other browsers).

Update 5/1/2024: to get wrapping but still respect indentation within code blocks you actually want to set white space to ‘pre-wrap’ rather than ‘pre-line’ (this is what I have now done).

Emojis

To add emojis to your text all you need to do is find out the ‘hexadecimal HTML code’ for the emoji you want. So for example, if I wanted to add in a cowboy hat emoji I would google ‘cowboy hat emoji hexadecimal HTML’ and copy in the relevant code &#x1F920; … 🤠

You May Also Enjoy