ブログ移行日記(その1) - Hugoとテーマ | @johtaniの日記 3rd

起因

いつものツイートから始まる私の行動です。

(もしかしたら前に一度おすすめしたかもですが) Goのtemplate構文に拒絶反応がなければHugo割と良いですよ〜。
— Nobuyuki Kubota (@nobu_k) October 10, 2019

ってことで、Hugo勧められたし、テーマが豊富だしということで、乗り換えた次第です。

(元)同僚に教えてもらった記事を見てる。Gatsbyも気になるんだけど、デザインセンスないし、テーマが豊富なのがいいなぁ。/ Comparison of Gatsby vs Jekyll vs Hugo | GatsbyJS - https://t.co/yUbKiBmtMS
— Jun Ohtani (@johtani) January 9, 2020

一応Gatsbyのサイトにあった比較も見たのですが、テーマの豊富さが勝ちました。デザインを自分でやれるほどではないので。

理由

乗り換えるに至ったのは主に2つの理由です。

Octopressが更新されていない
ページが増えてきてサイトの生成に時間がかかる

前に使っていたOctopressもJekyllというものがベースになっていました。 Jekyllは今でも更新があるのですが、Octopressが更新されなくなってしまったのと、Rubyがベースになっているため?なのかはわかりませんが、ブログのページ数が増えてきて、サイトのビルドに時間がかかってくるようになりました。

結果

まだ、改良点があるかもですが、とりあえず公開できる感じになったと思ったんで切り替えました。

前のブログはこんな感じで、

移行後はこんな感じです。

Hugoとは?

公式サイト

こちらにあるように、Go言語で実装されているウェブサイト構築フレームワークです。 Go言語で実装されているのもあり、インストールが簡単でした。 Macを使っていますが、Homebrewでインストールができてしまいます。他の方法もあるようでしたが、Emacsをインストールするのにbrewを入れているので、brewでインストールしました。

使い方は色んな人が書いてるし、公式ドキュメントを見ていただけばいいかな。

テーマとは?

Hugoのサイトにテーマの一覧があります。一応、個人のブログなので、それなりにデザインを入れつつ、他の人と違う感じにしたいなと。テーマ一覧をざっと眺めて良さそうなのをピックアップしたら、最終的にこちらのテーマになりました。

Clean White

それなりに更新されてますし、DisqusとSearch(Algolia)が使えるのでこのテーマに決めました。テーマのインストール方法などはGitHubのREADMEの「Quick Start」に記載があります。

私は、Hugo自体の設定などをGitHubで管理したかったので、git submoduleを利用して、次のような構成になりました。

hugo - main repository
├── archetypes
├── content
├── data
├── layouts
├── public - github.com/johtani/johtani.github.io
├── resources
├── static
└── themes
    └── hugo-theme-cleanwhite - github.com/zhaohuabing/hugo-theme-cleanwhite.git

hugo : hugo new siteコマンドで作成されたディレクトリです。このディレクトリでまずgit initしました(このリポジトリはプライベートで管理してます)。
themes/hugo-theme-cleanwhite : テーマのQuick Startにあるgit submodule addコマンドでサブモジュールとしてテーマをインストールしました。
public : hugoが生成するHTMLのトップのディレクトリがこちらです。私はGitHub pagesを利用してブログを公開しているので、git submodule addでjohtani.github.ioをサブモジュールにしました。

Hugoで生成したHTMLなどをGitHub pagesで公開するときの手順などはHugoのドキュメントに記載がありました。

まとめ

Hugoに移行した理由や、Hugoとテーマの簡単な紹介でした。テーマが豊富なのはデザイン力(りょく)がない身としてはありがたいですよね。次はOctopressのmarkdownファイルをHugo用に変換したり、それに関する設定周りの話を書く予定です。

ブログ移行日記(その1) - Hugoとテーマ

目次

起因

理由

結果

Hugoとは?

テーマとは?

まとめ

See Also by Hugo

Related by prelims-cli

FEATURED TAGS