Diary on 文章

サイト更新：Hugoを導入してみた記録

Mon, 23 Feb 2026 14:52:51 +0900

1月の終わりから２月の頭にかけて、個人サイトのメンテナンスに取り組みました。
具体的に何をしたかというと、以下の２つです。

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を使ったサイトのリニューアルについて書きました。
きっと後から振り返ると、こういう方法もあるよとかいろいろ思うのでしょうが、今の私にできたことという記録としてここに残しておこうと思います。

個人サイトを立ち上げてみた

Mon, 22 Dec 2025 22:02:30 +0900

初めまして Aotoと申します。この度、個人サイトを立ち上げてみました。

自己紹介

書くことが好きで2年ほど前からnoteやsizumeで文章を書いています。
趣味は読むことと書くこと。新しいものを見つけたら、とりあえず触ってみるのが好きです。好奇心で生きています。
このサイトもその流れでで立ち上げました。

このサイトを立ち上げた経緯

今年（2025年）の春頃にnoteとは別の場所を持ちたくなって、様々なツールを試してきました。
BloggerやCosense、はてなブログ、Micro.blogを転々として、最後にたどり着いたのがここです。noteとは別の場所を持つと言っても既存のブログサービスでいいかなと思っていたのですが、様々なサービスを試しながら調べる中で、てがろぐという面白いツールを知り、これを使って自分だけの場所（サイト）を作るのもいいなと思ったので、えいやっと始めてみた次第です。

このサイトの構成

・サーバ：ロリポップ
・構成：HTML+てがろぐ２つ（つぶやき用と記事用）
2026/01/29追記
記事用はHugoに移行予定

立ち上げの記録

せっかくなので、立ち上げの記録を書いておこうと思います。

レンタルサーバを借りる
立ち上げにあたって初めてレンタルサーバーを借りました。
ロリポップとさくらのレンタルサーバを試してみて、ロリポップを使うことに決めました。決め手は、ドメインが可愛いことと操作画面が好みだったこと。さくらのレンタルサーバの方がより安心感が高かったのですが、使うなら独自ドメインがいるかなと思ったのも理由の一つです。独自ドメインはこのサイトが続けられたら、導入を考えてみる予定です。

2025/12/25追記
独自ドメインを取得しました！

てがろぐを導入する
てがろぐとは「お手軽マイクロブログツール感覚のフリーCGI」です（公式ページより）。書く場所を求めて彷徨う中で「てがろぐ」が良い！というのを何度も見かけたのですが、最初は「マイクロブログ」も「CGI」も何のことか分からなかったので、それよりもよく聞く「はてなブログ」などのサービスを試していました。
しかし、それらのブログサービスがどうもしっくりと来なくて、考えた結果、どうも自分の作りたいのは「ブログ」ではなく「個人サイト」であることに気づきました。
春から考え始めて、気づいたのは12月も半ば（長いですね）。

個人サイトを作るというと、Wordpressがまず最初に思い浮かびましたが、続くかどうかわからないのに最初に手を出すのにはちょっとハードルが高い。対して、「てがろぐ」はどうやら簡単に設置できるらしい。ということで、何ができるかよく分からないままてがろぐを設置してみました（今もまだ分かっていませんが）。

てがろぐの設置自体は、評判通り難しいものではありませんでした。レンタルサーバごとにどうやって設置するかまで解説してくださっているので、その通りに素直にファイルを置いていほんの少し設定するだけ。迷ったところはてがろぐ自体ではなく、ロリポップの操作画面です。どこからファイルをアップロードするか少々迷いました（正解はロリポップ！FTPです）。

てがろぐの設定とスキンの導入
てがろぐの設置が完了したら、まずはパスワードを設定。
次に先に見つけていたサイト（※）を参照しながら初期設定を行いました。

（※）「てがろぐ本番運用前に設定しておきたいポイント」（10press）

次にスキン。このサイトでは何らかの配布場さんの「kozin」というスキンを使っています。
テンプレートをダウンロードして、ファイルを置き換え、HTMLとCSSを少しだけ変えてみました。HTML&CSSは基本の「き」ぐらいの知識しかありませんが、有難いことにファイルの中にコメントをたくさん書いてくださっているので、それを参考にしながら自分好みに変えることができました。

何を書いていくか

最後に、このサイトで何を書いていくかですが、実はまだ思案中です。
思案中のまま始めるの？と言われそうですが、noteを始めた時もsizumeを始めた時も、何を書くかを考えないまま始めたので、自分の場合はそれが通常運転です。
書きながら見えてきたものが、私がここで書くことかなと思っているので、見守っていただければ幸いです。

これからどうぞよろしくお願いします。