HugoとVercelでブログを作る方法

HugoとVercelでブログを作る方法
目次

初めてHugoやGitを使う人向けに、ステップバイステップで紹介


どんなサイトが作れるのか

このサイト(Oilabo)は Hugo で作り、Vercel で公開しています。

Hugo とはテーマ(テンプレート)を用意しておけば、あとはテキストを書くだけで自動的にサイトを構築(HTMLを生成)してくれる無料のソフトウェアです。(静的サイトジェネレーターといいます。)

Vercel はHugoサイトを公開するのに使える無料のWebサービスです。

Hugoのテーマは公式サイトの「Hugo Themes」で公開されているので、まずはどんなサイトが作れるのか見てみてください。

私は何の予備知識もなく始めてこのブログを公開するまでに3日かかりましたが、以下に手順をまとめましたので、私のような初心者の方でもすぐに始められると思います。

コマンドラインなどの取っ付き難い要素はいっさい排除してお送りします。


必要なもの

  • 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を使います。)

github


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

サインインページで先ほど入力した情報を使ってサインインしたら登録完了です。

Gitlabにサインインしたらまずはサイトを日本語表示に切り替えましょう。
ページ右上から「Preferences」をクリックし基本設定のページを開いたら、ページ下部の「Localization」で「Japanese - 日本語」を選択。「Save changes」をクリックしてページを更新すると日本語になります。

gitlab

gitlab


4. Gitlabで新規リポジトリを作成

リポジトリとはファイルを管理しておくためのフォルダみたいなものです。
このリポジトリにHugoサイトのデータを保存することになります。

まずはページ上部の [+] をクリックして「新規プロジェクト」を選択します。

gitlab

Create blank project」を選択

gitlab

プロジェクト名に「test」と入力したら「プロジェクトを作成」をクリックします。 (他は入力する必要ありません。)

gitlab

Gitlabに空っぽのリポジトリが作成されました。

「Git のグローバル設定」に書いてあるuser.nameuser.emailあとで使います

git config –global user.name “UserName
git config –global user.email “1234567-UserName@users.noreply.gitlab.com

gitlab

このページはそのままにしてステップ5に進みます。


5. Github Desktop の設定をする

Github Desktop を起動し、「Clone a repository from the internet.」を選択します。

git

Gitlabのリポジトリページで「クローン」をクリック。「HTTPでクローン」の欄に書いてあるリンクをコピーし、

git

それを 「Clone a repositry」のURLタブに貼り付けます。
「Local path」は「Choose…」をクリックしHugo.exeを置いたフォルダを選択てください。
入力したら「Clone」をクリックします。

git

ここでC:\hugoを見てみると、testというフォルダが作られているのがわかります。Gitlabに接続してリポジトリのクローン(コピー)を作ったということです。以後このC:\hugo\testフォルダを「testリポジトリ」と呼びます。

次にこのtestリポジトリの設定をします。上部のメニューから
「Repository」→「Repository settings…」を開きます。

git

「Git config」をクリックし、user.nameuser.emailをGitlabからコピペして「Save」してください。

git

また、「Ignored files」のタブを開いて何か記述があれば、その記述を全て削除しておきます。

git

これでリポジトリの設定は終わりです。これからこのtestリポジトリにサイトのデータを入れていきます。


5. テーマをダウンロードする

Hugo Themes」から好きなテーマを選びダウンロードしましょう。

ここでは「Hugo Bootstrap v4 Blog」を使ってみます。

Githubページ右上の「Code」から「Download ZIP」をクリックするとテーマをダウンロードできます。

Hugo Themes

テーマをダウンロードしたら、testリポジトリにthemesというフォルダを作って、そこにダウンロードしたzipを展開します。
展開すると出てくるフォルダhugo-theme-bootstrap4-blog-masterの「-master」の部分を消してフォルダ名をhugo-theme-bootstrap4-blogにしてください。

Hugo Themes

ダウンロードしたテーマのフォルダの中にexampleSiteというフォルダがあるので、その中身を全部testリポジトリに移動させます。
(下の画像のような感じでC:\hugo\test\themes\hugo-theme-bootstrap4-blog\exampleSiteの中身を移動。)

Hugo Themes

testリポジトリの中はこんな感じになります。これがHugoサイトの素になります。

Hugo Themes


6. Gitlabにデータをアップロードする

Github Desktop を開いてください。
C:\hugo\testの中に追加したファイルが左側にずらっと表示されていると思います。

Gitlub

「Summary(required)」の欄に何か書く必要があります。
なんでもいいので今回は「ういーっす」と書きました。その下の「Description」は無記入でOK。

Summaryを書いたら「Commit to main」をクリックしてください。 これでリポジトリ内の変更を確定したことになります。(この確定をGit用語で「コミット」といいます。)

コミット

続いてファイルをGitlabにアップロードします。

Publish branch」をクリックすると、Gitlabのログイン情報を求めらるので、Gitlabのユーザー名とパスワードを入力してください。
すると、リポジトリ内のファイルがGitlabにアップロードされます。(このアップロードをGit用語で「プッシュ」といいます。)

プッシュ

完了したら、Gitlabのリポジトリページを更新してみてください。ファイルが追加されているはずです。

Gitlub


7. Vercelでサイトを生成する

Vercelのサインアップページを開いて「Continue with Gitlab」をクリック。 Gitlabのアカウントを使ってVercelにログインできます。

Vercelにログインしたら、ダッシュボードを開き、「New Project」をクリックしてください。

自分のGitlabのリポジトリを選んで「Import」ボタンをクリック。

vercel

「PERSONAL ACCOUNT」を「Select」。

vercel

そのまま「Continue」をクリック。

vercel

「FRAMEWORK PRESET」の中から「Hugo」を選択。(その他は入力の必要なし)
その下の「Deploy」をクリックするとサイトの生成が始まります。(VercelがHugoを使ってサイトを構築してくれる)

vercel

生成に成功すると「Congratulations!」と表示されます。

ですが、このままだとサイトのデザインが崩れていたり、404エラーが出ると思いますが大丈夫です。今からこれを修正します。


8. URLを決めて完成!!

Congratulationsの画面から「Open Dashboard」をクリックしてダッシュボードを開きます。

vercel

ページ上の「Settings」から設定画面に入り、
左側メニューの「Domains」をクリックしてドメインを変更します。

Edit」をクリック。

vercel

サイトのURLを変更できるので好きなように変えてください。(.vercel.appの部分はそのまま)
ここでは「test-oilabo.vercel.app」にして「Save」します。自分のサイトのURLが変わります。

vercel

そしたら、testリポジトリにあるconfig.tomlをメモ帳などのテキストエディタで開き、baseurlの値を今変更した自分のサイトのURLに書き換えます
※テーマによってはconfig.tomlがないかもしれないので、その場合はメモ帳などで下記のように書いてconfig.tomlと名前をつけてtestリポジトリに保存してください。

baseurl = "https://test-oilabo.vercel.app/"

vercel

書き換えたら上書き保存します。

Github Desktop を見ると今更新したconfig.tomlの情報が表示されていると思います。
Commit to main」をクリックしてこの変更を確定します。

vercel

Push origin」をクリックすると更新したconfig.tomlがGitlabにアップロードされます。

vercel

そしたら改めてVercelで自分のサイトを見てみてください。どうですか、今度は正常に表示されていませんか?

正常に表示されていればおめでとうございます。Hugoサイトの完成です!

こんな感じでGitlabにアップロードしたサイトの素となるデータ(テーマや記事など)を、VercelがHugoを使ってHTML化し、それを公開しているというわけですね。VercelはGitlabのファイルに変更があると自動的にサイトを更新してくれるので、今後はGitlabにデータをアップロードするだけで勝手にサイトが更新されていきます。便利ですねー。

今回作ったサイト:https://test-oilabo.vercel.app/


余談

長くなりましたが、とりあえず今回はここまでにします。

もっと具体的なHugoの使い方とかも書きたいのですが、私もまだHugo初心者なので、またそのうち記事にしたいと思います(笑)
Hugoを解説しているサイトは沢山あるのでそちらを参考にしてください。

余談ですが、Gitを使うのにコマンドラインでパパっとやってる方は本当に尊敬しますね。私はコマンドラインを使うのを最初から放棄して Github Desktop をインストールしました(笑)コミット?プッシュ?なにそれ的な感じでしたので。

なのでこの記事では、コマンドラインを使う方法や、専門用語(?)はできるだけなしで書いてみました。Hugoを初めて使ってみようという方の参考に少しでもなれば嬉しいです。

以上

関連記事: