テーマを使わず、hugoでサイトを作る

調べた事などアウトプットしたいと思いブログを始めることにしました．

hugoを選んだのは，以前さわったことがあるのと，静的サイトジェネレータの中でも高速でストレスが少ないため．

最近は，jsの勢いがすごいので，Next.jsやGatsby，Nuxtあたりも候補になると思う．

手軽に始めるなら，このページに書いている内容よりも，無料のthemes(テーマ)を使った方が早いです．ただ，ちょっと手を加えようとすると以外と難しかったりする．

今回は，hugoを使って，小さなサイトを作ってみます．

記事ファイルの管理は，markdownです．

なお，hugoでサイトを作る方法はいろいろありますが，その中の1つです．公式のドキュメントが詳しいので，目を通しておくといいです．

環境

macOS catalina
hugo v0.74.3

hugoの環境構築

コマンドをインストールして，ひな型を作ります．

hugoインストール

macであれば、Homebrewで一発です。

brew install hugo

hugo version

その他の環境は、こちらのリンクを参考にして下さい．

ひな型を作る

hugo new site <site_name>

<site_name>のディレクトリができます．以下，myblogの場合

myblog/
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

この中で最低限必要なのは，以下の4つ．(簡単な説明)

config.toml (設定ファイル)
content/ (記事を入れるディレクトリ)
layouts/ (htmlファイルを入れるディレクトリ)
static/ (js, cssを入れるディレクトリ)

公式のディレクトリ構成

TOPページを表示する

layouts/index.htmlを作ります．普通のhtmlファイルです．

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>site title</title>
  </head>

  <body>
    <h1>Hello, World</h1>
  </body>
</html>

ファイルを作ったら，サーバーを起動します

hugo server

ブラウザでhttp://localhost:1313/を開いて，表示確認します．

「Hello, World」が表示されればOKです．

css, jsを扱う

static/に入れます．

例えば，static/assets/style.cssであれば，パスはstatic以下を指定します．

<link rel='stylesheet' href='/assets/style.css'>

設定ファイルconfig.toml

設定ファイルをご自身の環境に合せて編集します．

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"

languageCodeは，jaorja-jpのどっちでもいいようです．

index.htmlのtitleを以下のようにすると，タイトル部分が変わります．

<title>{{ .Title }}</title>

htmlファイルを分割

hugoのテンプレートファイルは，ファイル名などルールが決っているので，それに合せて作ります．

Hugo’s Lookup Order

全ページに共通部分 baseof

内容はほぼ，さきほど作ったindex.htmlですが，{{ block "main" . }}と{{ end }}部分が変っています．

baseof.htmlには，全ページに共通部分を書きます．

layouts/_default/baseof.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>{{ .Title }}</title>

    <link rel='stylesheet' href='/assets/style.css'>
  </head>

  <body>

      {{ block "main" . }}

      {{ end }}

  </body>
</html>

index.htmlでは，main部分を定義すると，baseof.htmlのmain blockで表示されます．

layouts/index.html

{{ define "main" }}

<h1>Hello World</h1>

{{ end }}

以降のファイルでも，ページごとにmain部分だけ定義すればいいです．

Base Template

partialに分割

baseof.htmlのように，ページを読み込む時にhugoが自動で読むファイルは，layouts/_default/におきます．

それ以外，複数のページで使用したり，分割するケースでは，layouts/partialsにおき，読み込みます．

試しにheadタグを別ファイルで管理してみます．(baseofのhead部分)

layouts/partials/head.html．

<head>
  <meta charset="utf-8">

  <title>{{ .Title }}</title>

  <link rel='stylesheet' href='/assets/style.css'>
</head>

baseofでは{{ partial "head" . }}で，partials/にあるhead.htmlファイルを読み込みます．

layouts/_default/baseof.html

<!DOCTYPE html>
<html>

  {{ partial "head" . }}

  <body>

      {{ block "main" . }}

      {{ end }}

  </body>
</html>

今回のケースでは，メリットを感じられませんが，まともなサイトを作るときはpartialは結構使うと思います．

記事ページを表示

記事ページのテンプレートを作る

記事ページを管理するために，layouts/_default/single.htmlを作ります．

index.htmlと同じように，mainを定義します．

articleタグの中は，記事のコンテンツ(markdown)を表示します．

{{ define "main" }}

<article>
  {{ .Content }}
</article>

{{ end }}

markdownを作る

hugoのコマンドで，markdownファイルを作るとFront Matterも作成してくれます．

hugo new posts/ファイル名.mdとすると，content/posts/ファイル名.mdができる

---で囲まれた部分がFront Matterで，タイトルや日付などを管理します．

デフォルトでは，draft: trueになっていますが，このままだと表示されません． falseにするか，削除します．

Front Matterについて

あとは，markdownで記事を書けば，htmlに変換してレンダリングしてくれます．

例：sample.md

---
title: "Sample"
date: 2020-09-09T17:09:46+09:00
draft: false
---

# hugoでサイトを作る

go知らなくても作れるよ。

## ビルド早いよ

数十記事なら、たいして変らない

数千記事書いたら、ありがたみがを感じると思う

記事の一覧を表示

index.htmlに最新記事を10ページ表示

{{ define "main" }}

<h1>記事一覧</h1>

{{ range first 10 .Site.RegularPages.ByDate.Reverse }}
<a href={{ .Permalink }}>{{ .Name }}</a>
{{ end }}

{{ end }}

Site Variables

こんな感じで作って，hugo serverで確認