Hugo Themes and blogdown make blogging as easy as writing markdown or RMarkdown, but in the back of my mind I’ve never been totally satisfied by the defaults. Scrolling through the themes, I could never find one that was just right. And it wasn’t just the appearance. I wanted to organize and layout my website in a way none of the existing themes offered:
- two-column blog previews
- sections for projects, and subsections within projects
- special lists and previews for certain content
So last weekend, I decided to take matters into my own hands and customize my existing theme. After hours of frustration, the layout of my website started coming together. Eventually, I was even having fun, as I realized how much control I had over the layout and appearance of my website.
Looking back at my experience, I realized that some of my frustration stemmed from the fact that I didn’t really understand what Hugo was. Hugo’s own answer to What is Hugo states
In technical terms, Hugo takes a source directory of files and templates and uses these as input to create a complete website.
I’m sure this is technically true, but it didn’t really help me understand the conceptual purpose of Hugo. So in this article, I’m going to explain what Hugo is and does by cooking metaphor, inspired by Alison Hill’s A Spoonful of Hugo blog series.
Hugo is a master chef: it follows recipes to build gourmet websites, and helps you design and build a menu to showcase all your great content. I’ll breakdown two important components of websites, pages and lists, and explain using food metaphors how Hugo lets you define, modify, and expand the layout options.
Pages (and sandwiches)
A restaurant needs food and websites need content. With Hugo and Hugo Themes, you can focus on writing the content, while Chef Hugo makes the rest of the dish.
While the content is the most important part of the page, there are other pieces of information and iconography on a website. In general, there are 3 sections to a webpage. I’ve used an example from my own website below:
The body is your blog post. All the words, images, and code you want to share
with the world. It’s converted into what you see from your
The header and footer sandwich the body with other relevant information that is the same for all other posts. In my case, the header is the connection to the rest of my website, with links to my home, blog, and projects. The footer contains things that go at the end, like comments and additional links off-site.
Chef Hugo is responsible for combining these ingredients into an actual webpage:
The recipe Chef follows is found in the theme and is constructed with Hugo Templates. Once again, Yihui Xie has another good example in this snippet of code:
These 14 lines of code make up the hugo template hugo-xmin uses to create a webpage. Lines 1, 10, and 14 are where the real action happens. These lines tell Hugo to insert the body between the header and footer to complete the sandwich.
This template is the starting point for your page layout,
and you can modify it however you’d like! You can change how this template
combines the header and footer with page data like titles or dates, or you
can dive into a
to modify the header’s content or style!
It’s really fun with
blogdown::serve_site, since you can see your changes
happen almost in real-time.
Modifying your existing theme is a great way to learn about Hugo and web-design.
My own website theme
evolved from Yihui’s instructional theme.
Dinner is served
In truth, this article is just the appetizer. There’s a lot to learn about Hugo, but making simple changes to templates in existing themes is a great way to get started.
Credit goes to Yihui’s instructional Hugo Theme. The theme design is straighforward, and there are breadcrumbs throughout, guiding you through the technical details. And Hugo’s excellent documentation provides comprehensive coverage of all the functions and parameters, as well as many examples to learn from and tweak.