How to create an academic group website with Hugo Academic in 2024
In this post, I will go through the steps to set your Windows computer up to run a Hugo Blox academic group static website and host it on GitHub Pages. This post serves as a personal guide for my future self, detailing the steps to create a page using the Hugo Research Group template. However, it’s not just for me – if you’re interested in embarking on this journey of creating your own Hugo Research Group or Academic CV page, I hope you’ll find this guide useful too!
If you have doubts whether or not to choose this tool for your website, the post of Jianing Yang states some pros and cons and I found it very clear in this regard.
Setup git and GitHub
Create a GitHub account
If you are familiar with Git and GitHub, you probably have a GitHub account already. If this is not the case, don’t worry: you will not need super technical expertise to navigate your way through the next steps! Just head to GitHub and create an account.
Install GitHub Desktop
If you are on Windows, GitHub Desktop provides a more user-friendly way to manage your GitHub repositories (including the one that will contain the source of your website). Just download and run the installer. During the installation, you will be asked if you prefer to use the email, which is assigned to you by GitHub, or your personal email. I suggest to select the latter from the dropdown menu.
Install VSCode
Also, having an IDE like VSCode is not mandatory, but it surely will help. Again, just download and run the installer.
Install git
Finally, download and install git. During the installation, you will be asked to select from several options. Among them:
- Select Visual Studio Code as the default editor.
- Override the default branch name and use
main.
Install Hugo
Install Go
Download and install Go. After installation, test it from the PowerShell by running the command:
go version
and confirm that the command prints the installed version of Go.
Install Dart Sass
Download the dart-sass prebuilt binary from GitHub (current version, v1.72.0).
Unzip it and save it wherever you prefer.
Finally, add it to the Path variable.
Path environment variable, search for Edit system environment variables in the Windows’ search bar.
From the window, select Environment variables....
Select the Path variable in the user variables’ list and edit it.
Add the path of the directory containig the .exe (!!) file to the list.Install Hugo
It’s now time to install Hugo. Download the hugo extended prebuilt binary from Github (current version, v0.124.1).
Unzip it and save it wherever you prefer.
Finally, add it to the Path variable (see section above for instructions).
Confirm the installation by running this command from the PowerShell:
hugo version
Clone the template repository
Go to the Hugo Blox GitHub page and find the theme-research-group repository.
Click on the Use this template green button on the top-right corner and select Create a new repository.
Select a name (usually, <yourname>.github.io) and leave the repository public.
Finally, you can clone the repository locally on you computer. Use GitHub Desktop to clone the repository containing the website source.
You will now be able to build and run the website locally on your computer, without deploying it to the web. Use your PowerShell terminal and run the following command:
cd path\to\your\repository
where path\to\your\repository is the path to your repository.
If you cloned the repository using GitHub Desktop, this will probably be in
cd Documents\GitHub\<your-repository-name>
where <your-repository-name> is the name you chose for your repository.
You will be able to build and run your website locally by running the following command:
hugo server -D
You will be able to access the webpage (usually) from the address http://localhost:1313/.
