Github Pages + Hugo + Loveitでブログを作ってみた

2022-08-14 2678 words 6 minutes

コンテンツ

ブログをつくるよ

ブログ作る目的

最近作ったサービスYontakuの技術情報をどこかにメモしたいなと考えていたのですが、NotesやQiitaで共有しても広告付かないし、自分の資産にならないのでイマイチかな？と思い、せっかくなので自分のブログを立ち上げることにしました。

「はてなブログ」で立ち上げることも考えたのですが・・・。過去に「はてなダイアリー」でブログ作ってまして、Springのマニュアル邦訳（DIのところくらいまで）作っていたので多少はPVもあったのですが、「はてなダイアリー」終了で悲しい思いをしまして。。。そういう経緯もあり外部サービスに頼るのやめて、自分のブログを持とうかなと。

ブログ作る方法

ガチでやるならレンタルサーバ借りてWordPress鉄板なんでしょうが

【初心者でも安心】たった10分で出来るWordPressブログの始め方

ブログで稼ぐ気なんてさらさらない
左程PV集まる算段もない
たぶん続かない

ので、そんなことしません。かわりに以下の方法でやります。これなら無料で運営できます。

Hugoを使用してブログのコンテンツを作成する
ブログはGithub Pagesに無料でホスティングする
続くかもわかんないのでドメインは取らない。Github Pagesのドメインで運用する。

ということで、これ以降はHugoを使ってブログを作成した際の覚書を記載します。

Hugoとは

Webサイトを生成するための静的サイトジェネレータです。Webサイトを作成する際に、HTMLを直接書く必要はありません。MarkdownファイルからWebページを生成することができます。

MarkdownからどのようなWebサイトを生成するかについては、Hugoのテーマを選択することで決まります。自分が使いたいテーマを選択することができます。 Hugoの詳細は、まくまくHugoノートにかなり詳細にまとまっていそうなので、こちらを参照ください。

Loveitとは

Hugoでブログを作成するためのテーマです。開発者は中国の方みたいですね。どのテーマにするかはHugoのテーマサイトで以下の基準で評価して決めました。

GitHubスターの数
最終更新日（今もメンテされているか）
見た目のイメージが気にいるか。

見た目がごてごてしておらずすっきりしていたこと、ダークテーマの切り替えや検索機能が実装されていることも好印象でした。（チャイナに偏見持ちなので一瞬拒否反応出そうになりましたがｗ）

Loveitのその他の特徴はWhy choose LoveItやFeaturesを見るとよいかと思います。

Hugo+Loveitをとりあえず使えるようになるまでに踏んだ手順

Hugo自体結構機能が多そうで、真面目に勉強すると時間がかかりそうだなーと思ったので、以下の手順でやりました。大分サボりました。

Hugoの概要をどこかのページでいくつか眺める
Hugoのインストールを行う
Hugoのusageを行う
LoveItのTheme Documentation - Basicsを読み、簡単なサイトを作る

それ以降は、LoveItのマニュアルを中心に読んで対応しました。Hugoちゃんと勉強してからのが良かったかなーと思うところもあったので、最初にフォルダの意味や基本的な仕組み（layoutsとthemeの関係とか）くらいは理解しておいたほうが良いかもしれません。

実際にサイト作ってみた感想としては、マークダウンのフォーマットやテーマのカスタマイズなどは結局テーマごとに異なるので、実際に使うテーマのマニュアルを中心に取り組んだ方が結果的に早く理解できるかなーと思いました。

Hugo+Loveit+Github Pagesでブログ作成時の細かいTips

現時点でハマっている内容も含めてメモします。

Github Pagesでホスティングしたい

Hugoのマニュアルにバッチリ記載されています。Github ActionsのYAMLファイルも提供されているので、ほんとほぼこのまんまできるはずです。めちゃくちゃ楽。

Faviconを表示したい

Loveitのマニュアルに記載されています。Faviconの作り方も書いてあって助かる。

ちなみにFaviconを表示したい場合はGithub PagesをUser/Organization Pages(URLを[https://<USERNAME|ORGANIZATION>.github.io/]とする)で作らないとFaviconが読み込まれないので注意（ハマったのは内緒（　＾ω＾）・・・）

Google Adsence

Githubのイシューが上がっていて、この内容によるとthemeのテンプレートをカスタマイズして直接修正するしかないそうです。仕方ないので修正対象のテンプレートをlayoutsフォルダにコピーして、直接JavaScriptの読込やGoogle Adsenceタグを張り付ける実装をしました。

タグ一覧やカテゴリ一覧の文言を日本語にしたい

デモサイトのタグ一覧の右上の表示「All Tags」を日本語に変えたかったのですが、ちょっとハマりました。多言語対応として文言が設定されていたので、4.3 Overwrite Translation Stringsを参考にカスタマイズすればよいのですが、Loveitが日本語に対応していないんですよね。

仕方ないので、config.toml上はlanguageCode = "en"として設定し、em.tomlをカスタマイズして文言を変更しましたが、なんかモヤモヤする。言語コードに何設定されても動くようにしておけばいいのに。直接テンプレートいじって直しちゃったほうが良いかもしれません。

ソーシャルリンクをProfileに表示したい、日本語フォントに変更したい

Toru Niinaさまのサイトを参考にさせていただきました。

ブログの文字数表示がおかしい

ブログの先頭に表示されているブログの文字数が正しく表示されない。これはconfig.tomlにhasCJKLanguage = trueを定義することで解消しました。

コメント機能を追加する

disqueという静的なサイトにコメントを追加するためのサービスを使用することで実現できます。このサイトに完璧な手順が記載されていました！

ブログのソースコード

私のリポジトリへのリンクを置いておきます。config.tomlの内容まじめによむのつらたん、、となったときのカンニング先としてどうぞ。

まだハマっていること

以下ができてないです。なぜ？

lunrによるサイト検索が機能しない。最初ブログ作ったときはちゃんと動いてたみたいなんだけど何故？？