You know that feeling when you find a website that just works… and doesn’t look like it was made in the 1990’s?

Don’t get me wrong, I’m a 90’s kid through and through, but you have to admit it wasn’t exactly the height of design, and well-designed easy-to-navigate sites were virtually non-existent.

In an academic world we tend to ignore these aspects (or leave them to someone else) in lieu of simply presenting the required information - but the look and feel of the site is an aspect of communication that is too often disregarded. If we want people to read about science, we have to make it as easy as possible. Despite what you may think, this need not be particularly difficult, nor costly.

I’ve been curious about how it would be to create a net-worth personal webpage. As I usually do with these things, I gave it a shot. A dash of research, a pinch of frustration and a touch of tweaking here and there.. et voilà! Along the way I have aggregated a few tips from a variety of sources, which I’ve summarised below. Consider this a how-to for building a simple personal static website on a budget ($0-10/year).

Note: This is currently a work in progress, but there's enough information below to get started building your site!

Before You Start

Before you embark on this quest, I’d recommend getting a nice text editor to create and customize your site’s files offline (I’m currently writing this in Atom). Another option I’d recommend would be Prose.io, which connects directly to GitHub and works quite well for small editing tasks, especially if you’re on the go.

While it’s not completely necessary for the walk-through below, it would also be a great idea to learn a bit of HTML, CSS, Javascript and Markdown. There are some great online courses you could try (I started on CodeAcademy and have also been through a bit of freeCodeCamp).

Hosting On GitHub

This site is currently hosted free on GitHub. GitHub is used primarily as a repository for code/software, and is great for developing projects that are constantly being changed and improved. GitHub builds on the distributed versioning control system Git and provides a platform to host your project in a single place, keep track of all the changes and versions and work both effectively and collaboratively with others. You can sign up for a free account on GitHub, after which you can start enjoying some of these benefits (perhaps even for your thesis!?). Make sure to check out the tutorial on the website if you’re new to Git.

If you’re a student or involved in education I’d encourage you to check out the GitHub education website. You can apply for a micro/personal account on GitHub (normally $7/month), with which you can create private repositories should you wish to keep the website files out of sight (e.g. draft posts etc). Their ‘Education Pack’ also includes a bunch of useful tools, and a nifty offer from namecheap for a free .me top-level domain for a year (here’s your $0 website, folks).

One way you can use GitHub to host a simple website is via GitHub Pages, a straightfoward tool to host and publish sites on GitHub. Once you have the repository set up, you have two choices for creating your site:

1. With GitHub’s Automatic Page Generator, you can can create a functional site in minutes.
2. You can build your own site from scratch/from a template.

I went for the second option, using a template of a site which I then customized slightly.

Building Your Site with Jekyll

One other great feature of GitHub is that it supports and encourages the use of Jekyll. In fact, Github Pages is powered by Jekyll. Jekyll is “a simple, blog aware, static site generator”. It’s most commonly used to build simple personal websites and blogs, but can be used to manage larger sites to great effect (e.g. GitHub Training). GitHub have also put together a quick overview of how to use Jekyll with GitHub Pages.

I find one of the most useful features to be the use of markdown to write posts and pages, rather than directly writing HTML. This saves me quite a bit of time, and simplifies the workflow for building the site. The ability to easily use relative links and liquid templating also makes life a bit easier - but a bit more on that later.

Installing Jekyll Locally

First thing’s first - you’ll need to install Jekyll and its dependencies. While having a Jekyll-built site on Github is great, occasionally your website builds (which happen automatically after any updates) will fail due to the odd mistype. During development of your site, I’d recommend you download Jekyll and build your sites from the terminal on your local computer. This is particularly important when you’re having issues as you can catch the error messages and troubleshoot problems, and will allow you to work offline in case you live somewhere where internet (a connection, let alone speed) is not always guaranteed.

Ubuntu Installation

Firstly you’ll want to install Ruby, and then use gem to install the ruby gems jekyll and bundler. Additionally, github-pages if you’re likely to host on Github and rouge if you’re likely to want syntax highlighting as seen below.

sudo apt-get update
sudo apt-get install ruby ruby-dev make gcc
sudo gem install jekyll bundler github-pages rouge

You should now create a project directory, and find an appropriate template if you choose that avenue: If you use a template and have a Gemfile.lock, you should be able to bundle install within your project directory to install required packages as specified by the template. Be aware that if you’re using bundler you’ll also be required to prefix calls to jekyll with bundle exec (e.g. bundle exec jekyll serve). To update the Gemfile.lock to check for recently updated dependencies, you can run bundle update.

Windows Installation

To install Jekyll on Windows, a relatively straightfoward method has been documented on David Burela’s blog:

1. Download Chocolatey by entering the following into a command prompt with administrator access: @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

2. In a new command prompt with administrator access, Ruby can now be installed using the following: choco install ruby -y

3. Likewise, in a new command prompt with administrator access, Jekyll can be installed by entering the following: gem install jekyll
   • If you want to use jekyll plugins you’ll likely need to install them, a few examples are: gem install jekyll-paginate jekyll-sitemap jekyll-gist jekyll-feed

Note: Another way to achieve this is using bundler (gem install bundler) and a Gemfile (if you're using a template and it comes with one!). You can bundle install in the folder containing the Gemfile, which will install the desired packages and dependencies. Note however that this puts you at the mercy of the designer, and may lead to problems if the site is used in a different way than originally intended (e.g. GitHub pages vs jekyll).

Using Templated Sites

I’ve built this site using a template built by Michael Rose. The easiest way to use a site template hosted on GitHub is to fork the repository, then rename it to the default .io site recognised by GitHub pages (USERNAME.github.io). Alternatively you can download the repository as a .zip file and work with it offline as described briefly above.

Note: You can only have one personal site - adding additional 'project pages' is possible, though (using a gh-pages subfolder).

Serving Up Your Page

Now that we have Jekyll installed and ready to go, you’ll want to download a ‘clone’ of your GitHub repository. This is rather easy to do using the downloadable clients - you’ll want to select clone and target your username.github.io repository. After a minute, you’ll have a local copy of your site on your computer. You can make local changes - and ‘save’ them using Git commits, and push them to the server as well as download any updates to the remote repository using the ‘sync’ option. The internet has many Git tutorials if this seems confusing, and I’d encourage you to check them out to become confident using the versioning tools.

You can build your site (to the folder _site) with the jekyll serve command. This will create a local copy of your site, which is served to localhost:4000 - which you can simply use as a web address in your favourite browser. Any changes to your local files will be reflected in this dynamically-built site (they’ll take a second or two to rebuild), which makes this a great option for developing offline before you go live.

Another feature that I’d recommend is using a _drafts folder (depending on how you set up you may have to create this manually). Here you can work on your posts prior to publishing them in _posts, but they can be served up with the rest of your site using jekyll serve --drafts.

Yet to Come

• Customizing Your Page
  • General Configuration
  • Page layouts
• Buying and Managing a Domain

A short list of those who provided useful material, who I wish to acknowledge here:

• Michael Rose (Made Mistakes, Minimal Mistakes)
• Tania Rascia (www.taniarascia.com)
• Christopher Tarwater (ctarwater)
• Dave Cole (DevelopmentSeed)
• David Burela (BURELA’S HOUSE-O-BLOG)