hugoとNetlifyでブログを作成する方法

HugoとNetlifyでブログを作成してみたので、その手順を紹介していきます。

sasaendo

1 minute read

皆さんはブログを書いてみたい。始めてみたいと思ったことはありますか？

私もそうした思いがあり作成してみました！

今回は、このブログサイトを作った方法を共有していければと思います。

目次

  1. 事前準備
  2. Hugoのインストール方法
  3. プロジェクト立ち上げ
  4. GitコマンドでHugoのテーマを実装
  5. NetlifyでWEBに公開

1. 事前準備

初めに

  • ターミナル（シェル）の使い方
  • Homebrewのダウンロード
  • Githubアカウント作成とgitのインストール

上記を行う必要があります。

ターミナル（シェル）についてはググって調べてみてください。

そんなの知っているよ！

という方はHomebrewのダウンロードですね。こちらも公式サイトでコマンドコピーしてターミナル（シェル）でダウンロードを行うことが可能です。

以下の記事でHomebrewのインストール方法を紹介しているので見てみてください。

・便利なパッケージ管理「HOMEBREW」のインストール方法を紹介 ( https://www.awesome-360.com/post/2021/07/how_to_install_homebrew/ )

正常にHomebrewをダウンロードすることができたら、Githubアカウント作成とgitのインストールです。

事前にアカウントを作成する必要があるのでやっておきましょう。

HomebrewのコマンドでGitをインストールします。

こちらも以下の記事でインストール方法載せてます。

・便利なパッケージ管理「HOMEBREW」のインストール方法を紹介 ( https://www.awesome-360.com/post/2021/07/how_to_install_homebrew/ )

Gitのコマンド等については説明省きます。

2.Hugoのインストール方法

次のコマンドでインストールを行います。

brew install hugo

正常にコマンドが終了すればインストール完了です。

3. プロジェクト立ち上げ

次にhugoのコマンドでプロジェクトを作成していきます。

hugo new site 任意の名称

割と任意の場所で良いみたいです。私は今後のことも考えてSSDの中でフォルダを掘って作成しました。

正常にコマンドが終了すれば、これでOKです！

4. GitコマンドでHugoのテーマを実装

まずは作成したプロジェクト直下で以下のコマンドを実行します。

git init

こちらを行わないと以下のコマンドが使えません。

その後、 Hugoのテーマ一覧 より好きなテーマを選びます。 私は今回 こちら を選びました。

好みのテーマが見つかったら、

cd themes

でthemesに移動して、サブモジュールとして追加します。

git submodule add https://github.com/jpescador/hugo-future-imperfect

git submodule add の後は選んだテーマのgithubのURLになります。

ここまでくれば後は設定やコンテンツを作成するだけです！

私はイチからできる気がしなかったので既存のものをベースに使うことにしました。

おそらくthemesフォルダにいると思うので、プロジェクト直下に戻ります。

cd ..

その後以下のコマンドを実行。

cp -r  themes/hugo-future-imperfect/exampleSite/* .

この後プロジェクト直下のconfig.tomlを修正して、余分な.mdファイルを削除したり記事追加を行いました。

ローカル上で動かしてみます。

hugo server

以下のURLで確認できます。

(http://localhost:1313/)

確認できましたか？

それではいよいよWEBに公開してみましょう！

5. NetlifyでWEBに公開

まずはGithubでリモートリポジトリを作成します。

Githubリモートリポジトリ作成

Githubのリモートリポジトリと紐付け 

git remote add origin git@github.com:作成したリモートリポジトリ

コミット 

git commit -m "コミットコメント"

プッシュ 

git push origin master

これで紐付けが完了したので、次から追加や修正した際は、以下の流れでプッシュできます。

全てをステージに追加 

git add -A

追加・変更がステージにあるか確認 

git status

コミット 

git commit -m "コミットコメント"

プッシュ 

git push origin master

gitの使い方を軽くレクチャーしたところでやっと、 Netlify です！

まずはアカウントを作成して、Create siteのページが現れるかと思います。

Netlifyサイト作成

以下のようにビルドの設定を行います。

Netlifyサイト作成

hugoのバージョンは

hugo version

で確認できます。

Deploy siteボタンをプッシュしてWEBへの公開が完了しました！

最後までみていただきありがとうございます！

【関連記事】

  • 便利なパッケージ管理「Homebrew」のインストール方法を紹介