I, Oliver Bonham-Carter 👋

Assistant Professor in Computer Science, Allegheny College

I, Oliver Bonham-Carter, In June

I, Oliver Bonham-Carter 👋

Assistant Professor in Computer Science, Allegheny College

Build a Hugo Site with a Theme

Making a website with Hugo: You might want to use this bare-bones website template for an online research website.

Below is code to create a website and then to add posts (blogs) to the project. Each of these posts that you create could be akin to pages in a book that you could organize chronologically. Have fun!

Huge Research Notebook

Setting Up

You will need to first install HUGO to build and test your website locally. Once you are satisfied with how your site looks, you will push the entire project (i.e., all files for the project) to GitHub. Once your site is on GitHub, you will use Netlify to build and publish your website.

Creating a Web Site

hugo new site myAnubisThemeSite

GitHub to host your project

Adding posts

hugo new post/post1.md

Modify your post

Use your favorite editor to modify file that you just created.

code content/post/post1.md 

You will see that the only contents of the file are,

title: "Post1"
date: 2023-01-30T22:30:39-05:00
draft: true

Modify the file by adding some content. Then change the draft: true to draft: false once you are ready to publish your new post.

Viewing your local site

To view your site, use the below code to see all posts for which draft is set to true.

hugo server

If you want to see all posts, regardless of whether their draft parameter is set to true or to false, use the below code instead.

hugo server -D

Install a Theme

You may not be able to see much until you have installed your theme to control the user-interface. You could use seemingly any theme that you want to use – there are quite a lot available. In this tutorial, we will use a simple one called Anubis that will provide a basic page by page view of notes. Feel free to try other themes to find the one that perfectly fits your site.

We are going to install the theme as a git submodule. This implies that our freshly built Hugo site is already a GitHub repository. Unfortunately, it is not a git project since we just created it! To quickly make this Hugo project into a GitHub project, we could do one of the following to create a .git directory in the project’s root (thus making it a GitHub project).

When the hidden directory .git is present in the root of a project, then you are able to install the theme as a git submodule. (Hey, we had to add a theme in this way at some point!).

Add a submodule of the theme to themes/ directory. Note adding repository as a submodule allows us to embed a GitHub project within another GitHub project. Git does not like multiple .git directories in a project.

git submodule add 


To see site in a fully prepared state, copy the files from themes/anubis/exampleSite/config.toml into your root directory and simply edit the config.toml file, in addition to the posts. If you want to see how to configure a web site from scratch, keep reading.

Connect site to a theme: Add the following to config.toml

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My Amazing Site!"
theme = "anubis"

Add a Menu System: Add the following to config.toml

Note, you can add as many menu items as necessary. Be sure to increment the weight variable by one for each menu item. The weight variable helps to control the order of the item in the menu.


identifier = "about"
name = "posts"
url = "/posts/"
weight = 1

identifier = "tags"
name = "Tags"
url = "/tags/"
weight = 2

name = "Archive"
identifier = "archive"
url = "/posts/"
weight = 3

Adding a photo to a post

## A photo of the Allegheny College Mascot


Note, the File mascot.png is actually located in myAnubisThemeSite/static/graphics.


When you push your project to GitHub, the File Netlify.toml will signal GitHub to signal netlify to launch your site. Please read up on how to create an account at Netlify and make configurations to launch your site.