HugoとVercelでブログを作る方法
初めてHugoやGitを使う人向けに、ステップバイステップで紹介
どんなサイトが作れるのか
このサイト（Oilabo）は Hugo で作り、Vercel で公開しています。
Hugo とはテーマ（テンプレート）を用意しておけば、あとはテキストを書くだけで自動的にサイトを構築（HTMLを生成）してくれる無料のソフトウェアです。（静的サイトジェネレーターといいます。）
Vercel はHugoサイトを公開するのに使える無料のWebサービスです。
Hugoのテーマは公式サイトの「Hugo Themes」で公開されているので、まずはどんなサイトが作れるのか見てみてください。
私は何の予備知識もなく始めてこのブログを公開するまでに３日かかりましたが、以下に手順をまとめましたので、私のような初心者の方でもすぐに始められると思います。
コマンドラインなどの取っ付き難い要素はいっさい排除してお送りします。
必要なもの
- Hugo（インストール不要ですぐ使える）
- Gitlabアカウント（ここにサイトのデータを保管する。日本語に対応しているのでおすすめ。）
- Github Desktop（Gitlabにデータをアップロードするのに使う。簡単に使える。）
Vercelでサイトを公開するまでの手順
「Hugo Themes」で公開されているテーマを使って、Vercelでサイトを公開するまでの手順です。
1. Github Desktopをインストールする
Github Desktop から「Download for Windows」をクリックするとダウンロードできます。
ダウンロードしたexeを起動すると自動でインストールが始まり、完了すると Github Desktop が起動します。
Giithubにログインするか聞かれますが、アカウントを持っていなければ「Skip this step」でスキップしてください。（持っている方はログインして大丈夫ですが、この記事ではGithubではなくGitlabを使います。）
2. Hugoをダウンロードする
HugoのリリースページからHugoをダウンロードしてください。
私のPCはWindows64bitなのでhugo_extended_0.82.0_Windows-64bit.zipを選びました。
ダウンロードしたzipを展開してhugo.exeを好きな場所に置いてください。
ここではC:\hugo\hugo.exeに置いたとして説明します。
3. Gitlabアカウントを作成
無料のGitlabアカウントを取得します。
Gitlabのサインアップページで必要事項を記入して「Register」をクリックします。
するとGitlabからメールが届くので「Confirm your account」をクリックします。
Gitlabにサインインしたらまずはサイトを日本語表示に切り替えましょう。
ページ右上から「Preferences」をクリックし基本設定のページを開いたら、ページ下部の「Localization」で「Japanese - 日本語」を選択。「Save changes」をクリックしてページを更新すると日本語になります。
4. Gitlabで新規リポジトリを作成
リポジトリとはファイルを管理しておくためのフォルダみたいなものです。
このリポジトリにHugoサイトのデータを保存することになります。
まずはページ上部の [+] をクリックして「新規プロジェクト」を選択します。
「Create blank project」を選択
プロジェクト名に「test」と入力したら「プロジェクトを作成」をクリックします。 （他は入力する必要ありません。）
Gitlabに空っぽのリポジトリが作成されました。
「Git のグローバル設定」に書いてあるuser.nameとuser.emailはあとで使います。
git config –global user.name “UserName”
git config –global user.email “1234567-UserName＠users.noreply.gitlab.com”
このページはそのままにしてステップ５に進みます。
5. Github Desktop の設定をする
Github Desktop を起動し、「Clone a repository from the internet.」を選択します。
Gitlabのリポジトリページで「クローン」をクリック。「HTTPでクローン」の欄に書いてあるリンクをコピーし、
それを 「Clone a repositry」のURLタブに貼り付けます。
「Local path」は「Choose…」をクリックしHugo.exeを置いたフォルダを選択てください。
入力したら「Clone」をクリックします。
ここでC:\hugoを見てみると、testというフォルダが作られているのがわかります。Gitlabに接続してリポジトリのクローン（コピー）を作ったということです。以後このC:\hugo\testフォルダを「testリポジトリ」と呼びます。
次にこのtestリポジトリの設定をします。上部のメニューから
「Repository」→「Repository settings…」を開きます。
「Git config」をクリックし、user.nameとuser.emailをGitlabからコピペして「Save」してください。
また、「Ignored files」のタブを開いて何か記述があれば、その記述を全て削除しておきます。
これでリポジトリの設定は終わりです。これからこのtestリポジトリにサイトのデータを入れていきます。
5. テーマをダウンロードする
「Hugo Themes」から好きなテーマを選びダウンロードしましょう。
ここでは「Hugo Bootstrap v4 Blog」を使ってみます。
Githubページ右上の「Code」から「Download ZIP」をクリックするとテーマをダウンロードできます。
テーマをダウンロードしたら、testリポジトリにthemesというフォルダを作って、そこにダウンロードしたzipを展開します。
展開すると出てくるフォルダhugo-theme-bootstrap4-blog-masterの「-master」の部分を消してフォルダ名をhugo-theme-bootstrap4-blogにしてください。
ダウンロードしたテーマのフォルダの中にexampleSiteというフォルダがあるので、その中身を全部testリポジトリに移動させます。
(下の画像のような感じでC:\hugo\test\themes\hugo-theme-bootstrap4-blog\exampleSiteの中身を移動。)
testリポジトリの中はこんな感じになります。これがHugoサイトの素になります。
6. Gitlabにデータをアップロードする
Github Desktop を開いてください。C:\hugo\testの中に追加したファイルが左側にずらっと表示されていると思います。
「Summary（required）」の欄に何か書く必要があります。
なんでもいいので今回は「ういーっす」と書きました。その下の「Description」は無記入でOK。
Summaryを書いたら「Commit to main」をクリックしてください。 これでリポジトリ内の変更を確定したことになります。（この確定をGit用語で「コミット」といいます。）
続いてファイルをGitlabにアップロードします。
「Publish branch」をクリックすると、Gitlabのログイン情報を求めらるので、Gitlabのユーザー名とパスワードを入力してください。
すると、リポジトリ内のファイルがGitlabにアップロードされます。（このアップロードをGit用語で「プッシュ」といいます。）
完了したら、Gitlabのリポジトリページを更新してみてください。ファイルが追加されているはずです。
7. Vercelでサイトを生成する
Vercelのサインアップページを開いて「Continue with Gitlab」をクリック。 Gitlabのアカウントを使ってVercelにログインできます。
Vercelにログインしたら、ダッシュボードを開き、「New Project」をクリックしてください。
自分のGitlabのリポジトリを選んで「Import」ボタンをクリック。
「PERSONAL ACCOUNT」を「Select」。
そのまま「Continue」をクリック。
「FRAMEWORK PRESET」の中から「Hugo」を選択。（その他は入力の必要なし）
その下の「Deploy」をクリックするとサイトの生成が始まります。（VercelがHugoを使ってサイトを構築してくれる）
生成に成功すると「Congratulations!」と表示されます。
ですが、このままだとサイトのデザインが崩れていたり、404エラーが出ると思いますが大丈夫です。今からこれを修正します。
8. URLを決めて完成！！
Congratulationsの画面から「Open Dashboard」をクリックしてダッシュボードを開きます。
ページ上の「Settings」から設定画面に入り、
左側メニューの「Domains」をクリックしてドメインを変更します。
「Edit」をクリック。
サイトのURLを変更できるので好きなように変えてください。（.vercel.appの部分はそのまま）
ここでは「test-oilabo.vercel.app」にして「Save」します。自分のサイトのURLが変わります。
そしたら、testリポジトリにあるconfig.tomlをメモ帳などのテキストエディタで開き、baseurlの値を今変更した自分のサイトのURLに書き換えます。
※テーマによってはconfig.tomlがないかもしれないので、その場合はメモ帳などで下記のように書いてconfig.tomlと名前をつけてtestリポジトリに保存してください。
baseurl = "https://test-oilabo.vercel.app/"
書き換えたら上書き保存します。
Github Desktop を見ると今更新したconfig.tomlの情報が表示されていると思います。
「Commit to main」をクリックしてこの変更を確定します。
「Push origin」をクリックすると更新したconfig.tomlがGitlabにアップロードされます。
そしたら改めてVercelで自分のサイトを見てみてください。どうですか、今度は正常に表示されていませんか？
正常に表示されていればおめでとうございます。Hugoサイトの完成です！
こんな感じでGitlabにアップロードしたサイトの素となるデータ（テーマや記事など）を、VercelがHugoを使ってHTML化し、それを公開しているというわけですね。VercelはGitlabのファイルに変更があると自動的にサイトを更新してくれるので、今後はGitlabにデータをアップロードするだけで勝手にサイトが更新されていきます。便利ですねー。
今回作ったサイト：https://test-oilabo.vercel.app/
余談
長くなりましたが、とりあえず今回はここまでにします。
もっと具体的なHugoの使い方とかも書きたいのですが、私もまだHugo初心者なので、またそのうち記事にしたいと思います（笑）
Hugoを解説しているサイトは沢山あるのでそちらを参考にしてください。
余談ですが、Gitを使うのにコマンドラインでパパっとやってる方は本当に尊敬しますね。私はコマンドラインを使うのを最初から放棄して Github Desktop をインストールしました（笑）コミット？プッシュ？なにそれ的な感じでしたので。
なのでこの記事では、コマンドラインを使う方法や、専門用語(？)はできるだけなしで書いてみました。Hugoを初めて使ってみようという方の参考に少しでもなれば嬉しいです。
以上
関連記事: