Why you should create your website with Academic and Hugo

I recently moved my personal/academic website from an expensive and complicated shared hosting plan to the simple GitHub Pages platform for free. At the same time, I also changed the engine from Jekyll to Hugo.

In this guide, I will discuss why you should also use Hugo and Github for your personal or academic website and cover how to install and use Hugo. This will enable you to configure a static site, create content (such as blog posts or academic publications), and publish your site for free with Github.

Like Jekyll, Hugo also requires a basic understanding of using the command line in the Terminal (Mac/Linux) or Command Prompt (Windows) app on your computer. If you are not interested in this, then I can highly recommend the following simpler alternatives:

  • GitHub Automatic Page Generator - free and ideal for a very simple one page site. To get started:
    1. Signup for Github, preferably using a username based on your real name since your website URL will be in the form https://YOUR-USERNAME.github.io
    2. Login, click the “+” in the top right corner and create a new repository with the name YOUR-USERNAME.github.io
    3. From the main page of your new repository, click Settings and then Automatic Page Generator
    4. Follow the wizard to create your new website - help is available here
  • SquareSpace - ideal if you need more features and customization. It is non-free (currently 12USD/month).
  • WordPress - ideal for a highly customizable multi-page site. Although it has a free plan, I recommend paying the small fee (currently 2.99USD/month) for the Personal plan so that WordPress adverts are not shown on your site.

Whichever tools you decide to use to build your website, you can further personalize your website with your own domain name. I can highly recommend Namecheap for registering your domain, as it provides great value for money whilst providing fast support. To find a good and available domain, try a mix of your first and last names or initials, with either a .com or .me ending. Later in this article, we’ll look at how to integrate a new domain name with Github.

Why Hugo and Github?

While there are an enormous amount of website hosting and creation services available, a Hugo based website hosted on Github can have significant advantages over other options for a student or academic:

  • It’s free. Students will definitely appreciate this! Public repositories are free on Github. Hugo is free and open-source.

  • Simple editing. Instead of using HTML to write your content, you can write using popular Markdown and LaTeX math expressions.

  • Academic theme/framework. Manage your biography, publications, talks, online courses, news/blog, projects, etc.

  • No dependencies. The beauty of Hugo is that it is just one standard binary program with no dependencies, so it’s dead simple to maintain a site made with Hugo. Jekyll and WordPress on the other hand have complex Ruby and PHP dependencies, respectively.

  • It’s multiplatform. Build your site on the cloud or locally on a Mac, Linux, or Windows computer.

  • Lightning fast to generate. Hugo builds my site, piecing together all the various parts and converting the Markdown content to HTML in less than a second. Jekyll took significantly longer and occasionally stopped working due to dependencies becoming deprecated or packages requiring to be manually updated.

  • Lightning fast to access. The inherent advantage of using a static site generator is that each page and asset can immediately be served to the client without any dynamic processing. Coupled with Github’s content distribution network, this means that wherever the client is in the world, they can instantly see your website.

  • Secure TLS (HTTPS). TLS helps guarantee that the content of your website has not been interfered with. Google recently began ranking secure HTTPS sites above insecure HTTP sites, and HTTP is being deprecated by major web browsers such as Chrome and Firefox. TLS is supported by Github and it’s the way forward.

  • Excellent support. Hugo has excellent community support forums and a team of very active and friendly developers. Whereas Github support is omnipresent on Google and elsewhere like StackExchange.

  • It’s independent. Github is independent from your job, so it is portable. Whereas if your university affiliation changes, you’ll lose your university account and have to re-create a university hosted website with a new URL.

  • Solid roadmap. I have heard from a number of colleagues about universities dropping their own website hosting services and replacing them with other services or just not maintaining them adequately. Hugo and Github will not be disappearing any time soon.

  • Professional URLs. Github Pages URLs look professional (i.e. your-name.github.io) and there is also the possibility to use your own domain name with Github Pages if you wish.

Hugo vs Jekyll

In addition to the above, here are some specific reasons to use Hugo for your website if you are choosing between Hugo and Jekyll or considering migrating from Jekyll:

  • Hugo can generate a site with 1000 pages in only 0.1 seconds, whereas Jekyll takes several minutes for the same site
  • Hugo is a standard binary program, so it has no Ruby dependencies to maintain when testing/building the site locally on your computer
  • Paginations, redirection, and live reload work right out of the box in Hugo without having to setup plugins
  • In Hugo, you can just add draft = true in the front matter of the post to save an unpublished draft, rather than having to move it to another folder
  • Plus Hugo has numerous other benefits such as the content is organised in perhaps a more intuitive structure and has multilingual features built-in

Note that this is not an exhaustive list and the benefit-cost(time) ratio will depend on the size of any existing site and your skills and preferences.

Prerequisites

I will assume that you have basic experience using the command line, as I will be demonstrating commands for the Linux/Mac Terminal.

Windows users may possibly need to adapt some commands for Windows command prompt. Note that Windows command prompt can be opened from Start menu > All apps > Windows System > Command Prompt.

Installing Hugo

Academic requires the full Extended version of Hugo, which can be installed using one of the following methods, depending on your OS:

For Windows users,

  1. Install Chocolatey, the package manager for Windows
  2. Open the Windows Terminal/Console app and run choco install hugo-extended -confirm

For Mac users, assuming you have Homebrew installed, run the following in your Terminal app:

brew update && brew install hugo

For Ubuntu Linux users,

Run the following command in your Terminal app to install Hugo using the Snap package manager:

sudo snap install hugo --channel=extended/stable

More detailed Hugo installation guides are available in the Hugo documentation.

Getting started with Hugo

When I first started using Hugo, there were no website themes or frameworks available for academic staff or students. Hence, I went about creating one, namely Hugo Academic - as seen in the image below. The key features are:

  • Designed for general use but with the requirements of academic staff and students in mind
  • Wide range of content types including Online Courses, Markdown Slides, Publications, Projects, and News/Blog
  • Write in Markdown for easy formatting and code highlighting, with LaTeX for mathematical expressions
  • Draw diagrams using a syntax similar to Markdown
  • Academic linking (Scholar etc.), Google Analytics, and Disqus comments
  • Responsive and mobile friendly
  • Simple and refreshing one page design
  • Easy to customize

The theme/framework rapidly gained the attention of academics and has now become very popular with thousands of users worldwide. Since the theme is highly customizable, letting you pick and choose which features you want, it’s possible to generate many different types of website, even including general personal or freelance websites.

Creating a personal academic website with Hugo Academic.

To create your website with the Academic framework:

  1. Open your Console/Terminal app, navigate to your desired location using the cd command, and create a new website by cloning (or forking or downloading) the Academic Kickstart repository with Git:

    git clone https://github.com/sourcethemes/academic-kickstart.git My_Website
    

    Note that if you forked Academic Kickstart, the above command should be edited to clone your fork.

  2. Initialize the theme:

    cd My_Website
    git submodule update --init --recursive
    
  3. View your new website by running the following command and then opening localhost:1313 in your web browser:

    hugo server
    

Press Ctrl + C in the Command Prompt/Terminal when you wish to stop viewing your local website using the Hugo server and be able to type other commands again.

  1. Optionally, install the demo content by copying the contents of the themes/academic/exampleSite folder to your website root folder, overwriting existing files if necessary. The exampleSite folder contains an example config file and content to help you get started. The following command can be used to copy the folder via the command line:

    cp -av themes/academic/exampleSite/* .
    
  2. Customize your site and add your content such as homepage sections, news/blog posts, academic publications, talks, projects etc.

  3. Build your site by running the hugo command. This will generate a folder called public/ that contains all the HTML code and assets for your site.

  4. Deploy your site using Netlify or GitHub Pages. Alternatively, copy the public/ directory (by FTP, Rsync, etc.) to your production web server (such as your university’s hosting service). For details, check out the deployment guide.

A practical example

As discussed, Academic includes an example website for you to use as a template for your website. You can view the code for this online. My personal website is based on this example site.

Conclusion

Academic is a great way to get a personal or academic website up and running quickly and easily. Static websites, such as Academic, load significantly faster than traditional content management system (CMS) sites whilst being much easier to manage and near impossible to hack. Individuals do not usually need dynamic database-driven content or the advanced features that content management systems offer. With Academic, you can focus your energy on creating great content, using the popular and intuitive Markdown formatting, instead of administering a complex system.

Happy creating! Feel free to leave your comments or questions below!

Avatar
George Cushen
A Data Scientist & Product Enthusiast

I’m a data scientist passionate about deep learning and knowledge graphs. In my spare time, I enjoy CrossFit and open source. Follow me on twitter to be notified of new content.

Related

comments powered by Disqus