Hugo

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

hugo-site-create-netlify

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

<メリット>

  • サーバー費用 0円 独自ドメイン可

  • 表示が高速

  • マークダウンで記述できる

  • PHPとかSQLとかDBみたいなものは無い!使用技術がシンプル

<デメリット>

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

環境構築

Hugo(Windows版)のダウンロード

https://github.com/gohugoio/hugo/releases

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

ディレクトリの作成

  • C:\Hugoに「Hugo」フォルダを作成

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

  • C:\Hugo\sitesに「sites」フォルダを作成

環境変数の設定

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

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

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

setx path "PATH=%PATH%;C:\Hugo\bin"

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

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

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

C:\Hugo\bin\hugo

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

コマンドが使えるか確認

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

cd C:\Hugo\sites
hugo version

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

サイトの作成

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

hugo new site サイト名

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

テーマのインストール

https://themes.gohugo.io/

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

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

cd C:\Hugo\sites\jsx-method\themes
git clone https://github.com/yoshiharuyamashita/blackburn.git

サイトを確認

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

cd C:\Hugo\sites\サイト名\
hugo serve -t blackburn
http://localhost:1313/

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

参考

Hugo を試す(Windows)

基本操作

環境設定

C:\Hugo\sites\ブログ名\config.toml

を開いて編集。

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

https://github.com/yoshiharuyamashita/blackburn

テーマの指定

theme = "blackburn"

記事の投稿

hugo new post/hello.md

で記事をポスト

サーバーの再起動

cd C:\Hugo\sites\jsx-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の設置

  • themes\blackburn\layouts\taxonomy\のフォルダへ移動

  • 同階層にあるtag.htmlを複製してcategory.htmlに変更

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

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

GitHubにリポジトリを作成

簡単に。

  • GitHubのアカウントを作成

  • リポジトリを作成。URLを控える

  • SourceTreeなどを使って、クローンして繋ぐ

  • 作成したサイトデータ(C:\Hugo\sites\jsx-methodの階層下!!)をコミット・プッシュして、サーバーに上げる

https://github.com/min0124/jsx-method

Netlifyの設定

https://www.netlify.com/

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

  • GitHubを選択

  • リポジトリを選択

  • デプロイの設定

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

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

https://jsx-method.netlify.com/

他の設定周り

  • Hugoのconfig.tomlのbaseURLで設定したURLを記入しておきます。

  • Netlifyで、Change Site Nameからサイト名(jsx-method)をいれます


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

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

参考

NetlifyでHugoで作った静的サイトをホスティングしてビルドを自動化する

感想

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

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

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

追記

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

Start with a Template

参考

Netlify CMS(Hugo)でMarkdownで記述可能な無料ブログを構築する(構築編)

まとめ記事の紹介
ABOUT ME
すいみん
東京在住。デザイナー寄りのテクニカルデザイナー。 ブログは技術検証の備忘録として書いています。