【Hugo初心者】真似するだけサイト作成ガイド【ゆるゆる解説】 #

「Hugo初心者・ゆるゆる解説」シリーズでは、Hugoとは何なのかという説明から始まり、超初心者である私が実践した導入からサイト公開・運用までの具体的な手順、費用を最小化する具体的なクラウドサービスの選定について解説し、また、超初心者の私がつまづいたポイントも惜しみなく公開しています。

前回記事では、Hugoがなぜ優れているのか、そして運用費を極限まで抑えるカラクリを説明しました。
【Hugo初心者】独自ドメインサイトで最安1円運用&高速化を叶える方法【ゆるゆる解説】 >

スピード、セキュリティ、そしてコスト。サイト運用において最も重要な３要素で、HugoはWordPressを大きく上回るメリットを提供します。
特に、サーバー代をゼロにすることで、あなたは金銭的なプレッシャーから解放され、本来注力すべき「コンテンツの質」に全エネルギーを注ぎ込めるようになります。

シリーズ２回目となる今回の記事では、ターミナルを使いながら、Hugoのインストールまでの準備、そしてあなたのパソコンの中にサイトの雛形を作成する具体的な手順を、超初心者目線でゆるく噛み砕いて解説していきますので、一つひとつ一緒にやっていきましょう。

なお、私がHugo構築に使っているPCはmacbookですので、windows環境とは多少の違いがあるかもしれません。もし見たいと言う要望があればwindowsでも試してみます。

第1章：むずかしくない！Hugo導入のプロセス #

難しい話はしたくないので、あなたは美味しいコロッケメーカーの社長のつもりでふんぞり返っていてください。

社長はコロッケを作るのにHugo工場をご希望なんですね、セキュリティもしっかりしてるんでいいですよね。私はすでにHugoを稼働させている経験のあるコンサルタントのような者です。貴社の工場導入準備の段階(Hugo導入)から、出来上がったコロッケを店頭に並べるところ(サイトの公開)、さらには規格化されたコロッケの大量生産用に生産ラインを整える(ページ追加の利便性向上)ところまでサポートさせていただきます。

それでは、まずは社長の右腕となるターミナルさんをご紹介します。実は、この会社の立ち上げ時からいてくれてる方なんですが、もしかしてお会いするのは初めてですか？

1. ターミナルさんとの出会い #

Hugo導入の第一歩として、まずはターミナルを立ち上げます。

私の場合、ターミナルさんの執務室はLaunchpadにある「その他」でした。もしターミナルさんが見つからないときは、直接お名前で呼び出してみましょう。Launchpadで「ターミナル」と検索します。目の前まで来てくれます。

今にも泣きそうな顔に見えてしまいますが、頼れるやつです。社長、何卒彼と仲良くやっていただくようよろしくお願いいたします！

Hugoサイト構築においてターミナルさんは重要な人材です。社長の指示でサクッと動いいてくれるし、社内の状況や進捗も報告してくれますよ。ターミナルさんへの指示は社長からのトップダウン形式ですが、社長の指示によっては今後仲間入りするいろんな方に彼から指示出ししてくれるプレイングマネージャーです。彼には部長職についてもらいましょうか。

ターミナル部長への指示の仕方ですが、部長の肩を叩くと、メモ帳みたいな画面が出てきますね。この画面でターミナル部長とチャットをしていきましょう。そうだ社長、彼とのチャットでは、指示書をセットできたらエンターで送ってあげてくださいね。

2.施設導入や人事もできる新入社員Homebrewを迎える

「Homebrew」をインストールして設定をおこないます。

Hugoの話じゃなかったんでしょうか…というそこの社長さんも一旦騙されたつもりでHomebrewくんを入社させてください。彼はあなたの会社にも必要な人材だと思います。この後、Hugo工場導入するのめっちゃ楽になりますよ！

さて、ターミナル部長とのチャット画面にはすでに少し英文が書かれていると思いますが、仕事熱心な彼が何かメモをしているんですね。社長は気にせずに「/bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"」と彼につたえておいてください。この指示でターミナル部長がHomebrewを社内に連れてきてくれます。この指示、コマンドって言います。

指示を出すとターミナル部長が動き始めましたね。あれ、途中で止まってパスワードを聞いてきました。ここに何か入力しても表示されませんが、これは部長の仕様です。彼には守秘義務があるんですね。部長はちゃんと伝えたパスワードをこっそりメモしてくれてるんで、社長は彼の仕事ぶりを信じて、パスワード入力後にエンターを押してください。

「Downloading Command Line Tools for Xcode」と言い残して再び部長の動きが止まることがありますが、それならまだ彼は作業中です。ちょっと待ってあげてください。

しばらく経って、「Next steps」と返信もらえましたか？Homebrewが社内に来ている可能性が高いです。

まだ部長就任したばかりのターミナルさんのことをいまいち信用できてない社長は「brew doctor」と彼に問いかけてみてください。「Your system is ready to brew.」と返事がくればHomebrewは社内にいます。「zsh: command not found: brew」って返事されてしまったら、Homebrewが社内で迷子になっているかもしれません。ターミナル部長に指示をして、案内してもらいましょう。

「echo >> /Users/〇〇(ユーザー名)/.zprofile」「echo ’eval “$(/opt/homebrew/bin/brew shellenv)”’ >> /Users/〇〇/.zprofile」「eval “$(/opt/homebrew/bin/brew shellenv)"」

再び部長に「brew doctor」と問いかけて「Your system is ready to brew.」って返事してくれたら入社手続きも完了しています。

3. いよいよ！工場「Hugo」を導入します

新入社員のHomebrewくんには早速最初の仕事をしてもらいます。貴社が要望しているサイト工場「Hugo」の手配をしてもらいます。先程説明した通り、ターミナル部長に言えばHomebrewくんが動いてくれますよ。以下Hugoのインストール手順です。

ターミナル部長への指示は「brew install hugo」です。Homebrewくんの仕事ぶりを確認したいときはターミナル部長に「hugo version」と問いかけます。部長がすぐにHomebrewくんに確認を取ってくれるので、無事にバージョンを報告してくれたらHugo工場の出来上がりです。

4. 後々の作業にも必要になる、GitHubにアカウント登録しておこう

続いて、GitHub( https://github.com/ )にアクセスし、アカウントを作ります。ここは社長御本人が手続きをお願いしますね。GitHubの登録はこのタイミングでなくても構わないんですが、今やっておくことをおすすめします。

というのも、この後の工程でメールアドレスが必要になります。今後の作業によってそのメールアドレスが公開されることもあります。下記の操作にて作成できる非公開メールアドレスを使用すると便利です。

GitHubの画面右上にあるアイコンをクリックして、出てくるメニューから「Settings」へ。
左のメニューのAccessにある「Emails」をクリック。
「Keep my email addresses private」というセクションをオンにすると「数字+アカウントID@users.noreply.github.com」というようなメールアドレスが発行されます。

5. 記録管理のスペシャリストGitの入社手続き

新人のHomebrewくんは働き盛りなので、続いてGitさんを手配してもらいます。GitさんはHugo工場での作業記録を管理してくれる重要な方です。Gitのインストールと設定手順です。

ターミナルに入力してエンター：「brew install git」
Homebrewくんの仕事ぶりを確認したいときはターミナル部長に「git --version」と問いかけます。無事にバージョン教えてくれたらGitさん入社済です。Gitさんもターミナル部長に言えば動いてくれます。
「git config --global user.name “任意のユーザーネーム”」「git config --global user.email “メールアドレス”」をターミナルに入力します。このメールアドレスは今後の作業で公開されるため、先程発行した非公開メールアドレスを使うのをおすすめします。

これで準備完了です！貴社も工場運営の体制が整ってきましたね！！

第2章：ローカル環境でサイトを作成！ #

パソコンの中でサイトを作るところまで一気にやっていきます。社長、コロッケをつくるための工場が社内にできているので、工場内の整理をしながら作業を開始しましょう。そうそう、会社には守秘義務がありますね。工場内で行う製品作成は社内(パソコン)での作業なので、社内外の誰かに悪意やミスがない限り、秘密が守られています。つまり、この作業で出来上がるサイトは作業中のパソコンに入れる人以外には見えないので、ご安心ください。

6. 貴社のコロッケを作成する手順 #

ターミナル部長に「hugo new site サイトフォルダ名」「cd サイトフォルダ名」と指示を出します。社内に新しく部屋が作られたので、社長も皆さんもどうぞお入りください。

「git init」と指示すると、先ほど入社していただいたGitさんが早速記録を管理し始めます。

それと、先にコロッケの調味料を入手しておきましょう。ほとんどは無料で提供してもらえますよ。私がおすすめするのはAnankeです、部長に指示しましょう。「git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke」

あとは、「ls -F」のコマンドで工場のこの一室に何が入っているのか一旦確認しておきましょう。表示された中に「hugo.toml」があれば次に進みます。

7. コロッケのレシピ

「nano hugo.toml」の指示でターミナル部長とのチャット画面が変わりましたね。設計図のようなものをお見せしている状態です。次の４つの行があるか確認しましょう。なかったり、表示が違えばご修正をお願いします。

baseURL = “/”
languageCode = “ja-jp”
title = “美味しいコロッケ”
theme = “ananke”

修正したらControl+Oで上書き保存→Enterでファイル名を確定→Control+Xで終了してください。

8. 社内確認

ターミナル部長へ「hugo server」と指示すると、Hugo工場でレシピ通りにコロッケが作られ、社内のテスト用店舗に並びます。これで社内確認ができます。社長はブラウザで店舗の場所「http://localhost:1313/」を開いてください！Anankeで味付けされた「コロッケ」がありますね。しかしこれは社内確認用に会社の中に作った店舗になります。つまり、表示されるサイトはパソコンの中にあるものなので、全世界に公開されていません。

社長、おめでとうございます！基本的なサイトづくりはこれで完了です。確認後はターミナル部長に「ctrl+C」と伝えれば社内確認用のコロッケがなくなりますが、レシピは残ったままです。

まとめ：ふざけているようで、実はローカルでサイトが完成している達成感を味わいましょう #

今回は、読者のあなたに社長となってもらうことで、デモサイトをローカル環境で完成させました。もちろん、まだコンテンツは入っていないので、テキストなどを入れていくことで完成させてください。

私のような初心者にはコマンドもよく意味がわからないので、ローカル環境で特にコンテンツもないようなサイトを構築だけでも本当に時間がかかりました。しかし、今回の記事では、そのよくわからない作業をごっこ遊びというおふざけで下記のように噛み砕きました。

ターミナル部長やHomebrewくんといった重要な社員を雇用し、Hugo工場の設立準備を完了した。
Gitさんを迎え入れ、すべての作業記録（バージョン管理）体制を確立した。
ローカル環境（あなたのパソコン内）で工場を稼働させ、味付け（Anankeテーマ）と具材（コンテンツ）を組み合わせた最初のコロッケ（ウェブサイト）を完成させた。

今回の社長ごっこという茶番に最後まで付き合ってくれたとすれば、サーバー費用がゼロという金銭的なプレッシャーから完全に解放された、持続可能なビジネスモデル（静的サイト）の基盤が築かれているはずです。

次なるミッション：店舗オープンと出荷、店頭での簡易コロッケ作り #

現在、あなたのコロッケは社内のテスト店舗（localhost:1313）に並んでいる状態です。しかし、このコロッケを世界中の顧客に届けるには、「店舗スペースを借りる作業（ホスティング）」、「実店舗にコロッケを並べる作業（自動デプロイ）」が必要です。

次回は、このHugo工場で作った「最高に美味しいコロッケ」を、無料で、かつ最速で世界中に公開する具体的な手順を解説します。そして、筆者が手こずったGit連携や公開時のエラーにも焦点を当て、誰もがスムーズにサイトを運用できる体制を整えます。

次回予告：「コロッケ屋さん」を Netlify で世界公開！手こずったエラーと解決策も公開

ぜひ次回も、この「ゆるゆる解説」にご参加ください。