140文字以上

140文字では伝わらないことを書いています。禁無断転載

twitter(@chromarock), github, bluesky, Mastodon(japanet), misskey, ほしいものリスト, 本人証明, その他プロフィール

hugoを使ってこのブログを生成し直してみた

この所更新とかあまりしてませんでしたが、最近はちまちまとhugoという静的サイトジェネレーターを使ってこのgithub.ioを書き直したりしました。
表ページとか体裁が良くなったかなと思います。

事の経緯

実は今までサイトジェネレーターなるものは使ったことがなくて、一応はCSSもHTMLも理解は出来るので手でタグを打って記事を更新しておりました。

しかしながらちょっと何か書こうと思うとやっぱり途端にめんどくさくなって「もうええかな…」みたいになるという大きな欠点がありました。
記事だけなら良いんですがMainページやら分類ページも自分で編集しないといけないですしね…

で、タグをあまり打たなくて更新できるといえば、真っ先に思い浮かぶのがWordpress等の動的なジェネレーターなわけですが、Githubのページだと当然ながらサーバが動かせないのでWordpressなどは要件から外れてしまうんですよね…

自分でサーバを建ててページを作る分にはWordpressとかそういったものでも悪くはないんですが…
そもそもBlogとかだと内容は固定なので動的に作っても無駄にサーバ代が掛かったりするので厳しいかなと…

ということでなんらかの記事文章から静的にHTMLを生成してくれて、なんかカテゴリーごとのページとか自動生成してくれるような便利なものは無いかなぁということで探しておりました。

色々調べてみた結果、最近はそのような静的に生成する需要があるからなのか、こういった静的なサイトジェネレータも発達していってるようで色々ありました。

ジェネレータは本当に最近は色々あるのですが、(こことかみたら100越えてる…)最終的にその中からhugoを選びました。

選んだ理由は以下の通り

・オープンソース
・アップデートされ続けている(これ意外と重要です)。勢いがある。
・見た感じとっつきやすそうだった
・導入簡単なテンプレート(テーマという)がたくさんあって、ブログそのもののできそうなものも多数あった
・日本語(UTF-8)で書いた記事が問題なく変換できること(意外とここで躓くパターンはある)
・日本語の情報がまぁまぁある
・LinuxやWindowsでも動く(自分としてはこれも重要)
・Markdownの記法が使える
・Go言語で作られている(いざとなれば改良できそうみたいな)
・Bootstrapを挟める等、カスタマイズ性

まずはとりあえずGitとhugoさえPCにいれておければ更新できるみたいな環境は必須なので、hugoはユニバーサルな環境で動かせるというのは大きいですね。

あとはMarkdown記法でしょうか。
MarkdownはQiitaとかで記事を書く場合にも使用しますし、Githubでも.mdで文章を書く場合は必要である程度は理解しているので、昔の記事とか持ってくる分にも楽かなと。

カスタマイズ性が高いというのも魅力ですね。
前までは自分でCSSをゴリゴリと書いてそれを適用していたわけですが、なんかもうそういう時代じゃなくてBootstrapとかを使う時代…ということで、Bootstrapの使用法も勉強したかったので、そういったCSSを挟む余地があるジェネレータじゃないと駄目でした。

で、hugoはそれも出来るしなんならBootstrapが入ったテーマすらあるのですごく楽だなあと

hugo自体がgo言語で作られているというのも大きいですね。go言語はあまり知りませんが勉強したほうがよいかなぁと思っている部分があるので、この機会についでに履修できればよいなぁということで、hugoを選んでみました。

導入してみて

単なるブログだったらそれこそ公式に豊富にあるテーマからそれっぽいものを探して、あとはその辺りにある「導入の仕方」みたいなサイトをなぞっていけばそれっぽいブログはできてしまいます。

こういった静的なサイトジェネレータってある程度プログラムというものを理解しないと難しいみたいなのは定番としてあるのですが、そういったのをあまり感じさせないというのが学習コスト低くて良いなあと。。

しかしながら、やっぱり元に作っていたブログのデザインは崩したくなかったので、最終的にBootstrapを素直に使っていてあまり手が混んでささそうなvanilla bootstrapからテーマを持ってきて、これに手を加えるという形にしました。

ということで、テーマを見て改造していくとなるとやはりプログラミングの知識とかそういうのは必要なわけで、実際テンプレートを深く見て納得行くように改良していくとなると、hugoのマニュアルを隅々まで見たり、go言語のtext templateを見ないと解らない部分があったりするわけですが、ボクは腐ってもPGなわけで見ているうちに分かってきたといいますか、go言語もなんとなく解るようになってきて両得みたいな感じがありますね。

hugoはlayoutにあるファイルをカスタマイズしていくことによって色々できるわけですが、パラメータやら条件文も使用可能なため、カスタマイズ性はなかなかあります。

あぁ世の中のフロントエンドエンジニアはこういうことやってるのかぁみたいな学びはありました。
自分としては普段は基板とにらめっこしたりカーネルソース見て唸ったりとか、ローレベルなエンジニアに分類されるので、こういった表舞台の作業は新鮮ですね。

この仕組みを使ってブログ生成以外にも例えばコスロムの生成とかにも使えるんじゃないかなとか色々思うところはあって、やってよかったなあという感です。

hugoについてもちょこちょこ知見は得られたのでまた何らかの機会にまとめときゃいけないなぁと。。。

共有する 共有用にコピー