Hugo - Archive

   
   
 hugo  
 ssg  
Article Series

This article series contain few sections.

Related Article Series

Download Tutorial Source.

Where to Discuss?

Local Group

Table of Content

Preface

Goal: Create blog archive, a site wide content list for all posts.

Source Code

You can download the source code of this article here.

Related Article

I also wrote about Hugo Bootstrap Archive. Step by step article, that you can read here:

Again I rewrite this article. A slight modification for Bulma.

1: Archive Page by Group

We can make a page dedicated for archiving all posts. I always have this page, to show a shortcut to all article links.

Prepare All Artefacts

$ mkdir themes/tutor-04/layouts/archives
$ touch themes/tutor-04/layouts/archives/single.html

$ mkdir content/pages
$ touch content/pages/archives.md

Content: Single

Just an empty fronmatter without the need of any content.

+++
type  = "archives"
title = "Archives by Date"
+++

Layout: Single

{{ define "main" }}
<main role="main" 
      class="column is-full box-deco has-background-white">
  <section class="section">
    <h4 class="title is-4">{{ .Title | default .Site.Title }}</h4>
  
    {{ .Content }}
  </section>

  {{ $posts := where .Site.Pages "Type" "post" }}

  {{ range ($posts.GroupByDate "2006") }}
    <section class="section" id="archive">
      {{ partial "summary/by-month.html" . }}
    </section>
  {{ end }}
</main>
{{ end }}

Partial: Summary

Already discussed in previous article.

Server Output: Browser

And see the result

Hugo: Archive by Group

The different of this page and the taxonomy page is: the list filtered for specific page kind named post.

2: Chronogical Archive List

And you can also have page list with chronological order. Later we will combine this with nice pagination.

Prepare All Artefacts

$ touch themes/tutor-04/layouts/archives/list.html
$ touch themes/tutor-04/layouts/partials/summary-blog-list.html
$ touch content/pages/_index.md

Content: List

Also no content required. Frontmatter is sufficient.

+++
type  = "archives"
title = "Blog List"
+++

The Loop

The range is as this loop below.

  {{ range where .Site.Pages "Type" "post" }}
    ...
  {{ end }}

There is no need for nested loop. But we need to put the details to partials to reduce complexity.

Layout: List

{{ define "main" }}
<main role="main" 
      class="column is-full box-deco has-background-white">
  <section class="section">
    <h4 class="title is-4">{{ .Section }}</h4>
  
    {{ .Content }}
  </section>

  {{ $posts := where .Site.Pages "Type" "post" }}

  <div class="post-list">
  {{ range $posts }}
    <section class="section" id="archive">
      {{ partial "summary/blog-list.html" . }}
    </section>
  {{ end }}
  </div>

</main>
{{ end }}

Partial: Summary

Where the summary layout template is similar as code below:

    <div class="meta-item blog-item">

      <strong><a class="meta_link" 
        href="{{ .Permalink }}">{{ .Title }}
      </strong></a>

      <div class="meta">
        <div class="meta_time is-pulled-left">
          <i class="fa fa-calendar"></i>
          <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">
          {{ .Date.Format "Jan 2, 2006" }}</time>
        </div>      
        <div class="is-pulled-right" id="meta_tags">
          {{ range .Params.tags }}
            <a href="{{ printf "tags/%s" . | absURL }}">
              <span class="tag is-dark"><span class="fa fa-tag"></span>{{ . }}</span></a>
          {{ end }}
        </div>
      </div> 

      <div class="is-clearfix"></div>
      
      <div>
        {{ if .Params.Excerpt -}}
          {{ .Params.Excerpt }}
        {{- else -}}
          {{ .Summary }}
        {{- end }}
      </div>

      <div class="read-more is-light">
        <a href="{{ .Permalink }}" 
           class="button is-dark is-small">Read More&nbsp;</a>
      </div>

    </div>

I’m using bulma with FontAwesome to have pretty tag icons.

Server Output: Browser

Consider see the result as usual.

Hugo: Chronological Blog Archive

3: Real World Navigation

Now that our archives layout and taxonomy pages has complete, Consider change the header.

Hugo: Wide Navigation

<nav role="navigation" aria-label="main navigation"
     class="navbar is-fixed-top is-white maxwidth header-deco"
     id="navbar-vue-app">
  <div class="navbar-brand">
    <a class="navbar-item" href="{{ .Site.BaseURL }}">
       <img src="{{ "images/logo-gear.png" | absURL }}"
           alt="Home" />
    </a>
    <a class="navbar-item" href="{{ "pages" | absURL }}">
      Blog
    </a>
    
    <a role="button" class="navbar-burger burger" 
       aria-label="menu" aria-expanded="false" data-target="navbarBulma"
       @click="isOpen = !isOpen" v-bind:class="{'is-active': isOpen}">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div id="navbarBulma" class="navbar-menu"
       v-bind:class="{'is-active': isOpen}">
    <div class="navbar-start">
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">
          Archives
        </a>

        <div class="navbar-dropdown">
          <a class="navbar-item" href="{{ "tags" | absURL }}">
            By Tags
          </a>
          <a class="navbar-item" href="{{ "categories" | absURL }}">
            By Category
          </a>
          <hr class="navbar-divider">
          <a class="navbar-item" href="{{ "pages/archives" | absURL }}">
            By Date
          </a>
        </div>
      </div>

      <a class="navbar-item">
        About
      </a>
    </div>

    <div class="navbar-end">
      <form class="is-marginless" action="/pages/search/" method="get">
        <div class="navbar-item">
          <input class="" type="text" name="q"
            placeholder="Search..." aria-label="Search">
          &nbsp;
          <button class="button is-light" 
            type="submit">Search</button>
        </div>
      </form>
    </div>

  </div>
</nav>

Server Output: Browser

Now you can see a usable navigation bar in your smartphone.

Hugo: Small Navigation

We will add nice pagination later.

What is Next ?

There are, some interesting topic about Hugo Custom Content Type. Consider continue reading [ Hugo - Custom Content Type ].

Thank you for reading.