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

Posted by johtani on Wednesday, January 22, 2020

目次

起因

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

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

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

理由

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

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

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

結果

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

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

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

Hugoとは?

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

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

テーマとは?

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

それなりに更新されてますし、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 addjohtani.github.ioをサブモジュールにしました。

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

まとめ

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


comments powered by Disqus