ブログ挑戦開始早々に直面したトラブル

初心者でありながら、Hugo や Cloudflare 、GitHub などを組み合わせて作るブログに果敢に挑戦してきました。
奮闘しながら着実に作業を進め、いよいよ最初の記事を公開することができ、嬉しさと感動で浮かれていた私に、突如何の前触れも無くひとつの問題が降りかかってきました。
これまで機能していた「ローカルプレビュー」が、なぜか上手く機能しなくなってしまったんです。今回は、「ローカルプレビューが機能せず顔面蒼白事件」の顛末についてまとめました。

はじめに

知識ゼロ、ずぶの素人、頭の中はほぼ空っぽの超初心者がブログをやってみようと決意。

その過程で
「なんか難しすぎんかい？！」とつまずいた事、
「どゆこと？？」とよく分からなかったこと、
「へぇ〜、そういう感じなのね」と学んだこと、
「おっ？なんか身になったっぽい」と得られたことなど、あれこれ記録しています〜

ローカルプレビューとは？

簡単に言うと、自分の PC の中だけで本番前の確認をする機能のことです。
今回の私の場合に当てはめてもう少し丁寧に言うなら、自分の PC 上で作成したブログ記事を、公開前に自分の PC の中だけで完成イメージを確認するための機能、ということになります。

初心者の私が挑戦したブログの手段は、必要なサービスやツールを組み合わせて作る方法で、ブログ記事は Obsidian というノートアプリで作成しています。
Obsidian で書いた記事を、Hugo というツールが HTML の Webページに変換してくれます。
つまり Hugo は、Obsidian で作成した文章ファイル（ Markdown ファイル ）を、Webブラウザ上で見ることができるようにサイトを生成してくれるのです。

このような手法でブログを作成しているので、公開する前に、実際に公開したらどのように見えるのか？を確認する作業がとても重要になります。

（ブログの手段やブログ組み立ての流れについては、『ブログ挑戦に必要なもの３つ』や『ブログ記事を書くために Markdown と仲良くなる』の記事の中でまとめています）

突然機能しなくなったローカルプレビュー

ブログ公開に向けて準備している段階では、ローカルプレビューで下書き段階の記事を確認することがちゃんと出来ていました。
ところが、５記事公開して以降、突然プレビューが出来なくなってしまいました。

ここまで奮闘しながら一歩一歩ブログ公開に向けて進んできて、晴れて最初の記事を公開する所まで辿り着き、嬉しさと感動で有頂天になって浮かれていた所に、青天の霹靂とはまさにこのことです（泣）
この時、自分の顔を見てはいませんが、一瞬、顔面蒼白になってたと思います(›꒪⌓︎꒪‹)ﾁｰﾝ………

だって、プレビュー出来なきゃブログ公開出来ないじゃ〜ん（泣）
もしくは、ぶっつけ本番でブログ公開すんの？いや、怖すぎるぅー！無理ぃー！（泣）

「えっ？てことは詰んだ？ブログ挑戦終了？！」

さっきまで楽園にいたはずなのに、急に奈落の底に突き落とされましたぁ。。。＿|¯|○
やはりこの世は諸行無常だぁぁぁ〜

ん？諸行無常？ってことは、状況はまた変わるってことか？！

対処法の模索

諸行無常が真理なら、この苦境もまた変わっていくはず！
ということで、現代では神頼みの他に AI という新興ツールにも頼って対処法を模索していきます。

早速 AI に「助けてくれ〜！」と救援要請したところ、毎度お馴染み「ひたすら状況確認の繰り返し〜」のドロ沼にはまりました（　´д｀）ぇ～

AI ：「まず〇〇を確認してください」
AI ：「日付が未来になってませんか？」
AI ：「新規記事はどのフォルダに作成しましたか？」
AI ：「最近、設定ファイルの中身を編集しましたか？」…etc.

他にもあれやこれやと一度に捲し立てられて、私の頭はフリーズ寸前の混乱状態に陥りました。

私 ：「AI よ、頼むからひとつずつサポートしてくれ」
私 ：「依頼人（←私）の頭は複雑なことに対処するようには出来ていないのさ（゜-Å) ホロリ」

AI ：「もちろんです。一つずつ進めましょう」

私 ：「……（ ￣-￣;）」

誤公開を避けるための対策

ここで前提として少し触れておきたいのですが、ブログ運営の中で公開すべきでないもの（下書きや練習など、公開を前提としないもの全て）を、誤って公開してしまう事がないよう、あらかじめルールを決めて安全対策を徹底しています。

その一つとして、まずフォルダを分けて管理しています。
下書き用フォルダと、公開用フォルダです。
と言っても、下書き用フォルダに記事があっても Hugo はそれを非公開と認識してくれません。

そこで、フロントマターで２重に安全対策をとっています。
フロントマターとは、ファイルの冒頭にあるメタデータ¹のことで、タイトルや日付、カテゴリーなどの設定情報をプログラムに読み込ませるために使用されます。
要するに、設定手段の一つみたいなものです。
Hugo におけるフロントマターの役割は、動かすために必要な「システムへの指示書」と私は理解しています。

このフロントマターで公開・非公開を指定することで、コントロールすることが可能になります。この２重の安全装置によって、誤公開を避ける仕組みを構築しています。

ローカルプレビューの仕組み

自分の作成したブログ記事がWebブラウザ上でどう見えるのかを確認する際、Hugo を起動するコマンドをターミナルで実行します。（ターミナルの詳細に関してはこちら）
すると、フロントマターが “公開” 指定となっているものはプレビュー表示されます。
この時、“非公開” 指定のものは表示されません。

これだと、まだ未完成のブログ記事で下書き段階のものをプレビューしようとすると、フロントマターを “公開” に指定してやらないと確認が出来ません。
でも毎回それをしていると、こんがらがって誤公開のリスクが高まります。

そこで、フロントマターが “非公開” 指定のものもプレビューできる別のコマンドを使います。
これを使えば、誤公開のリスクを避けて、下書き段階の記事もプレビューすることが可能になります。

こうして問題発生以前は安心できる状態で、見出しの大きさや文字の色、改行やリスト表示など実際の表示確認をしていました。
ところが問題発生以降は、フロントマターが “非公開” 指定の記事のプレビューが出来なくなってしまいました。

（ちなみに、私は割と慎重なタイプなので念には念を、という感じで誤公開を避ける安全対策を講じていますが、最終的には GitHub に push といって、データを送らないと公開にはならないので、要領のいい人や詳しい方はここまでしないのかもしれません。

ただ私は全くの初心者である上に、おっちょこちょいのすっとこどっこいなので、端折らず丁寧に慎重にいった方がいいだろう、という判断からこのように運用してます〜）

見つけた一時しのぎの対処法

さて、AI との状況確認のやり取りが延々と続くも、一向に解決が見通せないまま疲弊してきた所に、やっと一筋の光が見えてきました。

フロントマターが “非公開” 指定のものがプレビューできるコマンドを実行した後、直接プレビュー用の URL を試す、という方法です。
ここで普段プレビューしていた URL の末尾に、下書き記事の URL の末尾部分を直接入力して Enter してみたら、なんと、下書き記事が表示されたんです(´⊙ω⊙`)

といっても、記事一覧があるトップページはプレビュー出来ない状態は相変わらずで、直接 URL を入力してやれば、該当記事のプレビューを確認することはなんとか出来る、という状況です。

やはり、トップページもちゃんとプレビューできる本来の状態に戻って欲しいので、その後も引き続き AI と格闘していました。
そして、AI がひとつの提案をしてきました。（設定ファイルの編集）
実はこれ、この問題の打開策だったんです！

ですが、ここまで疲労困憊で、さらに、これまで出来ていたことが特に何もしていないのに突然出来なくなってしまった状況で、AI の提案を本当に実行していいのか不安になってしまい、ここで「もういいや ＼（－－）／ 　諦める」となってしまいました(^^;;

そんなわけで問題発生以降は、トップページのプレビューは出来ないまま、さらに、下書き記事は直接 URL を入力して表示させる、という一時しのぎの方法でブログ挑戦を続けていました〜

「ローカルプレビューが機能せず顔面蒼白事件」ついに大団円を迎える

つい最近まで一時しのぎの方法でプレビュー確認していたんですが、ブログを育てていく中で必要に迫られて、もう一度この問題に向き合うことになりました。

私は複数の AI を課金せずに無料の範囲内で使っているのですが、今回は前回とは別の AI を使ってブログの新たな取り組みの作業中でした。
その中でトップページのプレビュー確認が必要になり、この問題について AI に相談したところ、考えられる原因と解決策をサラッと示してくれました。

それは、「Hugo が記事数によってトップページに表示するセクションを自動的に切り替えてしまった」ことが原因らしいです。

というのも、最初は下書き用フォルダにしか記事がなかったので、Hugo はこのフォルダをメインで表示するフォルダと判定していた。
ところが、記事を公開した後は、公開用フォルダに記事が増え、Hugo がこっちのフォルダをメインで表示すると、自動で判定が切り替わった。
そのせいで、本来表示されるべきものが表示されない問題が発生した。

これは実際に作業している自分の感覚としても、しっくりくる内容だったので、非常に納得できました。
そして、解決方法も示してくれました。
これは前回、最後に諦めてしまい実行しなかった打開策と同じ方法でした。（実は同じと気づいたのはこの記事の執筆中です∑(ﾟДﾟ)）

今回は、以前の疲労困憊の時とは違い、気持ちもリセットされていたので、怖がらずに強い気持ちで解決手段を実行することが出来ました。
具体的な説明は省きますが、Hugo に下書き用フォルダと公開用フォルダの両方をメインと判定するよう設定ファイルを編集しました。

これによって問題が解決し、わざわざ直接 URL を入力する必要もなく、トップページもちゃんとプレビュー確認出来る状態、つまり本来あるべき状態に戻りました〜🎊

まとめ

👉 諦めなければ、いずれ道は開ける！

今回は、突然 Hugo の自動判定が切り替わったことにより、ローカルプレビューが機能しなくなり、あわやブログ挑戦終了？！の瀬戸際に立たされることになりましたが、諦めなければいずれ道は開けるもんなんだなぁ、と少し不思議な気持ちになりました。

というのも、これまでの自分を振り返ってみると、「自分には無理無理」と勝手に決めつけて、早々に諦めてしまうことがそれなりにあったんですが、今回の件で最初の AI が打開策を出してきた時に、勇気を出してそれを実行していれば問題発覚時に解決出来ていて、約２か月も問題を抱えたままでいることは無かったんですよね。

つまり、自分でここが “限界” と決めてしまったことで、問題解決まであと一歩、という所で力尽き自ら成功を放棄してた、そんな風に見えました。
とはいえ、トラブルを抱えた最中に自分が今どの位置にいるかなんて分からないし、「もうこれ以上やってられっか！」と投げ出したくもなります。人間ですから。

そんな時は、いったん休息を挟む。
疲れた頭と心を、緊張状態から解放してあげる。
十分回復して臨戦態勢を整えて再度問題に取り組んだら、意外とあっさり解決に向かう。
こういうもんかもな、って思いました。

今もまた別の困難にぶつかっていますし、この先もいろんな問題に直面するはずです。
どうにもならず苦しくなってきたら、この記事を読み返してまずは休息を取ろうと思います〜

同じように困難にぶつかって苦しくなっているそこのあなた！そう、あなたです、あなた！
一息入れてリフレッシュしませんか〜☕️　いずれ道は開けますから〜
ダイジョブ、ダイジョブ〜ヽ(´▽｀)/