HugoとAcademicテーマを使った自サイトの運営

目次

はじめに -ページ開設の目的-

はじめまして、ytmtと申します。 このページは

• 自身のポートフォリオを兼ねたページが欲しかった
• 雑記ベースの技術ブログが書きたかった
• 各種プログラムのノウハウページを作りたかった
  • Unity
  • Jenkins
  • Rust
• 英語の勉強(なるべく英訳付きで公開してます)

という目的を達成するために開設されました。 現時点ではまだまだコンテンツは少ないですが少しずつ自分のペースで更新を進めていきます。 温かい目で見守っていただければと思います。

この記事では、ページ開設にあたり使用する技術やサービスをどういう方針で決めたかを テスト投稿を兼ねて書いていきます。

ページ開設にあたっての要件定義・技術選定

採用した技術・サービス

まずは本ページで採用した技術・サービスのご紹介をば。このページは

• Hugo :　Go製の静的サイトジェネレーター。
• Academic : Hugoのテーマの一つ。ドキュメントが充実しデザインが良い。GitHub上のスター数も多い
• Netlify : Hugoで作成したWebサイトのデプロイ先。Hugo(Academic)が推してたのでそのまま採用。

という構成で作られています。

技術選定基準

少なくとも自分が今後世間に公開する記事では 下記要件を(こだわりとして)満たしたいと考えました。

• 投稿した記事一つとっても作品という形で可能な限り自分の手元で管理できる形式をとること
• ホスティングサービスが変わっても移行しやすいこと
• 自分が本来やりたい記事の投稿に集中できること
  • 「ブラウザやPC/スマホで表示をスマートに切り替える」などフロントエンド的な苦労は避けたい
• 自分のライフワークとしてのページ更新を見据え、安定して継続更新ができること

これらを満たす上で、1からデザイン設計/構成を考えるのは大変なのと、凝りすぎていつまで経っても公開できない懸念があったため ある程度運用しやすいように設計されたテンプレートがあると嬉しかったです。 とはいっても、好みのデザインでページを作りたい欲もあったので、ある程度のカスタマイズ性も求めていました。

「運用しやすいテンプレートとカスタマイズ性」、2つのバランスを取る上で自分の落とし所を探ったところ 本ページで採用したHugoとJekyll、 どちらかを使うというところまで絞り込みました。

HugoとJekyll

候補に上がったのは、HugoとJekyllという2つのジェネレーターです。各々の特徴は下記のとおり。

• Hugo -公式サイト
  • Go製の静的サイトジェネレーター
  • Go製ということもあり記事生成のビルドが高速
  • (私見)公式サイトの「Get Started」終了後、詳細な文法リファレンスに放り出されるので初学者には辛い
• Jekyll -公式サイト
  • Ruby製の静的サイトジェネレーター
  • 「Twitch」や「AWS Amplify」などの大手Webサービスでも利用実績がある -Showcase
  • (私見)公式ドキュメントがかなりわかりやすい（特に Step by Step Tutorial）
  • スクリプト言語の宿命か、記事量が多いとビルド時間がかかる

正直、最初は「公式ドキュメントがわかりやすい」という点からJekyllを採用したい気持ちが強かったです。 (公式ドキュメントがわかりやすいということはそれだけ布教に力を入れている証）

しかし、ブログとしての運用を想定している都合上、記事が増えるとビルドに時間がかかるようになるというデメリットは見逃せませんでした[¹]。 Hugoであればたとえ記事が増えたとしてもイテレーションを高速に回すことができそうです(速いは正義)。

とはいえ、Hugoの公式チュートリアルだけではどう運用していいかわからず困っていたところ、 AcademicというHugoのテーマがチュートリアル付きでとてもわかり易いページを公式で用意してくれていました。

HugoのAcademicテーマ

そもそもテーマとはなにか？

HugoにせよJekyllにせよ、素の状態だと自分で1からチクチク作っていくのとあまり変わりません。 そのため有志の人たちがテーマという形でいい感じのデザインをテンプレートとして利用できるように公開しています。

Hugoの場合、他の人が作ったテーマをロードする仕組みがデフォルトで用意されており、 プラスアルファで自分の設定をオーバーライドしたり、テーマ内部をいじったりして自分のサイトを作っていきます。

テーマを紹介しているサイトもいっぱいあるので、こちらでは特に紹介しません。 「Jekyll テーマ」「Hugo テーマ」などで検索をかけるといっぱい出てくると思います。

そんな数あるテーマの仲でもHugoのAcademicいうテーマはドキュメントの充実具合が半端じゃありません。

Academic ドキュメントサイト

もともとは大学研究でプロジェクトや成果発表などの用途で使われていたようです（だからAcademic）。 しかしオープンソースとして公開されており、その派生でブログや商品の紹介などにも使えるようにカスタマイズできるような設計が色々されています。 今回のブログもデフォルトのAcademicが提供しているConfigファイルを弄るだけで作成されています。 (もちろんどうしてもデフォルトの挙動を変えたくて一部cssやjsもいじっています。)

今後このページでどういうふうに設定するかの詳細を記事にしていく予定です。

既存のブログサービスではだめだったのか

当初は既存のブログサービスや「Qiita」「note」などの記事投稿サイトの利用も検討しました。 （ポートフォリオはプロフィール欄を埋める程度で良いかなと） ただ、「いいね」や「Like」などの自分の承認欲求を満たす方向に意識を取られてしまい 淡々と記事を投稿したいという方針が崩れてしまいそうだったのでやめました。

また、昨今の相次ぐブログサービスの終了を目の当たりにしたのも既存サービスを避けた理由の一つです。 たとえ大手企業が運営していたり、人気のサービスであろうと 将来のサービス利用状況や経営判断如何でサービスは終わってしまいます。

• 折角記事を書いたとしても、サービスが終了してしまい大量の記事を他サービスに移行する
• 最悪サービス終了とともに記事が消えゆく様を眺める

これらのリスクは、ライフワークとしての投稿を見据えた運用を目指す自分の中ではあまり許容できないものでした。 対して、ソースを自分の手元で管理しておける静的サイトジェネレーターは非常に魅力的でした。 また、管理画面でチクチク設定変更するよりは ソースコードを好きに書き換えてくほうが性にあってたので そういう点でも都合が良かったです。

おわりに

挨拶ページにしてはページ分量が出てきてしまったのでこのへんで終わります。

今後も「2週間に1記事投稿」を目標にページ更新を続けていくつもりです。 あまり気張らず続けていければと考えていますが、気晴らしの読み物として愛読いただけると幸いです。