Hugo

記事を書くのには慣れてきたけれど、そうするとウェブサイトを構成するフォルダや書類の名前とかファイル構造とかが気になってくる（中身の外側、というか）。 そもそもVScode上でターミナルを起動できることにさっき気づいた……。 アンタ（VScode）ってただのエディタじゃなかったんだね。ポテンシャルを生かせてなかったよ。なんかごめん。 というわけでちょっとおさらい、そして気になっていたことを修正（例によっていちいちGeminiに質問しつつ）。 まず、Hugoサイトの構成について復習 layoutsというフォルダは「ウェブサイトの見た目を定義する」もので中身は.htmlファイル。 archetypesというフォルダは「新しく作る記事の初期設定を決める」もので中身は.mdファイル。 hugo.tomlは、サイト全体を規定する一番重要な書類で、サイト名、URL、使用テーマ、メニュー、言語設定などをここで設定する（トップページの表示内容を[params]などとして供給することもあるが、見た目そのものを整形するのはlayouts内のindex.html）。 content > postsフォルダ内のMarkdown書類や画像が、自分でつくるサイトの中身。ちなみに、この「content」だけは単数形！　Hugoの内部システムで厳密に定義されているため、スペル変更はできない仕様なんだって。「情報やコンテンツという抽象概念（不可算名詞）の集まり」という意味でこの単語が採用されたとのこと。 themesは主に外観のきせかえパーツ。いろんな人がつくってくれているのをさしかえできる。この中身は更新されることがあるので触らない！　どこかカスタマイズしたいときはlayoutsフォルダにここから必要なHTML書類をコピーしてそれを変更する。 publicはHugoを起動すると自動で生成されるから触っても意味なし。ごちゃついてきたら捨ててもよい（すぐに新しいのができる）。 Hugoには「特定のフォルダ名を見て、自動でその役割を判断するルール（ディレクトリ構造の約束事）」があるとのこと。だから、こういう決まった書き方があるのだね。自分で勝手に直したりつくったりしちゃいけないんだな。あたりまえか。 Hugoのファイル構造の整理とアーキタイプ設定 ファイル構造の整理。フォルダ名postをpostsに。hugo.tomlのナビゲーションメニューのリンク名を直しただけだと、エラーに。個別記事内に、別記事へのリンクがはってあってそこにフォルダ名の指定があったのを忘れていた。 個別記事ページで、タグが記事より下に表示されていたのを、タイトル、日付の下に入れたい。theme > layoutsからコピーしたsingle.html内でタグの位置を修正。どこまでタグの指示に関することなのかがわかりにくいので難しかった。 新規記事作成は手動でMarkdown書類を作成していたけど、テンプレートを整えておけばよいのだった。TOML形式（+++区切り、キーと値を=で結ぶ）だったのをちょっと書き慣れてきたYAML形式（−−−区切り、キーと値を:で結ぶ）にして、今使っているフォーマットになるように。Archives用に年月を設定するのだけわからなかった。これでhugo new posts/20XX-XX-XX.mdと入力すればpostフォルダ内に新規記事が作成されるみたい。 ちょっと、なるほどと思ったのは、「数字」の扱い方。単に文字列とみなすこともできるけれど、数字にはいろいろ機能がある。「数」「値段」「気温」「日付（年月日）」「時間」「角度」「緯度経度」などいろんなことを表せる（今、あたりまえのことを言っています）。 コンピュータに数字を与えるとき、何も指定しないとただの記号で、ほかの文字と同じ扱いになってしまう。だから「これはいずれかのデータ（型）、固定の文字列ではなく、決まった動き方（増え方減り方、上限下限などの決まりがある）をするものだよ！」と指示しないいけないということだ。 指定するとなにが変わるかというと、それに従った法則で動くようになる。日付だよと指定すれば、「2026/16/35」とかにはならず、日付専用の動きをする。 ……なんだか、なにもかもが、誰かが発明して、整理して運用して「普通のこと」にしてきたんだな。とても勉強になっている。 「今やった作業を他人に説明するときにはなんて言ったらいいのだろう」ということからして、疑問ばかりだ。言葉が合っているか、他人に伝わるか（相手のレベルにもよるし、自分がわかるかもあるし）、説明できるか。ひっかかりがちな性格のせいでなかなか進まないけど、おもしろくはある。 やったことをPushしようとしたらリポジトリにあるデータとちがうよ！とエラー。あれ……Pullしたはずなのになあ。 hint: Updates were rejected because the tip of your current branch is behind, hint: its remote counterpart. If you want to integrate the remote changes, hint: use ‘git pull’ before pushing again. hint: See the ‘Note about fast-forwards’ in ‘git push –help’ for details. ...

最初は、Hugo Bear Blogというテーマ（外観）で、トップページから中に入ったところに、記事が並ぶだけのサイトにした。サイドバーとかがない、とにかくシンプルなタイプ。月ごとの記事数をまとめられるようアーカイブの設定はしてみたけれど、結局日付とタイトルだけがズラズラ並んでしまうのでちょっと目が疲れる。 10日くらい書いてみて、やっぱり、タイトル日付と冒頭数行が見えるようなテーマの方がよい気がした。そこで、Hugoのテーマを眺めてみて、PaperModというのに変更。これもシンプルなデザインで、記事の一覧とアーカイブだけじゃなくて、検索機能もついているみたい。 PaperModのテーマをダウンロードしてきて、hugo.tomlの中の設定を変更して……みたけれど、Hugo Bear Blogのときの設定のままじゃうまくいかない。Geminiは「そのまま使えますよ！」って言うけどそんなことない。これだけのことがなんて大変なんだ。いろんな人の解説を見て、あちこち直して、なんとか希望通りになった。 のだが！ そこから何回Git Pushしても、ブラウザ上では変わらない。なんで？ GitHubのリポジトリを見たら赤い×印がついている。Cloudflareでエラーが起きているみたい。なによもう。エラーログがきちんと出ていた。それによると、Cloudflare Pagesで設定しているHugoのバージョンが合っていない？　ということのようだ。そうなの。知らなかった、ごめん。ここは手動で指定するようだ。何でも勝手に整えて合わせてくれるわけじゃないのだね。 Cloudflare Pagesにあるサイトのデータを開き、settingの中のEnvironment variables（環境変数）にあるHUGO−Versionを変更。やっとデータをきちんと読んでくれた。 エンドユーザーというのは勝手なもので、いつも、誰かが整えて維持管理してくれている便利なものを、ただそういうものとして使うだけ。毎回感謝するわけでもなく、でもうまくいかないときにはすぐに他人のせいにする。いかんな。 おじいさんみたいなことを言ってしまったけど、他人のせいにする前に、ちょっと調べよう。大事なことだよ。 あと、山本貴光さんが「自分でプログラムを書いてみるとわかるけれど、『そのとおりにやってるのに動かない！』となった場合、結構な割合で人間の入力ミスだったりする」と言っていた。ほんとにそう。打ち間違い、入れてはいけない改行やスペース、記述する場所の間違い。……気をつけよう。

考えていることの置き場所にするために、Hugoでこのブログを構築した。 この数年は、日々のメモをCosense（旧Scrapbox…こっちの名前のほうがわかりやすかった）の非公開プロジェクトでとっている。ブラウザでどのパソコンからもiPhoneからも書き込めるし、たくさんページがあっても重くない。記事同士でリンクを貼ったり（張ったり？）タグをつけたりしなくても、コトバで探せて検索しやすい。内容は主に、日録とか、占いやカードリーディングの結果とか、書いてる記事のメモとかだ。ブラウザで検索した内容を書き写したりURLを張ったりすることもある。Evernoteも使っていたけど、あれってあんまり開いて後から見たりしなかった。 でもCosenseにはフォルダという考え方がないから、ページがすごく増えてきて、ちょっとどうしようかなあという感じだった。 それで、Obsidianだ。Macbook AirとiPhoneにいれていたけれど、あんまりうまく使えてなかった。どっちかというと、クローズドで管理したい内容を書く（小話とか）ためにしか使っていなかった。Cosenseから、そして以前momonoteに書いたものや、もっと前のテキストデータとかを、だんだん整理していこうと思っている。 いろんな人の、ツールの使い方を見るのがおもしろい。まとまったものにしようという人が多いと思うけれど、わたしはただ、自分の書いたものを捨てられない貧乏性なだけだけど。

「Hugo」というのは、「Go言語で書かれた静的サイトジェネレーター」なのだそうである。初心者なので、こういう言い回しをされるとちょっと困る。 つまり、 Hugo：「Go言語」で書かれた、「静的サイトジェネレーター」という、コマンドラインインターフェース（文字列で入力された指示を受け取るしくみ）で動くアプリケーション であると。 「Go言語」はGoogleが開発したプログラミング言語で、人間にとってはシンプル（人間にとって。文法が少なく、書き方がある程度きまっていて、例外ルールが少ない）で、高速（コンピュータにとって。大量の書類を素早く処理できる）であることが特徴とのこと。 「コマンドライン」というのも、CLI（コマンド〈指示〉＋ライン〈文字列〉＋インターフェイス〈それを人に対して表示して、コンピュータに動作させるためのしくみ〉）をのものを指すこともある、というので曲者だ。 難しいな、専門用語。操作するのときにはなんとなくわかっていても、作業ログをとろうとしたときに「なにをなにでどうしたんだっけ？」となることがある。 言葉の意味や定義でひっかかってしまうのは、自分で取材記事を書くときに気をつけてきたせいもある。自分でよく理解しないまま、相手が「こう言ってたから」と書いてしまうと、やっぱり読み手には伝わってしまう（相手がその分野に詳しい人だったり、きちんと読む人だったりしたらなおさら）。よく上司に「自分でよくわからないまま書いただろう」と指摘された。だから、最終的には「コマンドラインで操作する」と書くのだとしても、「なにをなにでどうしたか」は頭の中で分解できていないといけないと思ってやっている。

ローカルで確認しながらつくったウェブサイトを、GitHubのリポジトリとCloudflare Pagesを接続して公開までできた。 途中でGeminiが言ってる画面にならなくて接続先をまちがってたりしたけども、なんとかできたー！ 最後に、hugo.tomlの中のURLを修正したら、個別のページもちゃんと開けるように。 おお、達成感。 今はウェブ上にいろいろプラットホームが整えられて、アカウントをつくれば簡単に写真も文章も載せられる。でも、いちいち「トップページに画像をつけると見られやすいですよ！」「人気のタグをつけると検索で見つけられやすいですよ！」とか言ってきて、もういいのやめてよ、ってなってしまう。うんざり。 それに、誰かがゼロからつくったものに乗っかるだけなのも、なんだか嫌だなと思うようになっていた。 ……まあ、とはいえGeminiに聞きながらだし、静的サイトジェネレーターとかGitHubとかをつかっているのでまったくゼロからではないが。 こんなシステムをつくった人たちはすごいよね。アイデアもすごいし、実現したのもすごい。だからせめて、わたしも手を動かして、「どこが合ってる／間違ってる」「簡単そうに見えてそんなことない」といったことを体感したいと思ったのだ。 体感て大事だよね。体感するからこその達成感。 それから、Gemini（生成AI）の出力した内容をを「いちいちチェックする」ということもちゃんとやろうと思った。 おしゃべりの文字面だけだとそれらしい感じで納得させられてしまうけれど、実作業がともなうと、途端に「あなたの言ったとおりにならないよ？」ってことがいっぱいあると気がつく。もちろん自分が入力間違えたり違うファイルに書きこんでたりする場合もあるが、AIが間違っていることもけっこうある。スクリーンショットを見せたりエラーメッセージを示したりして「あなたが想定したようになってない。実際はこうなってるよ？」とつっこんだら、Geminiが「ああ、わたしの勘違いでした！」とか言ってくる。相談しながら進めていく感じ。 「AIにやらせておけばいい」「人間より間違いが少ない」なんてことは言えないんだな、と“わかる”。 どうしても書きたいことがあるわけではないが、誰にも邪魔されずに書ける場所をつくることができたかな。 っていうのを真夜中に書いて更新したつもりだけど、反映されない！　なんでだ。と思ったらもしかして、日付か？　えっ、真夜中はまだ前日のカウントなの？ 明日に続く。 時間の設定ってどうなってるんだっけ？ トップページが寂しいからなにか増やしたい。 iPhoneから更新するの、どうやる？ 一日に2つ以上の記事はつくれないの？ 個別記事の中に別の記事のリンクを貼るにはどうする？

昨日、思い立ってテキストだけの、すごくシンプルなウェブサイトをつくってみた。 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よ、たぶん、昨夜うまくいかなかったのもここだよきっと。 ...

なるほど。手を動かしてみないとわからないんだな。 ここまでGeminiに相談しながらやってみた。 言うとおりにやるだけじゃなくて、うまくいかないときの「とりあえず」の対処を考えたり、こう言ってるってことはこうかな、とか考えたりしながら作業。Geminiよ、あんたはこう言ってるけど、「ホントはこうじゃないの？」とか。 何でも、自分の手元で試してみるしかないね。 ただのテキストサイトといっても、紙に書いて壁に貼るのとはわけが違う。たのしいな。

このブログの最初から、さかのぼった日付で作業中（だから実際にはこれも6/21に作成したもの）。 ふむふむ。ターミナルから新規記事作成の指示をしなくても、content > post の内に直接mdファイルを作ったっていいんだよね？ そしたらターミナルでデスクトップ上のquickstartフォルダ（ウェブサイトデータ一式があるところ）に移動してhugo server -DでHugoを起動する、と。 そしたらローカルで表示するためのURLが出るから、それをChromeに貼って表示する。 うむ。とりあえず、そういうことで合ってるみたい。

このブログの最初から、さらにさかのぼった日付で作業中（だから実際にはこれも6/21に作成したもの）。 ひととおり、Mac miniでつくったウェブサイトのデータをGitHubのリポジトリにプッシュして保存。 それを、自分のMacBook AirにDL（プル）した。 ターミナルを立ち上げてcdでフォルダ移動して、すでにおなじみのhugo server -Dを入力した。……けれど、そもそもMacBook AirにはまだHugoが入ってなかった。 Hugoを入れるために、まずMacPortsを入れる。そしてHugoをインストール。 よし、MacBook Airでも、準備ができたね。