2018秋の無料相談会
2018秋の無料相談会
2016.09.20
#18
それいけ!フロントエンド

サイトジェネレータ「HUGO」を使って静的サイトを作成しよう

まろ

こんにちは、フロントエンドエンジニアのまろCです。

今回は「HUGO」という静的サイトジェネレータを使った簡単なブログを作ってみます。

HUGOとは

スクリーンショット 2016-01-28 15.29.24
http://gohugo.io/

最近社内でもアツい、Go言語で作られた静的サイトジェネレータです。Octopressより高速にページを生成してくれます。

早速インストール

今回はMacにて動作させてみます。環境は、OSX 10.10.5です。

brew install hugo
cd {project_dir}
hugo new site maroc.com

これで、サイトの雛形ができました。

 

.
├── archetypes
├── config.toml
├── content
├── data
├── layouts
└── static
cd maroc.com
hugo

上記のようなディレクトリ構造になっているかと思います。

プロジェクトディレクトリに移動してhugoコマンドを叩くと、publicディレクトリが生成され、index.htmlなどのファイルが生成されています。この状態ではデータを入れていませんので、中身は空です。

設定ファイル

ブログ自体の設定は、config.tomlファイルに記述していきます。

 

baseurl = "http://ktkt-.github.io/hugo-test/"
languageCode = "en-us"
title = "maroc.com"

初期の中身は上記のようになっているので、まずはここをbaseurlを自分のドメインにしましょう。タイトルも変更します。

コンテンツの作成

コンテンツ(サイトの中身)は、contentディレクトリに作成していきます。

cd content
mkdir post
cd post
touch firstpost.md

上記の用にディレクトリを作って、Markdown形式のファイルを作成することで、ページになります。

記事を書き始める前に、以下のヘッダー情報も記述しておきます。

date        = "2015-06-21T11:27:27-04:00"
title       = "記事タイトル"
description = "記事の概要"
tags        = ["Development", "Go", "profiling"]
topics      = ["Development", "Go"]
slug        = "";
project_url = "https://github.com/spf13/nitro"

#はじめに
...記事本文

ここにサンプルがありますので、参考になると思います。

テーマの使用

git clone --recursive https://github.com/spf13/hugoThemes.git themes

少し待つと、プロジェクトディレクトリにthemeディレクトリが生成されてきます。すごい数のテーマがインストールされます。。。

使うには……

hugo -t twentyfourteen

上記のコマンドを打つだけです。

今回はtwentyfourteenという、WordPressっぽいテーマを使います。

ローカルで確認

HUGOにはサーバーの機能もついています。

 

hugo server --watch --theme=twentyfourteen

上記のコマンドを打つことで、ローカルでサイトを立ち上げられます。

スクリーンショット 2016-01-28 20.40.37

http://localhost:1313/へアクセスしてみると、サイトが出来上がっていることが確認できます。

hugoのあとにserverをつけることで、サーバーが起動します。

  • --watch: 変更を監視する(記事を更新したら、ブラウザが自動でリロードされる)
  • --theme: 指定のテーマで起動する

同時に上のオプションも指定しています(このとき、変更をかけてもpublicには吐き出されません)。config.tomlに記述しているbaseurlも無視されます。

外部に公開

今回は、GitHub Pagesに公開してみたいと思います。Github上でリポジトリを用意している前提で、進めたいと思います。

流れとしては、

  1. publicディレクトリでgit init
  2. publicディレクトリでgit remote add
  3. gh-pagesブランチの作成
  4. config.tomlにGitHub PagesのURLを記載
  5. hugoコマンドでコンパイル
  6. gitのgh-pagesブランチにpush

となります。

cd public
git init
git remote add origin https://github.com/ktkt-/hugo-test.git
git branch gh-pages
git checkout gh-pages
cd ../
hugo -t twentyfourteen
cd public
git add .
git commit -m "new"
git push -u origin gh-pages

一連のコマンドは上記のとおりです。

URLを見てみましょう。

スクリーンショット 2016-01-28 20.40.19
http://ktkt-.github.io/hugo-test/

無事、表示できました!

まとめ

コマンドでコンテンツや設定をおこなっていくので、慣れないと難しいかもしれません。しかし、HTMLを生成する静的サイトを、高速で、しかも中身をMarkdownで書けるのは、エンジニア心が踊ります。

テンプレートの作成もできるよう、もっと使いこなしてみたいと思います。それでは。