概要

このサイトは静的サイトジェネレータのHugoで作成しています。Hugo自体の話や静的サイトのメリット云々などは、様々なサイトで詳細に解説されていますのでここでは割愛。

Hugoでは、公開されているテーマを用いることで、自分の好みに合わせたサイトを作成できます。このサイトでは「Robust」というテーマを利用させていただいております。スッキリとした見た目でサイトを構築できる、人気のテーマです。

このテーマを基本にしつつサイトをカスタマイズすることになるのですが、いくつか試行錯誤した箇所もありましたので、備忘録も兼ねてカスタマイズポイントを列挙しておきます。細かいことは書ききれないので、主な部分だけですが。

なお、あくまで自分用のメモですので、ご承知おきの上ご覧ください。あと、変更前にはバックアップを必ず保存しておきましょう。

サイト全般

サイト上部のタイトルを画像に変更

デフォルトではサイト上部にはサイト名（.Site.Title）が表示されます。これをロゴ画像へ変更します。baseof.htmlを変更。

<div class="logo">
  <a href="{{ .Site.BaseURL }}"><image src="{{ $.Site.BaseURL }}images/logo.png" class="logoimg"></a>
</div>

画像はstatic/images/logo.pngとして保存しておきます。また、画像スタイルをlogoimgにて指定しています。画面の幅に合わせた縮小とか。

faviconを設定

サイト画像アイコンであるfaviconを設定。faviconの説明や作成方法は割愛します。

作成したfavicon（アイコン）はstatic/images/favicon.icoに配置し、meta.htmlに下記コードを追加します。

<link rel="shortcut icon" href="/images/favicon.ico" />

トップページ

記事サムネイルの投稿区分を非表示

記事をcontent/post配下に作成していると、POST区分で作成されていることが作成日時の横に表示されます。特に不要なので非表示にします。

li.html / li_sm.htmlの下記１行を削除。

{{ with .Section }}<li><i class="fa fa-bookmark" aria-hidden="true"></i>{{ . | upper }}</li>{{ end }}

記事一覧から固定ページを非表示

記事ページをcontent/post、固定ページをcontent/pageなどで作成しているのですが、トップページの記事一覧に固定ページを表示させたくないので、記事ページ以外を非表示にします。

list.htmlを以下のように編集。

<div class="articles">
  <div class="mrow">
    {{ $paginator := .Paginate (where .Data.Pages "Type" "post") }}
    {{ range $paginator.Pages }}
    <div class="mcol c6">{{ .Render "li" }}</div>
    {{ end }}
  </div>
</div>

詳細は割愛しますが、Pagination機能を使って記事一覧を作成しています。.Data.Pagesに記事一覧データが格納されており、そこからTypeがpost（記事ページ）のみを対象とするようフィルタリングしています。

なお、Paginateでは一定件数ごとにページを区切ってくれますが、区切るデフォルト値は１０件です。上記コードでは省略されているので注意。明記しておいた方が分かりやすいかもしれません。……すっかり忘れた頃に、１ページあたり１０記事を表示するって設定どこだっけ……と少し探してしまいました。

サイドバー

Latestの記事数を変更

デフォルトではLatestに表示される記事数は１０件です。多い気がするので５件に減らしました。また、記事ページのみを対象とするよう変更します。

latest.htmlを下記のように編集。

<div class="articles sm">
  {{ range $i, $p := (first 5 (where .Site.RegularPages "Type" "post")) }}
  {{ .Render "li_sm" }}
  {{ end }}
</div>

first 5の部分で表示する件数を指定しています。また、whereで記事ページのみを対象とするフィルタリングをしています。

その他

Google登録関係

Google Search Consoleのサイト所有者確認ファイルや、Google AdSense等で推奨されているads.txtについては、Webサイトのルートに配置します。

staticフォルダ直下に上記ファイルを配置しておくことで、hugo.exeでのビルド時にpublicフォルダ配下にコピーされます。あとはpublicフォルダ配下ごとサイトのルートへ配置すればOKです。