静的ファイルジェネレータでブログを書くメリット

Wordpressはアクセスのたびにデータベースに記事を読みに行くわけですが,ブログなどは一度書けば基本内容がずっと変わらないわけで,データベースではなくhtmlファイルにしてしまえば料金が比較的安いCDNのみで記事が配信でき,ホスティングの費用を抑えられるわけです。

htmlファイルをいい感じに作成してくれる静的ファイルジェネレータには

などがあります。

今回はファイル変換が非常に高速なHugoを使います。

静的ファイルジェネレータでブログを書くデメリット

静的ファイルの問題点は,そのままではコメントや検索,レコメンド記事の表示ができないことです。

コメント機能が必要であれば外部のサービスを使用することで解決します。

(が,もともと日本はコメント文化が弱いですしコメント機能はなくてもいいんじゃないかと思っています。。)

検索機能は,先に全文検索のインデックスを作っておきjavascriptで結果を表示するなどで対応できそうです。(Googleカスタム検索エンジンも使えますが,ややオワコン臭が漂ってきていますので考えません)

記事レコメンドも同様にファイル作成時に記事の関連情報を作成して,ファイルにリンクを埋め込む形で対応できそうです。

これらについてはまた別の機会に書こうかと思います。

Hugoでブログを書く

(インストール手順はMac向けですがWindowsでもインストール可能です)

そろそろHugoでブログを書き始めましょう。brew一発です。

> brew install hugo

その他のインストール方法はこちらから確認してみてください。

インストールが終わったらhugoコマンドが使えるようになります。 まずはじめにhugoで新しいサイトを作成しましょう。 サイトのファイルを起きたいディレクトリに移動して下記のコマンドを打ちます

> hugo new site hajimete

これでhajimeteというディレクトリが作成され,次にするべきことが表示されます。

Congratulations! Your new Hugo site is created in /Users/ykawa/tmp/some/hajimete.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/, or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".
  1. themeをインストールしてね
  2. コンテンツ追加できるよ。
  3. hugo serverでライブサーバ実行できるよ

1のthemeはwordpressのthemeと同じで,有志の人たちが作成してくれているデザインテーマです。 今現在では180以上のテーマがHugoオフィシャルに公開されており,用途に見合ったデザインが見つかる

ということでgitを使ってthemeをダウンロードしていきましょう。

pdevty氏作成のmaterial-designを選びます。

cd hajimete/themes
git clone https://github.com/pdevty/material-design

ダウンロードしたテーマを使うにはtheme名をhajimete/config.tomlに書きます。

# hajimete/config.toml

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "material-design" # 追加

これで準備が整いましたのでさっそく記事を書いて見ましょう。 content/下にファイルを作ればそれが記事になります。手で作成してもいいのですがhugoのコマンドで作成したほうが楽です。firstという名前の記事を作成して見ましょう。

> hugo new content first.md
> echo "ほげ" >> content/first.md
> cat content/first.md
---
title: "First"
date: 2017-10-21T18:20:18+09:00
draft: true
---

ほげ

記事の頭の---で囲まれた部分が記事のメタ情報です。

作成した記事はhugo serverコマンドでローカルのブラウザ上で確認できます。 メタ情報にdraft: trueとありますが,作成したファイルはドラフトですので公開対象ではありません。 ドラフト状態の記事のプレビューを確認したい場合は-Dをつけて実行します。

> hugo server -D
Started building sites ...

Built site for language en:
1 of 1 draft rendered
0 future content
0 expired content
1 regular pages created
6 other pages created
0 non-page files copied
1 paginator pages created
0 tags created
0 categories created
total in 3 ms
Watching for changes in /Users/ykawa/tmp/some/hajimete/{data,content,layouts,static,themes}
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を開けば記事のプレビューを見ることが出来ます。

htmlファイルを出力するにはhugoコマンドを実行します。 first.mdのdraftをdraft: falseに変更してhugoコマンドを実行します。 htmlファイルはpublic/ディレクトリに出力されます。

> hugo
Started building sites ...

Built site for language en:
0 draft content
0 future content
0 expired content
1 regular pages created
6 other pages created
0 non-page files copied
1 paginator pages created
0 tags created
0 categories created
total in 6 ms

> cat public/first/index.html

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
	(省略)...

ここまででhugoの説明は終わりです。 ここではhugoの最低限の機能だけを紹介しましたがhugoには多数のヘルパー関数や設定のカスタマイズやショートコードなどがあります。Hugoのオフィシャルサイトから確認して見てください。もちろんThemeのカスタマイズも自分でできます。

次回はいよいよFirebaseにデプロイしてhttpsページを公開します。

パート3