Hugoでブログ記事一覧ページ（ブログアーカイブページ）を作成する

以前、ブログメンタリングを受講していたときの課題でもあった「アーカイブページ」を作った時のメモです。 ようやく、ブログ記事一覧の機能を実装できました。

/blog/archives/

実装方法

Hugoでのアーカイブページの作り方を調べてみると、大きく分けて次の2つがありました。

  • a) Taxonomyでコンテンツごとに年・月の情報を付加する
    • /2020/, /2020-12/のように年ごと、月ごとのアーカイブページを自動生成できる
  • b) Archive用のテンプレートと、Archiveページのコンテンツを作成する

a)の方式だと各コンテンツのFront Matterに情報を付加しないといけないため、まずは簡単にできそうなb)の方法で実装しました。

layouts/_default/archive.html

{{ define "main" }}
<article class="mx-4 sm:mx-12">
  <section class="">
    <div class="">
      <h2 class="font-bold text-xl">Blog Archives</h2>
      {{ $type := "blog" }}
      {{ $isGroupKey := true}}

      {{ range (.Site.RegularPages.GroupByDate "2006") }}

      {{ $count := (len .Pages) }}
      {{ if (gt .Key 2000) }}

      {{ range (where .Pages "Type" $type) }}
      {{ if $isGroupKey }}
      <h1 class="font-bold mt-2">{{ .Date.Format "2006" }}年 ({{ $count }})</h1>
      {{ $isGroupKey = false}}
      {{ end }}
      {{ end }}

      {{ $isGroupKey = true}}

      <ul class="">
        {{ range (where .Pages "Type" $type) }}
        <li>
          <a class="" href="{{ .RelPermalink }}">
            <span class="">{{ .Date.Format "01/02" }}</span> — {{ .Title }}
          </a>
        </li>
        {{ end }}
      </ul>

      <br>

      {{ end }}
      {{ end }}
    </div>
  </section>
  <section>
    <div class="mt-8">
      {{- partial "share.html" . -}}
    </div>
  </section>
</article>
{{ end }}

content/blog/archives/index.md

---
title: "Blog Archive"
layout: archive
slug: archives
---

.Site.RegularPages.GroupByDate "2006"で年ごとにグルーピングされたリストを取得できます。

if (gt .Key 2000)としているのは、このcontent/blog/archives/index.md自体がアーカイブページへ表示されないようにするためです。 （index.mdではコンテンツの日付を指定していないため、0年として表示される）

参考ページ

Hugoで始める静的サイト構築入門　静的サイトジェネレーターで作る自作サイト (技術の泉シリーズ（NextPublishing）)
Hugoで始める静的サイト構築入門　静的サイトジェネレーターで作る自作サイト (技術の泉シリーズ（NextPublishing）)
インプレスR&D
AmazonKindle楽天市場Yahoo!ショッピング

合わせて読みたい

Links in this post

Blog Archive
2015-11-23
小さな習慣・アウトプット駆動生活〜ブログメンタリングのふりかえり〜
2019/12月〜2020/2月の期間で @kakakakakku さんのブログメンタリングを受けて、「ブログを毎週1記事必ず書く」という目標にチャレンジしました。結果としては、 @kakakakakku さんのサポートもあり3か月間毎週1記事以上書くことができ、目標を達成しました。 同じ期間でTableauの「DATA Saber認定制度」も同時並行で進めていたので、図らずとも「学んだことをブログに書く」という相乗効果を得ることができました。 「DATA Saber認定制度」のふりかえり ブログメンタリングの志望動機、流れ、成果、学んだことをふりかえります。 目次 ブログメンタリングとは ブログメンタリングの志望動機 ブログメンタリングの流れ ブログメンタリングの成果 定量的評価 定性的評価 ブログメンタリングを通じて学んだこと 1. 平日記事を公開することの大切さ 2. Hugoテンプレートデザインの作り込みの甘さ 3. 書評記事の書き方 4. イベント参加レポートのタイトルやTwitterでの投稿内容 5. 結論「書ける」 まとめ
2020-03-31

Backlinks

静的サイトジェネレータHugo
Hugo入門 静的サイトジェネレータ「Hugo」でシンプルブログサイトを構築する 静的サイトジェネレータ「Hugo」インストール 静的サイトジェネレータ「Hugo」〜公開方法〜 サイト構築 Hugoのテーマでsubmoduleを使う方法 HugoでのシンタックスハイライトにPython Pygmentsが不要となった HugoのRelated Contentを利用して関連記事を表示する gulpで画像の最適化 Hugoソースコードリーディング〜Taxonomy〜 Render Hooks for Code Blocksを利用してコードブロックにファイル名を表示する Hugoでブログカードを作成する（resources.GetRemote利用） Templates 【Hugo】Partial Templateでは複数returnを記述する早期Returnを使えない 【Hugo】images.TextでOGP画像を生成する Shortcodes Hugo Shortcodesの作り方 HugoのShortcodesを利用してAmazon紹介リンクタグを作成 HugoでAMP対応のブログカードを作る AMP対応 AMP向けのミニマルCSSフレームワーク「1BX」をHugoに導入した AMPページの最適化〜ぼくのAMPサイトがこんなに遅い訳がない〜 AMP OptimizerによるAMPのさらなる最適化 AMP Service WorkerでPrefetch Linksを実現する Data Driven Content Hugoで人気記事を表示するためJSONを返すAPIサーバを作りData-driven Contentを試してみた Tailwind CSS HugoでTailwindCSSを利用しAMP Validなページを生成する ビルド npm-run-allでローカルAPI serverとHugo serverを同時に実行する GitHub Actionsのスケジューラ実行を利用して定期的にビルドする Circle CIでHugoのビルド・デプロイを実行する コンテンツ作成 Git pre-commitフックでFrontmatterの「更新日時」を自動更新する Hugoでブログ記事一覧ページ（ブログアーカイブページ）を作成する 移行 はてなダイアリーからはてなブログ経由で独自ドメインのブログに記事を移行しました JekyllからHugoへの移行ポイント Hugoで生成した静的サイトのホスト先をさくらVPSからNetlifyに変更する 書籍
2017-12-31