Enabling reverse order display of posts in Hugo for Book theme

In an earlier post, I mentioned an issue with rendering a website built with Hugo. In the build command, I had to specify the theme. Jack Baty pointed out the theme could also be added to a configuration file (config.toml) so as not to have to enter it each time at the command line.

My next problem was that I wanted the blog post part of the Book theme to display the posts in reverse chronological order. However, it was displaying my post in the middle of the example posts, and I could not figure out what was driving the order. Jack Baty suggested looking at the template file in /layouts/posts/list.html. I looked at that file in the Book theme directory, and started looking at the lists page on the Hugo documentation site. After some reading, I found an example that showed how to display content in reverse order based on the date specified within the file. I changed the third line in the file from:

{{ range sort .Paginator.Pages }}

to

{{ range .Pages.ByDate.Reverse }}

I also edited the Date field in the posts to all have the same format:

date: “2019-06-03”

Once I did that, I got the results i was looking for – hurray! It would have been nice if the theme had done this “out of the box”, but at least I figured it out.

 

Rendering a static site in Hugo

I am working on a project using the Hugo static site generator with the Book theme. When I looked at this command page, it looked like typing the word “hugo” at the base directory of my site would render the site to the public folder. However, when I did that, no index.html file was generated – grr! After some more searching, I figured out that if you are using a theme (like I am), the theme needs to be specified (“hugo -t book”). Once I added that flag, it worked! Oh, the joy….

Read: Introducing the Bootstrap Starter Kit

A great way to start using Bootstrap, another thing to add to my list of things to try…

In other words, Bootstrap helps you make hand-coded websites, without them looking hand-coded.

The problem is that many of the themes don’t come with everything you need! For a seasoned designer/developer, that’s not a problem. But for students like mine, it can be a big problem. So I built something to try and help.