読者です 読者をやめる 読者になる 読者になる

UTALI

書き溜めておいた技術記事や旅行記のバックアップです。

Go言語の静的サイトジェネレーター Hugo を使ってみる

f:id:mochizuki_p:20170213214140p:plain

WordPressのようなCMSは便利な様で便利でない・・

MySQLを始めとするデータベースの設定は面倒ですし

だからと言って、HTML手打ちに戻るなんて論外です。

しかし、静的サイトジェネレーターを使えば、CMSの感覚で簡単に静的サイトをデプロイすることができるよ。というのが今回の記事の伝えたいところです。

Go言語で構築されたHugoは非常に優れた特徴を持った静的サイトジェネレータです。

  • 豊富なテンプレート
  • 生成速度の速さ
  • CMS並みの豊富な機能・拡張性

インストール

MaxOS(OS X)

もしGo言語が入っていない場合は

brew install go 

Hugoをインストール

brew install hugo

インストールを確認

$ hugo version
> Hugo Static Site Generator v0.18.1 BuildDate: 2016-12-30T02:12:41+09:00

サイトを作成

最初にサイトの名前を決めてhugo new siteで生成します。 ここでは例としてMyHomepageにしてみましょう。

hugo new site MyHomepage

成功するとカレントディレクトリにMyHomepageが生成されます。 中に入って続きの作業を行います。

テーマを導入

サイトを生成する前に、テーマを選ぶ必要があります。

ご覧の通り/themesにはまだ何のテーマもインストールされていません。

$ tree -a

├── archetypes
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

公式からテーマを選びましょう。確認できる限り全て無料でした。

Hugo Themes Site

f:id:mochizuki_p:20170226180223p:plain

今回はこの"TRACKS"を利用してみることにしましょう。

/themesに入ってGitで取得します。

$ cd themes
$ git clone https://github.com/ageekymonk/hugo-tracks-theme.git

設定ファイル(config.toml)

$ cd ..
$ vi config.toml

デフォルトではこの様な内容になっているはずです。

languageCode = "en-us"
title = "My New Hugo Site"
baseurl = "http://example.org/"

ここにテーマを指定するために以下の内容を追記します。 そして上記の値も適切に書き換えます。

languageCode = "ja-ja" # 言語のコード
title = "MyHomepage" # サイトのタイトル
theme = "hugo-bootstrap-premium " # 使用したいテーマ、後で変更することも可能

これでとりあえず起動することが可能

hugo server 

ブラウザでlocalhost:1313にアクセスしてみよう

f:id:mochizuki_p:20170226180240p:plain

この様にトップページが表示された。

f:id:mochizuki_p:20170226180232p:plain

しかし、これではあまりに殺風景だ。記事を投稿する。

hugoでは記事はマークダウン形式で、content/post以下に作成する

以下のコマンドを打つとcontent以下に新しい記事のひな形が作成される

hugo new post/hello-world.md
```
tree -a


├── archetypes
├── config.toml
├── content
│   └── post
│       └── hello-world.md
├── data
├── layouts
├── static
└── themes

hello-world.mdの中を編集しよう

+++
date = "2017-02-26T17:39:47+09:00"
title = "hello world"

+++

+++で囲まれたtoml形式の記述でタイトルなどのメタデータを決定する。

その下にマークダウン形式で記事を書くことができる。

試しに以下の内容で書いてみる

+++
date = "2017-02-26T17:39:47+09:00"
title = "hello world"
# もし下書きとして公開したくない場合は以下をコメントアウト
# draft = true
+++

# Hello World

Hello World

保存したらさっきと同じ様にしてデプロイ

hugo server

f:id:mochizuki_p:20170226180303p:plain

/hello-worldにアクセスすると

f:id:mochizuki_p:20170226180252p:plain

もしなんとなく導入したテーマが気に食わなければ簡単に交換することができる。themesに任意のテーマを導入して、オプションで指定するだけで変更できる

hugo server --theme=hugo-bootstrap-premium

f:id:mochizuki_p:20170226180318p:plain

次回の記事では実際に作成したサイトをデプロイするところまでやってみたいと思います