Webサイトを静的サイトにしました : hugo による静的サイトの作成 (1/3)

個人事業主としての森ソフトのサイトは、さくらインターネットのレンタルサーバー上で Joomla! を使って動かしていました。当初は、ブログ代わりの技術メモとしていろんなものを載せるために使っていました。ちなみに、Wordpressを選ばなかったのは、当時のさくらのレンサバのDBのバージョンがWordpressのサポート対象外だったためなのと、知り合いがJoomla!使っていたのが理由でした。

ちなみに、あれこれやってた時の記事がまだ残ってました (^^; 思い出にリンク張っときます。

でも、一昨年から技術メモの部分はブログとして、はてなブログに移行したので、そんなに大そうな頻度で更新することもなくなりました。となってくると気になってくるのがサーバー代です（サイト分だけでなくバックアップサーバーも立ち上げているので２台の料金がかかっています）。

昨今、あれこれ見てると静的サイトホスティングでサイトを公開するというのが流行っているようです。先祖返りな気もしますが、gitなどと連携できればそんなに悪くないかな？という印象です。ということで、今回思い切って、自分のサイトを静的サイトホスティングに切り替えてみましたので、備忘録としてメモっときます。

ツールの選定

静的サイト作成に使えるツールですが、調べ始めたら、山のようにあって困りました。例えば、下記サイトなどでは、どのようなツールがあるのか、いろいろとガイドしてくれていますが、数が多すぎてる正直よくわかりません。

上記以外にもあれこれと比較記事を探して読んでみたのですが、なかなかこれだ！という風には見つかりませんでした。

まあ、その中でも、 hugo が静的サイトのビルドが早いということで、どうも良さそうです。

これ以上は、実際に試したほうが早そうだということで、今回は hugo を使うことにしました。

全体の構成

ツールの選定と合わせてあれこれ調べると、静的サイトのホスティングをやってくれるサービスもあることが分かりました。そんなのを受けて、今回は次のような構成で作業を行いました。

ホスティング : Netlify (当然、無料プランです）
gitリポジトリ : Bitbucket
静的サイトジェネレータ : Hugo, 0.32.2
開発環境 : Windows 10 build 1709 上 Bash on Ubuntu On Windows (16.04.3 LTS相当)
移行元 : Joomla! 3.6.5

hugo のインストール

まずは hugo のインストールから始めます。 Bash on Ubuntu on Windows 上から

sudo apt-get install hugo

とするだけでインストールできました。が、しかし、これだとバージョンが 0.15 相当になり、ちょっと古めです（この記事を書いている時点で 0.32.2）。なので、

wget https://github.com/gohugoio/hugo/releases/download/v0.32.2/hugo_0.32.2_Linux-64bit.deb
sudo dpkg -i hugo_0.32.2_Linux-64bit.deb

として作業時の最新版をインストールしました。

なお、バイナリ（パッケージ版はバイナリです）を使う場合は、GOの開発環境は不要だそうです。

（参考）下記のインストール手順を参考にしました

hawksnowlog: Ubuntu 16.04 で hugo を試してみた

hugo の試用

インストールが成功したら、さっそく hugo のサイトにあるQuick Start を試してみます。

Quick Start | Hugo

一通り作業をしてみると、問題なくローカルサイトでサイトを見ることができました。

移行するコンテンツの選定

さて、既存サイトのコンテンツを移動する前に改めてコンテンツを確認してみました。技術メモ部分はなくなっているのでよいとして、それ以外でも内容が結構古くなっているものが多々あります。こういう古いものも含めて移行するかは、ちょっと悩ましいところです。いろいろ考えたのですが、次の理由からとりあえず現時点では移行しないことにしました。

今更、内容的に更新するつもりがない
自分自身でも参考にすることがすくない（というかここ数年、見てもいなかった）
既存サイトは非公開にするけど、削除はしない（プライベートでは閲覧可能にしておく）

もし、必要がありそう or 需要がありそうなら、追って追加することにします。

そうなると、移行するべきコンテンツは自分自身の紹介など、ごく最小限のものとなり、わざわざ移行ツールなどを使わなくても簡単にできそうです。

（参考）

今回は使いませんでしたが、もし、Joomla! のコンテンツが山ほどあり、手作業で移行するのが大変そうな場合は、Joomla! -> hugo の移行をサポートしてくれるツールがあります。

Migrate to Hugo | Hugo

一度試してみるといいかもしれません。

hugo でのサイト構築

ということで、サイトに載せるコンテンツとしては、一から作り直すことにします。

ただ、Webサイトですので、デザインまで自分で作るのは厳しいものがあります。ということで、デザインに関しては、既存のhugoのテーマを選んで、それをベースに載せるべき内容を作り、必要があれば見た目もカスタマイズする方法を取ります。

hugoのテーマは、

Complete List | Hugo Themes

ここから選べます。タグがあるので、それを手掛かりにしてみていきます。あと、多くのテーマには、デモサイトへのリンクもあるので、それで実際に動作を確認しながら選びます。今回は、 universal というテーマを選びました。

themes.gohugo.io

まずはサイトを作ります（サイト名は mor としてます）。

mor@DESKTOP-RLA4CF1:~/tmp$ hugo new site mor

テーマを適用

universal テーマのサイトの説明に従って、

mor@DESKTOP-RLA4CF1:~/tmp/mor$ cd themes/
mor@DESKTOP-RLA4CF1:~/tmp/mor/themes$
mor@DESKTOP-RLA4CF1:~/tmp/mor/themes$ git clone https://github.com/devcows/hugo-universal-theme
mor@DESKTOP-RLA4CF1:~/tmp/mor/themes$
mor@DESKTOP-RLA4CF1:~/tmp/mor/themes$ cd hugo-universal-theme/exampleSite/
mor@DESKTOP-RLA4CF1:~/tmp/mor/themes/hugo-universal-theme/exampleSite$
mor@DESKTOP-RLA4CF1:~/tmp/mor/themes/hugo-universal-theme/exampleSite$ cp config.toml ../../../config.toml

とします。このまま、hugo server で確認するとエラーがでたので、何点か修正します。

config.toml の themesDir が設定されていますが、これがうまく動いていませんので、コメントアウトしておきます
carousel（カルーセル、サイトのトップとかで画像が複数スライドしていくやつ）, Features, Testimonials（いわゆるお客様の声かな？）, Clients は data ディレクトリ以下に所定のyamlファイルが一つもないとエラーになります。なので、それぞれ config.toml の params.carousel, params.features, params.testimonials, params.client の enable を false にしておきます。

修正が終わったら、ローカルサーバーを起動します。

mor@DESKTOP-RLA4CF1:~/tmp/mor$ hugo server -D

これで一応表示されました。

カスタマイズ

ここからカスタマイズです。だいたい次の順にカスタマイズしました。

このテーマの内容に沿って、 config.toml を変更します
先ほどの carousel, features, testimonials, client については必要に応じてyamlファイルを作成します（必要のないところは enabled = false のままです）
サイトのディレクトリ直下に i18n ディレクトリを作り、 cp themes/hugo-universal-theme/i18n/en.yaml i18n/ja.yaml として、必要に応じて日本語訳を入れておきます

この辺の変更方法は universal のテーマのページに載っています。

テンプレートの修正

次に、表示している各部分の細かいところでデザインを変更したい箇所を修正します。

サイトの作成にあたって、最初にテーマを使うところから始めましたが、hugo に関する記事などを読むと、サイトのディレクトリ（ここでは ~/tmp/mor）以下にある layouts 以下のファイルがテンプレートとして表示を制御しているようです。で、テーマはそれをまとめて配布可能にしたもので、 themes ディレクトリに配置されるものになります。

両者は共通の構造をとっていて、サイトのディレクトリ以下にある layouts が優先されます（テーマから見ると、オーバーライドすることができます）。

この構成がわかれば、あとは、自分が修正したい箇所がどこにあるかを調べて、その html ファイルをサイトのディレクトリ/layouts にコピーして、変更を行います。

例えば、サイトで表示されるトップページのレイアウトを変更するのであれば、

mor@DESKTOP-RLA4CF1:~/tmp/mor$ cp themes/hugo-universal-theme/layouts/index.html layouts/index.html

として、サイトディレクトリ/layouts/index.html に記載されている各パーツの表示順などを見直します。

一覧ページのタイトル

univesal テーマの場合『ブログ』を選択すると、ブログの一覧が表示されるようになっています。この時、デフォルトのままだと、ブログ記事が入れてある contents/blog のディレクトリ名をセクション名として扱い、このセクション名が表示されます。ついでに書いておくと、英文の場合、セクション名が自動的に複数形で表示されるとのことです。

この表示を変更したかったので、 contents/blog の下に _index.md を追加して、そこに title を設定することで、自分でタイトルを決めることができるようになります。

詳しくは hugo の該当ドキュメントを見てください。

記事を入れるフォルダ名の変更

ちなみに、記事に入れるフォルダ名を contents/blog から contents/news に変更しています。残念ながら、これは config.toml では変更できませんでした。

参考までにこれを行った方法を書いておきます。

mor@DESKTOP-RLA4CF1:~/tmp/mor/themes/hugo-universal-theme/layouts$ grep -r -i -n blog ./*
./_default/list.html:23:                    <div class="col-md-9" id="blog-listing-medium">
./_default/list.html:25:                        {{ $paginator := .Paginate (where .Data.Pages "Type" "blog") }}
./_default/single.html:25:                    <div class="col-md-9" id="blog-post">
./_default/single.html:40:                    <!-- /#blog-post -->
./partials/footer.html:21:            <div class="blog-entries">
./partials/footer.html:22:                {{ range first 3 (where .Site.Pages "Type" "blog") }}
./partials/recent_posts.html:15:            <!-- *** BLOG HOMEPAGE *** -->
./partials/recent_posts.html:19:                {{ $posts := .Paginate (where .Data.Pages "Type" "blog") }}
./partials/recent_posts.html:22:                    <div class="box-image-text blog">
./partials/recent_posts.html:61:            <!-- *** BLOG HOMEPAGE END *** -->
mor@DESKTOP-RLA4CF1:~/tmp/mor/themes/hugo-universal-theme/layouts$

としてテーマを調べると、Paginate 関数の引数に blog というセクション名がハードコードされています。なので、これを news に変更しました。具体的には _default/list.html, partials/footer.html, partials/recent_post.html になります。

ご参考までに。

robots.txt

あと、表示だけでなく robots.txt も正しく生成されるようにしておきます（ここなどを参照）。config.toml に

enableRobotsTXT = true

を追加します。デフォルトの robots.txt から変更したい場合は、 layouts にひな型になる robots.txt を置いておきます。こんな感じです。

mor@DESKTOP-RLA4CF1:~/tmp/mor/layouts$ cat robots.txt

User-agent: *

Sitemap: {{ .Site.BaseURL }}sitemap.xml

sitemap.xml は何もしなくても生成してくれるようです。

細かいところはよくわかっていませんが、こんな感じで進めると、とりあえずカスタマイズもある程度できました。

（参考） hugo テーマのカスタマイズについてはいろんな方が記事を書かれているので、そちらを参考にしてください

https://www-he.scphys.kyoto-u.ac.jp/member/shotakaha/dokuwiki/doku.php?id=toolbox:hugo:start

動作確認

カスタマイズが終わったら、動作確認をしておきます。とりあえずローカルサーバーで正しく表示されれば、OKです。

次は、 netlify を使ってホスティングします。

プログラマーのメモ書き

伊勢在住のプログラマーが気になることを気ままにメモったブログです