「 Hugo 」は簡単! バージョンに注意しながら3ステップで導入してみる | SiTest (サイテスト) ブログ

メニューボタン閉じるボタン

「 Hugo 」は簡単! バージョンに注意しながら3ステップで導入してみる

近年、 Jekyll や Hexo といった静的サイトジェネレータが話題になりましたね。
その中でも2017年に注目を浴びているのが、超高速 Golang 製の「 Hugo 」です。

何が超高速なのかというと、ビルドの速さです。
Hugo だと1記事あたり1msでビルドすることができます。
1000記事を1秒でビルドできるのは魅力的です。

ただ、導入する際にバージョンに関して躓くことがあります。
今回はその Hugo の概要から、バージョンに注意しながら導入までを紹介していきます。

※ この記事は Mac で Homebrew によりインストールすることを想定しております。

超高速静的サイトジェネレータ「 Hugo 」とは?

Hugo Top

冒頭でもお伝えした通り、 超高速にWebサイトを生成してくれる Golang 製の静的サイトジェネレータです。

Hugo の操作は CLI なので、ターミナルで完結できます。
また、記事投稿の際はマークダウンを使用することができるので、エンジニアにとっては嬉しいメリットです。

他の静的サイトジェネレータに負けを劣らず、テーマが豊富です。
Webサイトにあった、デザインを見つける可能性が高くなります。

導入方法としては、Mac で、 Homebrew を用いて簡単にインストールすることができます。

他にも、 Netlify というホスティングサービスとも相性がよかったりします。

それでは、ウェブサイトを立ち上げていきましょう。

3ステップでウェブサイトを立ち上げよう

導入から、テーマの選定、ローカルサーバーの立て方まで、バージョンを意識しつつ紹介していきます。

1. 「 Hugo 」を導入しよう

Homebrew が入っていれば、下記のコマンドで簡単に導入できます。

brew install hugo

ただ、ここで注意点があります。
下記のコマンドで Homebrew をアップデートしていないと、現在の Homebrew にあったバージョンで Hugo をインストールしてしまいます。

brew update

導入後、 Hugo のバージョンを変えるのは容易ではないので、注意して導入してください。
Hugo が入れば、下記のコマンドでバージョンを確認できます。(現バージョン v0.20.7)

hugo version

Hugo Version

hugo-test のディレクトリができあがりますので、ディレクトリ構造を確認しましょう。

cd hugo-test
ls

Hugo ディレクトリ構造

上記のようなディレクトリ構造になっております。
基本的には、 themes/ ディレクトリに Hugo で用意されているテーマをインストールして、大枠を作っていきます。

それでは、テーマを選定してインストールしていきましょう。

2. テーマを選定しよう

まず、テーマを選定していきましょう。

http://themes.gohugo.io/

テーマ選定

試しに右上の「 Beautiful Hugo 」を選んでみます。

テーマ バージョン確認

ここで注目するべきは、 MINIMUM HUGO VERSION です。
その名のとおり、 Hugo の最小バージョンを示しています。

Hugo 現バージョンは v0.20.7 なので v0.17 は越えてます。
問題ありませんね。

それでは、このテーマをインストールしていきましょう。

テーマのページをスクロールすると Installation にインストール方法が書いてありますので、そのとおりに行っていきましょう。Hugo テーマインストール コマンド

ただ、 themes/ ディレクトリはすでにあるので、 mkdir themes は省きましょう。

cd themes
git clone https://github.com/halogenica/beautifulhugo.git beautifulhugo

git clone コマンド

インストールできましたね。
それでは、ローカルサーバーを立ち上げていきましょう。

3. ローカルサーバーを立ち上げよう

立ち上げる前に記事を作成しましょう。
themes/ から1つ階層をあがったところで下記のコマンドを叩いてください。

hugo new post/test-post.md

すると、 content/post/ の直下に test-post.md というファイルが作成されるので、開いて見ましょう。

content/post/test-post.md

date は日付
draft は下書きかどうか
title は記事のタイトルを表しています。

「+++」より下にマークダウンで記事の文章を書くことができます。

記事もできたので、ローカルサーバーを立ち上げていきましょう。
下記のコマンドをプロジェクトルートで叩いてください。

hugo server -t beautifulhugo -D

Hugo ローカルサーバー立ち上げ

-t はテーマ名を指定するためのオプションです。
-D は記事ファイル中で draft = true になっている記事も表示します。

それでは http://localhost:1313/ にアクセスしてみてください。

Hugo サイト 立ち上がり確認

立ち上がりましたね。これで完了です。

まとめ

いかがでしたでしょうか?
今回は、 Hugo の概要からローカルサーバーの立ち上げまでを説明しました。

Hugo と Netlify で簡単にサイト運用もできるので試してみてください。
ちなみにですが、 Netlify でビルドするときにもバージョンに注意してください。
現在、 Netlify に搭載されている Hugo のデフォルトのバージョンは v0.17 です。
違うバージョンでビルドしたければ、 hugo コマンドを hugo_0.18 のように指定してビルドしてください。

Netlify について詳しくはこちらの記事を参考にしてください。

Netlify 初心者必見! Bitbucket 上のコードをビルドして静的サイトを公開してみる

次回は Netlify CMS について書いていこうと思います。

今すぐお気軽に
ご相談ください。

0120-315-465

(平日 10:00~19:00)

今すぐお気軽に
ご相談ください。

0120-315-465

(平日 10:00~19:00)

グラッドキューブは
「ISMS認証」を取得しています。

認証範囲:
インターネットマーケティング支援事業、インターネットASPサービスの提供、コンテンツメディア事業

「ISMS認証」とは、財団法人・日本情報処理開発協会が定めた企業の情報情報セキュリティマネジメントシステムの評価制度です。

いますぐ無料で
お試しください。

トライアル終了後も
無料でご利用いただけます。

お名前【必須】
メールアドレス【必須】
※携帯・フリーアドレスは不可
電話番号【必須】

利用規約』『プライバシーポリシー』に同意する