Hugoで始めるブログの作り方

プログラミング HugoGo言語HTML

高速ビルドで有名な静的サイトジェネレーターのHugoを使って、ブログの始め方を解説します。
公式サイトはこちら
今回作成するブログはHugo Zenというテーマを利用して作成します。

Hugoのインストール

まずはHugoをインストールしましょう。 github.com/spf13/hugo/releasesからOSにあったバージョンをダウンロードしてインストールしましょう。執筆時の最新バージョンは0.18.1となっています。

OS別のインストール方法

Windows

  1. Windows用のファイルをダウンロードしましょう。(ver0.18.1で64bitなら hugo_0.18.1_Windows-64bit.zip
  2. ファイルを保存し任意の場所に解凍しましょう。(今回は C:\Hugo\bin
  3. exeファイルが出てくるのでhugo.exeにリネーム
  4. hugo.exeの保存場所がC:\Hugo\bin\hugo.exeになっている事を確認

MacOS

brew update && brew install hugo

Linux

  1. Linux用のファイルをダウンロードしましょう。今回はhugo_0.18.1_Linux-64bit.tar.gzをダウンロードしました。
  2. ファイルを解凍した中にhugo_0.18.1_linux_amd64がありますので、そちらを/usr/local/bin/に保存しましょう 3.hugo_0.18.1_linux_amd64hugoにリネーム

コンソールを開いてhugo versionと打ってhugoのバージョンが表示されたらインストール完了です。

Hugoの始め方

まずはHugoプロジェクトを作成から始めます。
プロジェクトを作成したい場所をコンソールで開き、hugo new site [プロジェクト名]で作成出来ます。今回はhugo new site D:\hogehogeでDドライブ直下にhogehogeプロジェクトを作成しました。 作成したらプロジェクト内に入り、hugo server -w -DでHugoのプレビューサーバーが起動し、コンソールが下記の様に表示されると思います。

Started building sites ...
Built site for language en:
0 drafts content
0 future content
0 expired content
0 regular pages created
1 other pages created
0 non-page files copied
0 paginator pages created
0 tags created
0 categories created
total in 8 ms
Watching for changes in [path]{data,content,layouts,static}
Serving pages from memory
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

http://localhost:1313/と表示されていますので、こちらにブラウザでアクセスすると表示されます。今は何も作成していませんので、真っ白なページが表示されると思います。

localhost:1313以外になっている場合がありますので、アクセス出来ない場合確認をしましょう。

Hugoでよく使うコマンド

hugo
  publicに静的サイトをビルドされます。
hugo new [コンテンツ名]
  hugo new post/hoge.mdでcontent/post/hoge.mdが作成されます。
hugo new Site [プロジェクト名]
  hugo new Site hogehogeでhogehogeという名前でプロジェクトが作成されます。
hugo server -w -D
  hugo serverでプレビューサーバーを立ち上げ、-wで自動更新、-Dで下書き記事の表示を指定しています。

テーマの適用

Hugo Zenを作成したプロジェクトに適用したいと思います。
まずは、先ほど立ち上げたサーバーをCtrl+Cで停止して下さい。別途コンソールを立ち上げてプロジェクト内に移動してもいいです。

そうしましたら、Hugo Zenの Installation & Usage に書いてあるgit clone https://github.com/rakuishi/hugo-zen.git themes/hugo-zenを実行しましょう。
そうすると、themeshugo-zenが作られていると思います。hugo-zenを確認しましたら、下記のコマンドを実行して、localhost:1313で確認してみましょう。

hugo server -t=hugo-zen -w -D

Hugoの始め方 で確認したときとは違い、My New Hugo Site などが表示されていたと思います。
My New Hugo Site はデフォルトのサイト名ですので変更をしましょう。config.tomlを編集することで変更できます。まずは開いて確認をして下さい。
初期状態ではlanguageCodetitlebaseurlの3つが書いてあると思います。こちらを以下のように変更してみましょう

languageCode = "ja"
title = "HogeHoge"
baseurl = "http://hogehoge.jp/"
theme = "hugo-zen"

languageCodeはブログの言語を指定します。hugo-zenでは<html lang="ja">で使用されています。 titleはブログのタイトルです。プレビューを確認すると My New Hugo Site が HogeHoge に変わっています。 baseurlはブログの投稿先のURLを指定します。 追加でthemeと書いていますが、こちらはテーマを事前に指定してやることで-t=hugo-zenを指定してやる必要が無くなります。

記事を作成して確認

記事を作成する前にhogehoge/themes/hugo-zen/archetypes/default.mdhogehoge/archetypes/default.mdにコピーしてhogehoge/archetypes/default.mdを開いて下さい。
date = "now()"date = ""に書き換えて保存をして下さい。
古いバージョンではnow()を書いておくことで作成した日付が自動で挿入されるようになっていましたが、v0.18からnow()があるとエラーが出るようなりました。他のテーマを使う際にも確認しておくことをオススメします。

ブログ記事を作成する場合hugo new [コンテンツ名.md]で記事を作成出来ます。

hugo new hogehoge.mdと入力して実行してみましょう。
contentにhogehoge.mdが出来たと思います。開いて確認をすると下記の様に書いてあると思います。この+++で囲まれている所をフロントマターといいます。こちらを編集してみましょう。

+++
title = ""
tags = ["",""]
slug = ""
date = "2017-02-22T15:26:15+09:00"

+++

titleは記事のタイトルです。今回は"Hello World"にします。 tagsはタグです["hugo","hoge"]としてみます。 slugは記事のURLです。何も入力しないとファイル名がそのままURLになります。hoge-hello-worldと書いてみましょう。 datehugo newをした日時が入ります。特に書き換える必要はありません。 またdateの下に’draft = true’を追加しましょう。こちらはこの記事がまだ下書きだということを示すための記述になります。公開する時に削除しましょう。

全て記入をするとフロントマターは下記の様になっていると思います。

+++
title = "Hello World"
tags = ["hugo","hoge"]
slug = "hoge-hello-world"
date = "2017-02-22T15:26:15+09:00"
draft = true

+++

それでは記事を書いてみましょう。記事を書く場所はフロントマターの下にマークダウン形式で書いていきます。

+++
title = "Hello World"
tags = ["hugo","hoge"]
slug = "hoge-hello-world"
date = "2017-02-22T15:26:15+09:00"
draft = true

+++

Hugoでブログを始めようサンプル記事です。

上記のように書いたらhugo server -w -Dで確認をしましょう。

さいごに

Hugoには今回使用したテーマ以外にも色々ありますし、カスタマイズもできますので色々試してお気に入りのテーマを作成してみるのもいいと思います。

comments powered by Disqus