【Hugo】静的サイトジェネレーターでのサイト作成方法

たまたまWEB系のデザイナーさんと少しお話する機会があって、WordPressって移転とかめんどくさいですよねーという話から、今は静的サイトジェネレーターでサイト作るのが良いですよ！と聞いたのでHugoを試してみました。

＜メリット＞

• サーバー費用 0円　独自ドメイン可
• 表示が高速
• マークダウンで記述できる
• PHPとかSQLとかDBみたいなものは無い！使用技術がシンプル

＜デメリット＞

• 環境構築が基本コマンド。エンジニアではない人は敷居が高い！（ググって、その通りにやればなんとかはできます…）

環境構築

Hugo（Windows版）のダウンロード

OSのよってデータが違います。今回はWindows版をダウンロード。

ディレクトリの作成

• C:Hugoに「Hugo」フォルダを作成
• 「hugo_バージョン名_Windows-64bit」フォルダをbinという名前に変えて、C:Hugobinに配置
• C:Hugositesに「sites」フォルダを作成

環境変数の設定

パスを保存して、コマンドを使えるようにします。

せっかくなのでこれもコマンドプロンプトで設定します。

win+Rから「cmd」と検索してコマンドプロンプトを起動

setx path "PATH=%PATH%;C:Hugobin"

と入力。「成功: 指定した値は保存されました。」と表示されればOK

環境パスの設定がうまくいかない時

Hugoのコマンドの前にパスを入れましょう。

C:Hugobinhugo

という感じにする方法もあります。

コマンドが使えるか確認

コマンドプロンプトで下記を入力

hugo version

バージョンが表示されていればOK

サイトの作成

コマンドプロンプトで下記を入力

cd C:Hugosites
hugo new site サイト名

Congratulations! Your new Hugo site is created in C:Hugositesサイト名.とでればOK

テーマのインストール

から好きなテーマを探し、GitHubのパスを控えます。

階層下のthemaのフォルダへ移動し、テーマをダウンロードします。（gitが入っていること前提です）

cd C:Hugositesjsx-methodthemes
git clone https://github.com/yoshiharuyamashita/blackburn.git

サイトを確認

ローカルにてサーバーを起動します。（+テーマも設定）

cd C:Hugositesサイト名
hugo serve -t blackburn

http://localhost:1313/

をブラウザで開いて、サイトを確認します。

基本操作

環境設定

C:Hugositesブログ名config.toml

を開いて編集。

テーマのサンプルを参考にする

テーマの指定

theme = "blackburn"

記事の投稿

hugo new post/hello.md

で記事をポスト

サーバーの再起動

cd C:Hugositesjsx-method
hugo serve

※テーマを指定しているので、serve -tの記述は省ける

※「hugo serve -D」 をつけると “draft = true” とした下記事も表示されるようになります

※「hugo serve -w」（-w）を付けておくと、ファイルの変更がすぐに反映されます。

カテゴリーの設定

タグとカテゴリーの設定

config.tomlに記述

[indexes]
tag = "tags"
category = "categories"

サイドバーのメニューも追記

[menu]
[[menu.main]]
name = "Category"
pre = "<i class="fa fa-list fa-fw"></i>"
weight = 3
identifier = "Categories"
url = "/categories/"

設定用HTMLの設置

• themesblackburnlayoutstaxonomyのフォルダへ移動
• 同階層にあるtag.htmlを複製してcategory.htmlに変更

Netlifyを使ってサイトを公開する方法

GitHubにリポジトリを作成（データを置く）Netlifyでデプロイ（サイトを展開して公開する）してみます。

GitHubにリポジトリを作成

簡単に。

• GitHubのアカウントを作成
• リポジトリを作成。URLを控える
• SourceTreeなどを使って、クローンして繋ぐ
• 作成したサイトデータ（C:Hugositesjsx-methodの階層下!!）をコミット・プッシュして、サーバーに上げる

Netlifyの設定

Get started for freeに従って、記入していきます。

• GitHubを選択
• リポジトリを選択
• デプロイの設定

・master
・hugo_0.51 ※バージョンをつけないと失敗するそうです。あらかじめhugo versionのコマンドで調べておきます。
・public/

サイドにDeploy Siteボタンを押せば、すぐにサイトが公開されます。

他の設定周り

• Hugoのconfig.tomlのbaseURLで設定したURLを記入しておきます。
• Netlifyで、Change Site Nameからサイト名（jsx-method）をいれます

例
https://jsx-method.netlify.com/とか

独自ドメイン設定も可能。

感想

終わってみて。作業的にはすぐにサイト構築できるので簡単！です。

※ 普段コマンド打たないので、調べながらそれなりに時間かかりましたが。

情報をアーカイブしていく、WIKIが好きなのでExtendScriptのメモ用にちょっといじっていこうと思っています。

追記

ワンクリックで作成できるテンプレートも用意されてました。まずはここから始めてもよいかもしれません。