前回の記事では、初心者が Cloudflare でブログ挑戦を始めたら、Hugo という便利なツールに出会って、私のブログ挑戦の仲間に加わることになりました。
ブログの土台作りとして、ターミナルの使い方を学び、Hugo をインストールし、ブログの作業場所を作るところまで進みました。
次はいよいよ、ブログの骨組みや外観を決める「テーマの導入」という作業に入っていきます。


はじめに

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

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



前置き

私のこのブログ挑戦は Mac を使って作業しています。
OS の異なる端末では使うツールや手順に違いがあるかもしれないので、あらかじめご承知おきください。


前回の記事で、Hugo のインストールはターミナルを使って作業、ということについて書きましたが、ここでおさらいです。

ターミナルとは、キーボードからコマンド（命令文）を入力して、コンピューターを直接操作するための司令塔みたいなソフトのことです。
最初の設定では、このターミナルをかなり使います。
これから作業に入っていく「テーマの導入」も、ターミナルを使っていきます。



テーマの選択

まずテーマとは、ブログの骨組みや見た目（デザイン）に関わるもので、どれを選ぶかによって、そのブログの印象が大きく変わってきます。
素人のくせに一丁前に「おしゃれでカッコいいのがいいな！」なんて思っちゃうわけなんですよね〜(´∀｀*)ｴﾍ


AI がすすめてきたのは「PaperMod」というテーマです。

  • 軽い
  • シンプル
  • 人気が高い
  • 長く使える

なんだそうで、初心者向けの設定が少ないテーマとして、この「PaperMod」などがよく使われているということでした。


そう言われても、どんなものかピンとこないし、他のテーマも気になるし、ということで、Hugoの公式サイトや、巷のおすすめなんかを調べに行ってみました。
あれこれ情報をゲットして公式サイトを見に行ったんですが、テーマの種類は物凄ぉ〜くたくさんありました。


ゲットした情報から複数のテーマをチェックし始めたんですが、選択肢が多いこともあって正直よく分からんし、「コレだ！」というテーマも特に見つけられませんでした。
AI おすすめの「PaperMod」が一番シンプルで分かりやすそうだな、と思いましたね。
「シンプル　イズ　ベスト！」ということで、「PaperMod」でいいや、となりました〜🎉


今となっては、このシンプルなテーマを選んで良かったな、と満足しています(*´ω｀)ﾉ　ﾊｨ



テーマの導入

どのテーマにするか決まったところで、ここからまたターミナルを使って作業していきます。

実は、「PaperMod」の導入方法は主に３つあるそうなんです。

  1. git clone で導入
  2. Git Submoduleで導入
  3. ZIPをダウンロードしてコピー

ここではそれぞれの導入方法について詳しく触れませんが、それぞれメリット・デメリットがあります。


そして、今回 AI の誘導のもと私が行ったのは⒈のgit clone での導入方法です。
実はこれが後に、混乱の渦に私を陥れる元凶、諸悪の根源「ﾃﾒ、ぶっ飛ばすぞ！オコだぞオコ、怒💢💢」の発端となる出来事であることは、この時は知る由もありませんでした。
（この混乱の渦に巻き込まれて心が折れかけた件については、またいずれ記事にします）


さて、後に降りかかる災難なんて微塵も想定していなかった呑気な私は、AI に言われるがまま、ターミナルでコマンドを実行していきます。
自分の Mac にテーマを入れ、Hugo に「PaperMod」を使うんやで、と教えてやる設定をしていきました。


ここではターミナルの他に TextEdit というMac に元から入ってるテキスト作成や編集用のソフトも使ったりと、不慣れでよちよち歩きしながらも何とか設定作業を完了出来ました。


この時点で、Hugo を起動するコマンドを実行すると、自分のパソコンの中だけで確認が出来るプレビュー画面のURLが表示されます。
この URL で、ブログの完成イメージを確認することが出来るようになります。
これはつまり、私の Hugo ブログがローカル（私の PC の中だけ）で動いている、という状態なんだそうです。


ここでも AI は、あなた（← AI から見て私のこと）はもう、ブログの「工場」を自分で動かしている状態で、しかも、Hugo インストール、テーマ導入、ローカル表示、とここまで全部出来ている、かなり順調です、と持ち上げてくれました（/∇＼） ｷｬ
とはいっても、なんでもかんでも煽ててくる感じじゃなくて、実際出来たこと、つまり事実に対してのフィードバックって感じだったので、こっちもモチベーション維持に繋がりましたね〜
やるじゃん！AI！



テスト記事で練習

ここまで、Hugo インストール、テーマの導入、ローカル表示で確認できる所まで進みました。
土台作りの作業自体はかなり進んだとはいえ、目に見える形としてはまだピンときてない状況です。（ターミナルの作業は見えない作業、という感じです）
そこで、テスト記事を作ってどのように表示されるかを確認する、という作業に入っていきます。これで一気に「ブログ感」が感じられるようになります。


最初は、ターミナルでコマンド実行して、初めての記事のファイルを作ります。そして、

  1. そのファイルを開く
  2. 文章を書く　（←これがいわゆる “記事を書く” です）
  3. 保存する
  4. ブラウザで更新を見る

という流れになります。


まず、AI の指示通りにコマンド実行しましたが、何度もエラーが出て、なかなか思うように前に進めず立ち往生していました。
AI は、原因は〇〇だから、このコマンドを実行して下さい、と言い、そのコマンドを実行してはまたエラー、という繰り返しが何度も続きました。


そもそも原因の特定が違ってるから、そのコマンドを実行してもエラーになるわな、って感じなんですが、AI だって私の作業を実際見てるわけじゃなく、私が文章で行動を伝えてるだけで、そこから判断するわけだから、ズレが出てしまうのかもしれません。


結局いろいろやった結果、原因は、既に初めての記事ファイルは作成済みなので、新しく作れません、ということでした😅
一体どの段階で作成されたのか、よく分かりませんが、ファイル自体は出来てるようなので、まいっか、という感じで先に進むことにしました。


（ AI によると、１回目のコマンド実行で成功していた可能性が高く、その後それに気付かず同じコマンドをもう一度実行してエラーになった、ということらしいです。でも、こっちは AI に言われた通りにやってるんだから、あんたのせいだろ！と文句の一つも言ってやりたかったんですが、グッと我慢しました("￣д￣)けっ! ）


さて、なんやかんやあったけど、初めての記事ファイルを TextEdit で開きます。
（開き方も AI が教えてくれました〜）
ここからは、“ブログを書く側” の作業に入っていきます。


とりあえず、まだ何も編集していないけど、Hugo を起動してローカル表示の URL で開いてみたら、なんかそれらしいものが表示されていました！
ブログのトップページみたいなものですね。
この時はブログタイトルも記事の本文も何も無かったので、本当に生まれたばかりの真っさらな赤ちゃんブログって感じでした🍼


その後、初めての記事ファイルを編集して、「これはテスト記事です」という文章を書き加えました。少し設定をいじったりしながら、再度ブラウザを更新して確認したら、「これはテスト記事です」という短い文章もきちんと表示されて、反映されていることが確認できました〜🎊



ここで気になることを確認✅

“テスト記事を作成” してから、とあることが気にかかるようになりました。
それは…


「このテスト記事ってもう世界に公開されてしまったの？自分以外の誰かに見られるの？」


ということ。


結論から言うと、この時点での状態は「世界に公開されていない」です。
私がローカル表示で確認している URL は私の Mac の中だけで動いている仮のサイトなので、ネット上に出ていないし、URL を送っても他の誰も見られない、という完全にプライベートなプレビュー画面です。
つまり、自分のパソコンの中を見ているだけなので、他の人からは絶対に見えないわけです。


じゃあ、公開されるのはいつなのか？

この先に、GitHub にアップロードして、Cloudflare と連携させるという公開前の技術設定の作業があります。
そこを乗り越えて最後の最後にやっと、初めて世界に公開となります。


なので、心配せずテスト記事で練習できるし、公開に向けての記事の執筆を安心して進めることが出来る状態です。



まとめ

２回にわたってブログの土台作りについて書いてきましたが、実際にやったことはこれです。

  1. Hugo ブログの土台作り
    • Hugo か Astro （静的サイトジェネレーター）は Hugo を選択
    • Homebrew / Hugo のインストール
    • ブログ用のフォルダを作成（ブログの作業場所）
    • ターミナル操作

👉ブログの “箱” を作った段階

  1. テーマ導入
    • PaperMod をGitで取得
    • ブログフォルダの中の “themes” という場所に PaperMod を配置

👉ブログの見た目（デザイン）を入れた

  1. ローカルで Hugo を起動
    • ターミナルでコマンド実行

👉自分のMac上でブログを動かした

  1. テスト記事作成
    • ターミナルでコマンド実行して、初めての記事ファイルを作成
    • TextEdit を使い、本文を追加

👉テスト記事を作ってプレビューできる状態にした（ローカル表示）

  1. ブラウザ確認
    • ローカル用の URL をブラウザで表示
    • 記事が表示されることを確認

👉ブログとしての見た目・動作を確認

ここまでで、ブログの土台作り＝ブログが動くまでの全工程をクリアしました！
こちらの記事で書いた、環境構築の山③を乗り越えたんです⛰️
これでやっとスタートラインに立てた、という状況です。


記事にしてみると、短くあっという間な感じがしますが、実際はこの作業に何日も掛かりました。一歩ずつ一歩ずつ着実に進めていったんですよね〜


ここを乗り越えたことで、Cloudflare でのブログ挑戦が成功に近づいてるような気がして、すごく嬉しかったです(●≧∀≦)ゞｬｯﾀｾﾞ*:ﾟ･☆
この先はさらに難しいことが待ち受けていますが、ひとまずこの余韻に浸ってから、気持ちを新たに、ここからいよいよ『ゼロから始める90日ブログ立ち上げチャレンジ』がスタートします！