The Hugo Index Page

Or, how to get my site to look like the example

 Posted on August 17, 2017  |  3 minutes  |  Joshua Sheppard
#hugo  #beautifulhugo 

In a previous post I talked about my experience setting up a Hugo site. Since then I have been exploring various additional Hugo-related threads including this one - configuring the main page (a.k.a. Hugo homepage).

The First Problem: Where are My Posts?

When I looked at the main page of the Beautiful Hugo Example Site, I saw the title, the subtitle, optional front page content, and a list of posts down the middle of the page.

When I looked at my initial home page, I saw a title, subtitle, and nothing else. I didn’t have the optional front page content because I didn’t implement the /content/_index.md file - but I believed it would show up if I followed those instructions (and I just tried it to be sure).

The part that really confused me was the lack of a list of posts.

Digging Into Templates and Layouts

In order to understand what was going on on the main page, I started looking into how Hugo handles templates and in particular, the lookup order.

As I was reading through that, I noticed there was something called a Homepage Template. That sounded promising so I dug further into what my theme was providing and why that didn’t seem to be showing the list of pages.

What I found was that I needed to create layouts/index.html and copy from what I was seeing in the theme’s version of the page in themes/beautifulhugo/layouts/index.html. Doing this not only got it working - still not sure why it wasn’t picking it up from the theme before

  • but also allowed me to customize what I wanted to show and how.

Which led me to the next problem…

Since the way I had decided to use the content specific to the home page was to introduce myself, I thought that I really should be displaying the social links from the footer here as well. I spent quite a while trying a few different things including partial templates but I kept getting stuck with how to get access to the .Site variable near where I was including the _index.md content.

My Social Solution

After some help from a dumpdot.html example I eventually figured out that I needed to get outside the scope of the {{ with .Content }} block.

So instead of using:

1
2
3
4
5
6

{{ with .Content }}
  <div class="well">
    {{.}}
    {{ partial "social-links.html" . }}
  </div>
{{ end }}

I used:

1
2
3
4
5
6

<div class="well">
  {{ with .Content }}
    {{.}}
  {{ end }}
  {{ partial "social-links.html" . }}
</div>

And inside of layouts/partials/social-links.html I made a copy of the part of the themes/beautifulhugo/layouts/partials/footer.html that I wanted to include.

I had an urge to refactor the footer.html to reference this new partial too, but held off since I wanted to both write this up - to help me remember how I addressed this problem - and leave time to look into some other challenges with customizing Hugo (like better summaries.

For some reason, I was still struggling to get the link colors for the social icons to be the same as in the footer rather than like other links. After trying a number of other ways (e.g. wrapping the content of partials/social-links.html with a <footer> element) I punted and set style="color: #404040;" on the <a> elements in that partial.

It worked, but feels very much a hack. I don’t want to inline CSS but I haven’t gone far enough down the rabbit hole of customizing Hugo themes to learn how to add another CSS declaration in a way that feels in sync with the coding practices of Hugo.

hugo  beautifulhugo