サイト更新:Hugoを導入してみた記録
1月の終わりから2月の頭にかけて、個人サイトのメンテナンスに取り組みました。 具体的に何をしたかというと、以下の2つです。 Hugo(静的サイトジェネレータ)を導入 sizume(しずかなインターネット)からお気に入りの記事を移行 Hugoを導入したきっかけ 12月の終わりにこの個人サイトを立ち上げた時、ページの構成はメインページのHTMLとテガログ2つ(つぶやき用と記事用)としていました。 どうしててがろぐを選んだかというと単純で、個人サイトを立ち上げた経験がなく、HTMLやCSSその他諸々の知識が少ない私でも気軽に使えそうだったからです。 個人サイトを立ち上げた時の記事「個人サイトを立ち上げてみた」 てがろぐはとても使いやすくて、特に「つぶやき用」にはちょうど良いツールです。ただ長めの記事、かつゲームのプレイ日記のような画像を何枚も掲載するような文章ですと、てがろぐの管理画面から入力するのは私には少々きつくて、別の方法を探すことにしました。 そこで見つけたのがHugoです。他の方の個人サイトでもHugoを使っている方を見かけていたのと、探せばたくさんの導入方法を説明したサイトが見つかったので、「静的サイトジェネレータ」とは何ぞや?という状態の私でも何とかなりそうというのが決め手でした。 Hugo導入の試行錯誤 そもそもHugoを導入することでどう変わるのか?どんな風に操作するのか? てがろぐから別のツールを使おうかなと思ってから2日後、何も分からないまま取りあえずHugoをインストールしてみました。 Hugoをインストールした。参考になりそうな記事を読んだり、ChatGPTに質問したりしながら、少しずつ準備を進めている。(2025/1/26 つぶやき) 無事、インストールできた後も、いろんなサイトを見たり、ChatGPTに聞きながら、themeや細かな設定をしたり。 一度始めるとある程度形になるまでは一気に進めたい質(たち)なので、平日も文字通り寝る間を惜しんでHugoと向き合いました。 無事にある程度形が整って、てがろぐで書いていた記事をHugoを使って生成、アップロードまで完了したのが、Hugoをインストールしてから4日後。 そこで満足するかと思いきや、今度は記事ごとに「いいねボタン」を付けてみたいと思って、 あれこれ修正していたら2日かかりました。一番苦労したのはダークモードの画面を整えること。CSSの知識不足から思うように設定できず、ここに一番時間がかかった気もします。 というわけで、思い立ってから約1週間でHugoへの移行が完了しました。 「文章」というページにあるものが、Hugoで生成したものです。 記事の執筆から公開まで Hugoを導入したことで記事の執筆から公開までの流れが変わりました。 (てがろぐの場合) 管理画面に文章を打ち込む ※画像を掲載する際は、事前にアップロード→リンク指定 が必要 公開 見た目を確認 (Hugoを導入した後) ターミナルから新規のフォルダとmdファイルを作成 mdファイルに文章を打ち込む ※画像を掲載する際はフォルダに格納して、リンク指定 下書きの状態でプレビューし、見た目と内容を確認 「Hugo」で本番用のファイルを作成 FTPでアップロード 表示を確認 作業量は明らかに増えていますが、満足度からすると、私の場合は後者が圧倒的に上です。 移行して思ったこと Hugoに移行したことで、記事の見た目にこだわることができるようになりました。 この記事もVSCodeを開いてmdファイルに打ち込んでいるのですが、てがろぐよりも「文章を書いている」という感じがして良い感じです。 一方で、「ファイル作成→執筆→本番用のファイル生成→FTPでアップロード」といった感じで、記事を公開するまでにいくつものステップを踏まないといけないのはちょっと大変だなと既に感じています。 Hugoでファイルを生成すれば自動でサーバにアップロードできる仕組みもあるみたいなので、Hugoに慣れてきたら次はそれにも挑戦してみようと思います。 sizumeからの記事の移行 Hugoの導入と合わせてもう一つ行ったのがsizume(しずかなインターネット)からの記事の移行です。Hugoを導入したことで使わなくなったてがろぐに、sizumeに書いてきた記事の中で、気に入っている記事だけを選んで移行してみました。 sizumeから移行した記事たち:日々のこと 移行に際して、sizumeの記事を一つ一つ読み返していったのですが、公開しているものとはいえ、何だか気恥ずかしかったです。「この時期は早起きができていたんだなあ」とか「ゲームを楽しんでいるなあ」とか、「ちょっと疲れてたんだね」とか。色んなことを考えながら、記事を選びました。 個人サイトを始めてから、note、個人サイト、sizumeの3つを使い続けるのは難しいなと感じたので、今後はnoteとこのサイトの2つを運営しようかと考えています。 終わりに 今回はHugoを使ったサイトのリニューアルについて書きました。 きっと後から振り返ると、こういう方法もあるよとかいろいろ思うのでしょうが、今の私にできたことという記録としてここに残しておこうと思います。