Why you should create your website with Academic and Hugo

I recently migrated my websites from expensive and complicated hosting plans to the free and simple Academic website builder for Hugo.

In this guide, I will discuss why you should also use Hugo, Github, and Netlify 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), save your content to GitHub, and publish your site for free with Netlify.

Similarly to other static site generators such as 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:

  • Wix - comes with a comprehensive admin panel for managing your site and content. Although there is a free tier, you may wish to consider paying the small fee (currently $13/month) for the Combo tier which removes adverts and empowers you to use your own domain name.
  • WordPress (Managed) - ideal for a large, highly customizable site. You may need to purchase themes and plugins to get some of the functionality that is already built into Wix. Although it has a free plan, you may wish to consider paying the small fee (currently $2.99/month) for the Personal plan which removes WordPress adverts from your site. Note that WordPress itself is open source PHP software - here I am recommending the official managed hosting provider rather than dealing with the complexities of hosting/maintaining it yourself.

On the other hand, if you are building a large, complex site that requires many interactive features, I can recommend:

  • Wagtail - a modern open source CMS with users including Google and Nasa. Especially awesome if you are a Python developer, data scientist, or just keen to get some hands on experience with Python.

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!

Disclaimer: I am using some affiliate links within this post, so if you do want to go purchase one of the non-free solutions, clicking a link may pass me off a little commission (without costing you anything extra)!

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.

comments powered by Disqus

Related