HugoとGitでテキストサイトをつくったよ

2026-06-23

Tags: #作業ログ #Gemini #学習:ターミナル #学習:Hugo #学習:Git

昨日、思い立ってテキストだけの、すごくシンプルなウェブサイトをつくってみた。

• VScodeを使いこなせるようになりたいから、MarkDownでテキストを書いて、それをアップロードするシンプルなものにしたい。
• GitHubとかターミナルとかコマンドプロンプトとか勉強したいから、適宜、使ってみたい。
• 最初は、読んだ人の反応とかコメントとかもらうのはつけなくていい。

それでGeminiに聞いたら、HugoとAstroという静的サイトジェネレーター（SSG）を勧められた。

どっちも高速でさくさく動くけど（Hugoは作業速度が早い、Astroは端末での表示速度が早い）、Hugoは最初からブログむきの機能がいろいろはいってるのが特徴みたい。

なるほど、じゃあそれでやってみよ。

というわけで、紆余曲折ありながらもいちおう完成！　Hugoはすでにいろいろなテーマ（画面構成・デザインのパッケージ）がつくられているから、最初はそれを使ってセッティングすればよいとのこと。

とはいえ、選んだテーマが古かったりして（リンク先がないとか）うまく反映されなかったけど、【hugo-bearblog】というテーマでなんとか作成。それから順次整理していった。

• サイトのタイトルを変更するにはどうしたら？
• 新しい記事を作るのはどうする？
• 各記事にタイトルを表示したいけど、どこに何を書けば？
• 最初に作成したMac miniだけじゃなく、MacBook Airでも作業するためにGitHubに保存したい。どうやる？
• MacBook Airにはどうやってデータを持ってくる？
• 記事にタグをつけたい、各記事にもタグを表示したい。どうするの？

予期せぬエラーが多々あったけれども、ひととおり完成。

■ フォルダ一式をgitに保存したりgitから持ってきたりする

以下の手順（で、ターミナルで作業）。

1. ターミナルで使う場所を確定　cd 使う場所（フォルダ名）
2. add　git add .
3. commit　git commit -m "保存段階に名前つける"
4. push　git push origin main
5. pull　git pull origin main
6. clone　git clone https://github.com/ユーザー名/サイト名.git

クローンは、サイトのフォルダ一式を丸ごと新規にDLすること。まだPC上にフォルダ一式がないときだけじゃなく、なんか作業がうまくいかなくなったときとか問題を切り分けたいときには有効。作業中の書類は残しておいて、うまくいったところまで戻して試してみるとかできる。

この `git push origin main`とかのインラインコードの表現を変えたいんだけど（文字を小さくしたくない、背景色をつけたい）、何をやってもうまくいかず。なかなか全部思い通りにならないな……。

カスタムはここまでにして、プッシュして終わりにする。

そして次はCloudflarePagesを設定しようかな。

MacBook Airにプルしてみたら、やっぱりmd書類の中を更新しても反映されない問題が。で、昨夜クローンしたフォルダの中を見てみたら、themes > hugo-bearblogの中がからっぽだった。

……これ、昼に同じことやったぞ？

Geminiよ、たぶん、昨夜うまくいかなかったのもここだよきっと。

テーマ（骨組み）が空っぽだと、Hugoは記事をどう画面に映していいか分からず、エラーを出したり古い記憶（キャッシュ）を映し続けたりします。

というわけでサブモジュールの問題を解決。

他人の作ったプログラム（この場合はテーマ）を自分のフォルダに入れるとき、中身のファイルをそのまま自分のフォルダに保存するのではなく、他人の倉庫の場所が書かれた「案内看板」だけが置かれるしくみ。

ターミナルで一度、空っぽのフォルダを消して、強制的にテーマの最新版を持ってくる。すると……よーし。うまくいったぞー！　すっきり！