前回からの続き。
![[スクリーンショット] Hugo](img/catch.png)
静的サイトジェネレーターを使おうと決めたものの、さて何を使ったら良いのか？自分が調べた時は、 Jekyll と Hugo の2つが目についた記憶があるのですが、改めて検索してみると他にもいろいろと出てきますね。さて、どちらが良いのか？と思いつつもほとんど比較らしい比較もせず、Hugo を利用しようと決めました。決め手は全く記憶にありません 😅 が、覚えているのは、2つ。
- 比較的新しい 1 ツールで、開発が活発、らしい
- 日本語の情報が少ない、らしい
日本語の情報が少ないの？
日本語の情報が少ないというのが本当だったして、自分自身の拙い知識から始めてもこうしてサイトを公開できるところまでこぎつけられたので、日本語でも必要な情報は十分得られるのではないかと思います。また、それぞれテーマが公開されていると思うので、いろんなテーマを見て、自分が使いたいテーマが見つかったのであればそのテーマのツールを使うことにする、というのもアリだと思います。
ツールは Hugo に決めました。次はテーマです。もちろん、イチから自分の思い通りに作り上げていく方法もありますが、多くの人にとっては敷居が高いと思います。気に入ったテーマをそのまま使う、自分のやりたい内容に近いテーマを選ぶ、選んだテーマをカスタマイズして使う、というのが順当でしょう。
自分の場合、試しただけのテーマからある程度カスタマイズを進めたものの結局、やめた 2 テーマまで含めると10種類くらいあったでしょうか。テーマは各制作者の方の考えが反映されているので、それぞれで良いと思うのですが、個人的に譲れなかったのは、情報構造の部分。特に見出しタグの扱いです。
見出しタグの例
SEO に対する効果もあるとされていますので、適切な使い方は重要なタグであると考えています。
多少なりとも Hugo の理解が進んだ今では自分の納得するような内容にある程度は修正することができるようになったと思います（思いたいです😅）が、当時はろくに仕様も理解しておりませんでしたので、試してみて見出しの扱いが気に入らないものはカスタマイズするのをやめて次。という感じでやってました。
最終的にはこの Paper というテーマを見つけ、自分としては納得できるようにカスタマイズすることが出来たので、使わせていただきました。自分が試した中では、最もシンプルなテーマだったかもしれません。シンプルだからこそ、自分がやりたいことをなんとか追加していけたという感じでしょうか？
Paper ライトモード Paper ダークモード![[スクリーンショット] Paper のライトモード](img/paper_light.png)
![[スクリーンショット] Paper のダークモード](img/paper_dark.png)
ようやく緒に就いたところなので、Word Press から Hugo に乗り換えて何が良かったか？はまだ実感としては少ないですが、先にも書いたように、データベースの容量やセキュリティについて心配する必要性が大きく低下したのは大きいですね。
あと、Word Press の時も文章だけ書いて Word Press の仕様に従って HTML 化されるのがどうもイヤでソースごと書いてたんですけど、Markdown 記法で書くようになったので、楽にもなりました (笑)
とはいえ、Markdown 形式は HTML/CSS に比べると表現力としては大きく制限されます。混在で書くことも可能ですが、同じ HTML を何度も記述するのは面倒ですし、一つのエントリ中に混在するのも可読性が落ちます。それを解決するため、Hugo には Shortcode という機能が用意されていて、Shortcode を使うことで HTML/CSS と遜色ない表現が出来るようになってます。
Shortcode というのはあらかじめ定義された HTML ファイルで、この HTML ファイルを Markdown ファイル内から呼び出すことが出来ます。標準で用意されているものもいくつかありますし、自作することも可能なので、大抵のことはできそうです。自作の Shortcode を紹介されている先人も数多くいらっしゃいます。
今回、アマゾンへのリンクやシェアボタンも Shortcode を使って実現していますが、以下の内容を参考にさせていただきました。他にもたくさんの方の発信内容を参考にさせていただいています。あらためて感謝申し上げます。
自分はまだまだ手探り状態で、あれが足りなかった。これ忘れてた。という感じの日々ではありますが、いずれ恩返しがてら、お役に立てるような内容を共有できればと思っています。
amazon.co.jp
