Why you should create your personal website with Academic and Hugo

Why you should create your personal 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, news, teaching resources, 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 from 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

For Windows users,

  1. Download the latest zipped Hugo executable (e.g. hugo_<version>_Windows-32bit.zip) from the Hugo Releases page.
  2. Create a Hugo and bin folder: C:\Hugo\bin\
  3. Move the downloaded ZIP file into your C:\Hugo\bin\ folder.
  4. Extract the ZIP file such that hugo.exe is extracted in C:\Hugo\bin\
  5. Add Hugo to your Windows PATH:
    1. Click Start > System > Advanced System Settings > Environment Variables
    2. Double-click on PATH
    3. Click New, type C:\Hugo\bin, and press Enter
    4. Click OK to save and close the windows

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

brew update && brew install hugo

For Ubuntu Linux users,

  1. In your Terminal app, type arch. If the output is x86_64 then you'll want to download the 64-bit file ending in -64bit.deb in the next step, otherwise download -32bit.deb.
  2. Download the latest Hugo package for your system (as noted in the previous step) from the Hugo Releases page and install by double clicking it, or via command line. For example:
wget https://github.com/gohugoio/hugo/releases/download/v0.42.1/hugo_0.42.1-64bit.deb
sudo dpkg -i hugo*.deb

Note that further 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 academic staff, students, or general personal use
  • Includes Biography, Publications, Projects, News/Blog, Teaching, and Contact widgets
  • Write in Markdown for easy formatting and code highlighting, with LaTeX for mathematical expressions
  • 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 Command Prompt/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, Hugo 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 much harder 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 instead of administering a complex system.

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

Avatar
Dr George Cushen
A Data Scientist, Vision Engineer, & Product Enthusiast

I'm a data scientist and computer vision engineer passionate about deep learning, augmented reality, and internet of things. 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