HugoとGitでテキストサイトをつくったよ
昨日、思い立ってテキストだけの、すごくシンプルなウェブサイトをつくってみた。 VScodeを使いこなせるようになりたいから、Markdownでテキストを書いて、それをアップロードするシンプルなものにしたい。 GitHubとかターミナルとかコマンドプロンプトとか勉強したいから、適宜、使ってみたい。 最初は、読んだ人の反応とかコメントとかもらうのはつけなくていい。 それでGeminiに聞いたら、HugoとAstroという静的サイトジェネレーター（SSG）を勧められた。 どっちも高速でさくさく動くけど（Hugoは作業速度が早い、Astroは端末での表示速度が早い）、Hugoは最初からブログむきの機能がいろいろはいってるのが特徴みたい。 なるほど、じゃあそれでやってみよ。 というわけで、紆余曲折ありながらもいちおう完成！ Hugoはすでにいろいろなテーマ（画面構成・デザインのパッケージ）がつくられているから、最初はそれを使ってセッティングすればよいとのこと。 とはいえ、選んだテーマが古かったりして（リンク先がないとか）うまく反映されなかったけど、【hugo-bearblog】というテーマでなんとか作成。それから順次整理していった。 サイトのタイトルを変更するにはどうしたら？ 新しい記事を作るのはどうする？ 各記事にタイトルを表示したいけど、どこに何を書けば？ 最初に作成したMac miniだけじゃなく、MacBook Airでも作業するためにGitHubに保存したい。どうやる？ MacBook Airにはどうやってデータを持ってくる？ 記事にタグをつけたい、各記事にもタグを表示したい。どうするの？ Hugoの基本は、 記事作成はcontent>postフォルダ内にmd書類を置くことでできる。 publicフォルダは、Hugoを起動したときに自動的にできるもの。中身を触っても意味はない（失敗タグとかが残るから気になったら削除しちゃってOK）。 themesフォルダの中身は触らない！ ページの見た目を変更したいときはlayoutフォルダの中で行う。 予期せぬエラーが多々あったけれども、ひととおり完成。 ■ フォルダ一式をgitに保存したりgitから持ってきたりする 以下の手順（で、ターミナルで作業）。 ターミナルで使う場所を確定 cd 使う場所（フォルダ名） add git add . commit git commit -m "保存段階に名前つける" push git push origin main pull git pull origin main clone git clone https://github.com/ユーザー名/サイト名.git クローンは、サイトのフォルダ一式を丸ごと新規にDLすること。まだPC上にフォルダ一式がないときだけじゃなく、なんか作業がうまくいかなくなったときとか問題を切り分けたいときには有効。作業中の書類は残しておいて、うまくいったところまで戻して試してみるとかできる。 この `git push origin main`とかのインラインコードの表現を変えたいんだけど（文字を小さくしたくない、背景色をつけたい）、何をやってもうまくいかず。なかなか全部思い通りにならないな……。 カスタムはここまでにして、プッシュして終わりにする。 そして次はCloudflare Pagesを設定しようかな。 MacBook Airにプルしてみたら、やっぱりmd書類の中を更新しても反映されない問題が。で、昨夜クローンしたフォルダの中を見てみたら、themes > hugo-bearblogの中がからっぽだった。 ……これ、昼に同じことやったよ？ Geminiよ、たぶん、昨夜うまくいかなかったのもここだよきっと。 テーマ（骨組み）が空っぽだと、Hugoは記事をどう画面に映していいか分からず、エラーを出したり古い記憶（キャッシュ）を映し続けたりします。 ...