初心者がCloudflareでブログに挑戦しようと行動を開始したら、どこからともなく急に現れた " Hugo " と " Astro " 。
「誰あんたら？いったい何者？」状態の私はまず、この２つの選択肢のうち一方を選ばなければいけないという岐路に立たされました。
まずは、" Hugo " と " Astro " についてどんなものか知ることからスタートです。


はじめに

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

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



Hugo と Astro

Cloudflareでブログを公開するためには、ブログの中身を用意しなければなりません。
中身、つまりブログに書く文章や画像をパソコンの中で用意する際に、この Hugo や Astro というツールを使うと簡単なんだそうです。（AI 調べ）


この Hugo や Astro は、専門用語で「静的サイトジェネレーター」と言い、静的サイト＝作り置きのサイトを生成してくれるツールのことです。
静的サイトのイメージは、作り置きのパン屋さんです🥐
あらかじめ完成形を作っておくので、表示される内容が変わることはありません。（誰が見ても同じ）


対して、動的サイトのイメージは、注文を受けてから作るレストランです🍳
なので、表示される内容が変わることがあります。（人によって内容が変わる）


例を挙げるなら、
このブログ『知識ゼロからの試行錯誤 Lab Log 』は「静的サイト」
Amazonなどのネット通販サイトは「動的サイト」です。


噛み砕いて言うと、静的サイトジェネレーターというのは、材料となる「記事の文章」と「デザインのひな形」を入れると、「完成したブログのページ」（お店に並べられる商品）が出てくる機械のようなイメージのものです。
要するに、ドラえもんの道具みたいな便利アイテムなんですね〜



それぞれのメリット・デメリット

Hugo や Astro がどういうものなのか、なんとな〜く分かったところで、違いは何なのさ？ってことで、それぞれのメリット・デメリットを比較・検討してみました。


【Hugoのメリット⭕️👍】

  1. 高速（数百～数千記事になっても生成が非常に速い）
  2. 情報が豊富（ブログ用途で長年使われてるので、検索して問題解決しやすい）
  3. 長期運用しやすい（仮に Hugo をやめても、記事のファイル、画像はそのまま残る）

【Hugoのデメリット❌👎】

  1. デザイン変更が少し難しい
  2. 動的な機能が苦手（検索機能やコメントなど）

【Astroのメリット⭕️👍】

  1. 将来性が高い（ブログ以外のサイトや Webアプリまで作れるらしい）
  2. デザインの自由度が高い（おしゃれなサイトや独自のレイアウト）
  3. コンテンツ管理が優秀（記事管理やタグ管理など便利な機能あり）

【Astroのデメリット❌👎】

  1. 初心者にはやや難しい
  2. ブログだけならオーバースペックになりがち


これらのメリット・デメリットを比較してみて、正直なところ Astro に魅力を感じました。
ただ、初心者には少しハードルが高そうだし、デザインとか余計なことに気を取られて、本来の目的である「ブログ記事を書いて公開する」ことに集中できず、ブログ継続に支障が出るかもしれないと思いました。


なので、ここはおとなしく自分の目的に合った Hugo を選択することにしました(-∀-｡)ぅんぅん
ブログの土台作りは Hugo で決定〜🎉



ここから技術設定スタート

まず、ブログの土台作りのざっくりとした流れはこうです。

  1. Hugo のインストール
    ↓
  2. テーマの導入
    ↓
  3. テスト記事で練習

前置き１

まず最初に、前提条件をお伝えしておきます。
Hugo のインストール手順は OS（Windows / Mac / Linux） によって違うということで、私の場合は Mac（Apple M1）を使っているので、これから展開する体験談は Mac を前提にしたものとなります。


⚠️ Mac 以外で同じように作業しようとお考えの方がいらっしゃいましたら、くれぐれもご自身で情報をきちんと調べて確認の上、作業にお進みください。


前置き２

次に、Hugo のインストールは「ターミナル」を使って行います。
AI は当然のように言ってきますが、初心者にいきなり「ターミナルを開いて〇〇を実行してください」なんて言われても「は？」って固まりますからーっ🤚 (°◇°;) ゲッ！！！


「ターミナルでコマンド実行」とかなんとか言うらしいのですが、初心者的イメージでのターミナルは、コンピューターにあれこれ指示する指揮官とか司令塔みたいなソフトで、コマンドは命令文のことのようです。
つまり、ターミナルというソフト（ Mac の中に元々入っています）を使って、自分のコンピューターに「指令：〇〇を実行しろ！」と命令するものだと私は理解しました。


実はこのブログ挑戦の数ヶ月前くらいに、偶然このターミナルを一度使ったことがありました。
それは、たまたま「ローカルAI 」という言葉を知って、自分も取り入れてみたい！と思ったのがきっかけで使うことになりました。


その時が初めましてだったんですが、この経験のおかげで少しはビビらずに何とかやれるかも、という気持ちを持てました。
（ちなみに、この時のローカルAI は一旦取り入れることに成功はしたんですが、自分の PC のスペックが心もとないことが原因で、断念することになりました）


ターミナルを使うことは２度目ということもあり、そこまで恐れることはないと思ったんですが、それより Hugo をインストールするのに何でターミナルが必要なの？ Hugo のサイトからダウンロードするとかじゃないの？と、インストール方法に不安を覚えましたね(;￢_￢)ｼﾞｰｰｯ…
AI が言うことを全て鵜呑みにしちゃいけないって言うし、本当に大丈夫かいな？と。


そこで、ググって調べてみたんです。
いくつかのサイトをチェックしたら、内容は専門的で難しすぎてよく分からないものの、 Hugo のインストールについてはどのサイトも、どうやらターミナルでコマンド実行してインストールしているようだという事が分かりました。
AI よ、疑ってすまん！ということで、ここから本格的にインストール作業に突入します。



Hugo のインストール

ここからは何が何だかよく分からないまま、AI が言う通りにコマンド実行していきます。
コマンドは AI が教えてくれるので、それをコピーしてターミナルにペーストする、というのを繰り返す作業なので、楽っちゃ楽です。


まず最初に AI は、必要なものがあるかどうかを確認するためのコマンド実行を指示してきました。
結果、必要なものが無かったので、Hugo より先にそれをインストールしなければいけないということになりました。

Homeblew 誰あんた？パート２

必要なものとは、「 Homeblew 」という Mac 用のアプリ管理ツールで、Mac にいろいろな開発ツールを簡単に入れるためのアプリストアみたいなものらしいです。


Hugo を入れようとしてるのに、いつの間にか Homeblew が必要ってどういう事？！とツッコミたくなるのを我慢しつつも、作業当時の私はよく理解できておらず、前に進むのが怖く少し不安な気持ちでいました。（なんか変なことになって Mac おかしくなったらどうしよう〜って）


そんなビビりな私に AI は丁寧に、Homeblew を入れるのは「 Mac に工具倉庫を作るようなもの」で、Hugo を入れるのは「その倉庫にブログ工場（Hugo）を置くようなもの」と言い、写真や書類を消したり、Mac の設定を大きく変えたりする作業ではない、と安心させてくれました。


そこで、必要な作業なんだからと意を決して先に進むことにしました。
ここからまた、AI が言う通りにコマンドを実行していきます。
内容は少し複雑で別に覚えなくても良さそうなので、ざっくり家づくりに例えて作業の中身を説明すると、


Homebrewを設置したい
↓
その前に基礎工事が必要
↓
基礎工事の材料を取り寄せ
↓
基礎工事完了
↓
Homebrew設置
↓
Hugo設置


こんな感じのコマンドを実行していきました。
紆余曲折ありながらも、なんとか Hugo インストールの成功まで辿り着きました〜👏🎊



ブログの作業場所を決める

次に、まずどこにブログを作るかを決めます。
新しくブログ用のフォルダを作ってやるんですね。
そして、ターミナルで作業する際は、そのブログのフォルダにいることが、とても重要になってきます。


この時の私は、「 Hugo でブログを作るには、ターミナルで色々と指示しないといけないものなのか？イメージもわかないし難しそうだな…」と、また不安になっていました。
勇気を出してやっとこさ Hugo のインストールを乗り越えたのに、またターミナルでコマンド実行することがあるの？と怪訝に思っていたんですね (¬_¬ )


すると AI は、最初の設定ではターミナルを使うけど、記事を書く作業そのものはそれほどターミナル漬けではない、とあれこれ説明してくれました。
作業当時の私はその説明内容がピンとこなかったんですが、イメージとしては、


最初の設定　　　　　　★★★★★★★★★★（かなり使う）

記事を書く日常　　　　★★☆☆☆☆☆☆☆☆（少し使う）


なんだそうです。これは分かりやすかったですね。


さらに、Hugo は WorldPress より技術寄りなので、完全にパソコン初心者で、ターミナルは一切触りたくないという場合は、Hugo でも少しハードルがあると。
でもあなた（← AI から見て私のこと）は、Homebrew を入れたし、Hugo を入れたし、最初の一番分かりにくい部分を乗り越えている、と励ましてくれました😳


おだてられると単細胞の私は「そうかな（〃￣∇￣ポ）」と調子にのっちまって、言われた通りのコマンドを実行していましたwww
その後はエラーが出たりしながらも、なんとか自分のブログフォルダを作ること＝ブログの作業場所ができました〜👏🎊



まとめ

【 Hugo や Astro （静的サイトジェネレーター）とは】

👉文章を書いたら自動でブログのページに変換してくれる便利な道具のこと。
言わば、ブログ工場ってとこかな🏭

【 Hugo と Astro のメリット・デメリット】

👉どちらも一長一短あって、魅力的〜😍
初心者なら Hugo
凝りたい、または複雑なことにも挑戦したいなら Astro

【 Hugo のインストール】

👉ターミナルという、司令塔みたいなソフトを使ってコマンド（命令文）をキーボード入力する方法でインストールする。

さらに、ターミナルを使ってブログの作業場所を作ってやることで、ブログの土台の基礎が完成〜👏🎊

Note1 ↑ちょっとでも理解しようと、こんな感じで自分のノートアプリに Hugo インストールの流れをまとめています〜