Static web pages in Hugo

published on January 24, 2018.

Last week I created a page on this site that holds all the talks I have prepared for meetups and conferences. As this site is powered by Hugo, the process wasn’t that straightforward. I want to write down the steps I did to make it easier in the future.

Oh, and when I say “static” in the title of this post, I mean pages whose content is not completely powered by a markdown content file.

I have tried different approaches, but what ended up working is the following.

In the configuration file, I added a new type of permalink:

config.toml

[permalinks]
    talks = "/talks/"

I created a new type of an archetype under the archetypes directory of my theme:

themes/robertbasic.com/archetypes/talks.md

+++
draft = false
date = {{ .Date }}
title = "{{ replace .TranslationBaseName "-" " " | title }}"
+++

I have also created a new template file for that talks type, which actually has all the content I want to display, but is also capable of using the partials I have created before:

themes/robertbasic.com/layouts/static/list.html

{{ partial "header.html" . }}
...
<div class="post">
    <h1>
        Talks
    </h1>
    ...
</div>
<div class="column">
    {{ partial "sidebar.html" . }}
</div>
...
{{ partial "footer.html" . }}

And finally create a markdown file for it with hugo new talks/page.md, leaving it as is.

Happy hackin’!

Tags: hugo, blog, talks.
Categories: Blablabla, Software.

Thanks for reading! If you require help on a project of any kind, let's talk!

Robert Basic

Robert Basic

Software engineer, consultant, open source contributor.

Let's work together!

If you require outsourcing or consulting help on your projects, I'm available!

Robert Basic © 2008 — 2018
Get the feed