Building & Hosting a Personal Academic Website Using Hugo

In this tutorial, we will go through one way of setting up your personal academic website. We will cover

  • how to create a website,
  • two ways to host your website for everyone to see!

Why have a personal academic website

Having a personal website serves multiple goals:

  • Professional goals
    • Host a public resume
    • List your publications, research interests, experience, etc.
    • Allows people to find you and contact you
    • Have an easy way to point to you
    • “Online presence”
  • Exposure for your work & research
    • Build workshops, courses and tutorials for everyone to access
    • Present your research in alternative ways (other than articles, talks, posters, etc.)
  • Host content for courses
    • e.g. Canvas may have some limitations that a website might not have
    • Make your teaching content public

Other uses for simple website

  • Research group page
  • Student organization
  • Documenting a software or package you developed
  • Online book
  • Artist portfolio
  • Blogging

A quick primer on (static) websites

Most websites you encounter consist of html (HyperText Markup Language) code and embed other languages to allow more interaction (javascript, Perl, etc.). A website contains multiples pages, often arranged into different subdirectories, just like regular file management. In particular, you can see a website as a tree where the accessible leaves are the .html pages.

Each page you access is a generally a .html file, but in general no one actually write html directly—developers use programming languages that generate the html for themselves. The style of a page—colors, font, placement, etc.—are generally contained in css (Cascading Style Sheets) files. One goal of this workshop is to build a website without ever writing html or css.

index.html has a special status within a directory. Accessing site/subdir/ automatically loads site/subdir/index.html.

About Hugo

Hugo is a framework for developing websites. In particular, it generates the desired html pages given some developer input in Markdown files. The engine uses the Go language to interpret the Markdown and produce the corresponding html files.

In addition to Markdown files, the developer also modify configuration files and Markdown front matters, in simple toml format, to determine meta-information about the website and control visual aspects. Both Markdown and toml languages have simple and intuitive syntax so the learning curve is very steep. Once the base website is set up, editing and adding content is only a matter of creating folder, creating and editing Markdown files and editing toml files.

Markdown file front matters

An important concept to understand about Markdown files is the file layout. Each .md file must contain a front matter part which describe some meta information about the content of the file; the front matter is then followed by the content itself in the body of the file. In the present context, the front matters will contain, among other things,

  • a high-level description of the page,
  • the type of page to specify to the Hugo compiler,
  • some details about indexing and referencing across pages.

Example:

---
# Front matter
title: "MyFirstPost"
subtitle: ""
summary: ""
authors: []
tags: []
categories: []
date: 2019-10-04T18:18:52-04:00
lastmod: 2019-10-04T18:18:52-04:00
featured: false
draft: false
---
<!-- Body of the file -->
The content of the post goes here
...

The Academic theme for Hugo

The way to use Hugo is to start from a template (or theme) and adapt it to your personal needs. Different themes implement different type of contents and are therefore suited for different purpose.

In this tutorial we will consider the Academic theme which is one of the more complete theme and is particularly well-suited for an academic website (as the name suggests!) Here are some of the things Academic allows:

  • Blog posts
  • Documentation
  • Publications
  • Talks
  • Projects
  • Multiple authors
  • General pages
  • Home page with widgets structure

More Hugo themes

  • Resume-type themes
  • Documentation-type themes (many equivalent options)
  • Portofolio-type themes (many equivalent options)
  • Blog-type themes (many equivalent options)

Alternatives to Hugo

  • HTML from scratch
    • Highly not recommended
  • Jekyll
    • Very similar to Hugo (all content is Markdown, similar shell commands)
    • Slightly more complicated, but has slightly more features
    • I have not found a theme that matches the capabilities of Academic for Hugo (see e.g. Jekyll Academic and its demo site)
    • GitHub Pages built-in themes (using Jekyll) can be up in a few clicks
  • WYSIWYG editor
  • More advanced alternatives

Alternative hosting

Main takeaways

  • Creating your own website is easy and you should definitely do it soon.
  • People have made it easy for you to display your work; make use of all the tools available!
  • Creating the content for your website, not building and deploying it, should consist most of the work you have to do.

Last updated on Oct 9, 2019

comments powered by Disqus