静的サイトジェネレータをHugoから11tyに変更した
目次
今までの問題点
本サイトは、今まで「ブログを移転しました」でも触れた通り、静的サイトジェネレータとしてHugoを利用していた。 正確にはHugoのテーマの一つであるAcademicを使っていた。 プロフィールとして必要な情報を埋めると綺麗に表示してくれる上、ブログ機能も付いていてちょうど使いやすいテーマであった。
しかし、今回はこのAcademicテーマを引退し、自分でhtml書くことにした。
これは主に以下の2つの問題が原因であった。
1. カスタムが難しい
Academicテーマはその名の通り研究者向けのテーマであるため、トップページにはプロフィールを表示することが想定されている。
指定されたファイルを記入することによって自動で表示されるようになっており、少ない手間できれいなプロフィールページを作成することができる。
例えばExperienceやPublicationなどのファイルに指定の方法で記入すると、一切htmlを書かずにプロフィールページを作ることができる。
以下は経歴欄を設定する experience.md の一部の例である。
experience:
- title:
company: ○○大学○○○学科○○学部
company_url: https://www.xxxxxxxxxx.ac.jp/
company_logo:
location:
date_start: '20XX-04-01'
date_end: ''
description:
...
しかし、逆にhtmlの一部だけを書きかえることは難しい。 もちろんレイアウトファイルを書きかえることで実現可能ではあるが、どのファイルを書きかえればよいかを調べるのは学習コストが高く感じた。 今後少し書きかえたかい場合にも毎回レイアウトファイルをカスタムする必要がある。
htmlを書けるのであれば直接書いた方が効率的だと思い、自分でhtmlを書くことにした。
2. コンパイルが上手くいかない
どちらかというとこちらがメインの原因である。
Hugoはgo言語によって動いており、Academicテーマは go get によってインストールされている。
一方でHugoはaptなどのパッケージマネージャーでインストールする形式を取っており、これらのバージョンが整合しないという問題が発生した。
そのため手元のPCにおいて開発サーバーの起動やhtmlファイルの生成ができない状況になってしまった。
ウェブサイトはNetlifyのGithub連携によって自動ビルドしてホスティングしており、なぜかデプロイビルドは通っていた。 ローカルではサーバーが起動しなくてもリポジトリにpushすれば反映されるという状況が続いており、しばらくはそのように更新していた。
しかし、ローカルで確認できないというのは少し複雑な編集を行なうには不便であり、 またいつビルド環境が壊れてデプロイできなくなるかも分からず、不安であった。
そのため、今回の移行に踏みきった。
パッケージ選定
今回Hugoの依存関係によって苦労したため、今後はそのようなことが無いようにしたかった。
また本番サイトはJavaScriptを使わない、シンプルなhtmlにしたいとも思っていた。
これらを満たすものとして、今回はJavaScript製の軽量静的サイトフレームワーク、11tyを選択した。
11tyはただのhtmlテンプレートエンジンであり、JavaScriptなしのシンプルな静的サイトを作成するにはちょうどいいライブラリである。 また、11tyはNodeにしか依存せず、インストールも付属するnpmによって行えるため、インストールに関しても問題が発生しなさそうであった。
11tyの詳細に関しては他のブログ記事に任せることとする。(追記するは可能性あり)
ディレクトリ構造がそのままurlのパスとなる仕様は移行前と同じであったため、記事の移行は簡単であった。
テーマ等を使わずhtml・CSSも1から書いているため、現在はシンプルなCSSしか書いていないが、今後適宜デザインを変更していく予定である。
コメント
Github Issue と連動しています。