みなさんはてなやワードプレスに満足していますか？ してないからこの記事にたどり着いたんですよね。 はい、おめでとうございます。はてなやワードプレスではたどり着けない 爆速のブログサイトを手に入れる方法を 京大卒の私がわかりやすく説明します。
Hugoとは
Hugoというのは、言ってみれば昔ながらのただ文章が書いてあって画像が貼ってあるだけの ウェブサイトを快適に作るソフトウェアです。
Hugoは、テンプレートと呼ばれるHTMLファイルと、マークダウンで書かれた記事本体から、 サイトを自動的に構築します。こうすることで、部品を使い回すことが出来たり、 生のHTMLのような冗長な記述なしに記事を書いていくことが出来ます。
目指す構成
Hugoでブログを構築していく上の決まった構成というのはありません。 ある程度の取り決めはありますが、自由度があります。
管理のしやすさなども考慮して今回は、以下のように構成することとします。
- contents/
- post/
- hoge-hoge.md
- hage-hage.md
- page/
- about.md
- privacy-policy.md
- post/
- static/
- images/
- {timestamp}.jpg
- …
- images/
- themes/
- beautifulhugo/
まず、記事を入れるディレクトリの名前ははてなで採用されているentryは引き継がず、postとします。 なぜかというと、Hugoではこの名前がContent Typeとして認識されます。 そして、テーマの中には、テンプレートの中でこのpostというデファクトスタンダードの Content Type名に依存しているものもあり、実際に私が使っているbeautifulhugoもそうです。
正規化URL（グーグルがURLを認識するためのURLのこと）は、 domain/post/hoge-hoge/ のように末尾にスラッシュ（trailing slashといいます）がついた形になります。
はてなの時は、domain/entry/hoge-hogeと、スラッシュなしだったこともあり、 まずこの段階で正規化URLが変わってしまうことになりますが、 スラッシュありがHugoの推奨であり、実際にSEOでも良いとされているため、正しい方向に向かうことにします。
Netlifyでは、Pretty URLという機能をオンにすると、末尾にスラッシュがない場合にスラッシュを補完してくれます。 この時、301リダイレクトが行わるので、以前の正規化URLの評価は引き継がれます。
さらに、 今回はディレクトリ名も変えているので、 /entryから/postに301リダイレクトも飛ばしておきましょう。
| |
また、images/以下には画像を入れますが、ここは記事ごとに階層化はせずに、一階層の中に UNIXタイムスタンプをつけて格納していくことにします。 これは、後に管理ソフトウェアを作ることを前提としています。 もし、私の管理ソフトウェア開発に期待する場合は、同じようにすることをおすすめします。
ホスティングサービスはNetlifyを利用することにします。
おすすめテーマ
私が使っているのはbeautifulhugoというテーマですが、 何が良いかというと、作った人が非常に優れたプログラマです。 大学院を出たあと、インテルに入社して、それから今はHaloという FPSのゲームを作っています。生粋のプログラマという感じで、 ソースコードも非常に読みやすいし、歪んだところがあまりないため、 カスタマイズしやすいです。
しかし、これはどういうサイトを作りたいかに依るでしょうから、 好みで決めてよいです。
コンバーターで変換
私の場合、トータルで600超の記事がありますから、移行は半自動で行わないと永遠に終わりません。 出来ればよいことは、
- 記事を吸い出す。この時、Front Matterを書く
- その中にある画像を吸い出す
です。
ちょうど良いものとして、hateblo2hugo というのがありましたので、これを自分好みに修正して使いました。
修正ポイントとしては、
- Front Matterに書いてあるdateが間違ってるので修正した（はてなから吸い出した時にはJSTのはずですが、GMTとして解釈しているため調整しました）
- 画像の置き場所と名前を上に書いたようにした
です。
ご自由にお使いください。
デプロイ
Netlifyへのデプロイ方法としては以下の２つの方法があります。
- GithubやBitbucketなどと同期
- hugoをビルドしたあとに出来るpublic/ディレクトリをドラッグアンドドロップ
リポジトリへのpushごとに記事を更新されるというのは嫌なので、 私は後者を使っています。
ちなみにですが、このブログでいうと記事数は360くらいありますが、 ビルド時間は500ms程度であり、全くストレスに感じることはないです。
ドメイン設定
ドメインは、引き続き、wwwサブドメインのものを使っています。
wwwなしのものをルートドメインとかAPEXドメインというそうですが、 これを使うことが好ましくないことは、以下の記事に書かれています。 興味があればどうぞ
DNS設定
私はドメインをお名前.comで取得しています。 お名前.comでやることは、
- ネームサーバーの設定
だけです。
既存のDNSテーブルの設定は、全部消して結構です。 Netlifyネームサーバーを使うように設定すれば、 あとはNetlifyが生成してくれたDNSテーブルが使われます。
HTTPS化
HTTPS化も自動的に行われますが、 時間はかかります。 最悪ケースで１日程度はかかるでしょう。 私の場合は夜中いっぱいかかりました。 その間は、サイトはダウンします。