ブログを引っ越しました#

最近全く更新していませんでしたが、しばらくの間はてなブログを使用していました。

はてなブログでは、記事を Markdown にて書いていたのですが、最近自分の中で Asciidoc が熱く、 ブログ記事も Asciidoc で書きたいなという思いが高まり、 勢い余ってブログを移行することにしました。

Hugo + Asciidoc + netlify でブログを構築#

Asciidoc で記事を書く選択肢として Hugo の使用は想定していたのですが、どこのサービスでホストしようか悩んでいるところでした。

ブログを移行するにあたり、はてなブログの過去記事もまるっと移行しようと考えていたので、旧URLから新URLへのリダイレクトが行える必要があります。

そんなとき、先日参加した kawasaki.rb#079 にて、Hugo でサイト構築するとき netlify が簡単で楽との情報を頂きました。

さっそく調べてみると、netlify であればリダイレクトも簡単に設定できるようです。

そんなわけで、Hugo + Asciidoc + netlify でブログを構築することにしました。

Hugo で Asciidoc の記事を書く#

Hugo は、Go で作られた、静的 Web サイトを構築するフレームワークです。 同じようなものに、Ruby 製の Jekyll があります。

Hugo で記事を書く場合、Markdown で書くのが標準ですが、Hugo は Asciidoc もサポートしています。

Hugo で Asciidoc からページを生成するためには、asciidoc または asciidoctor コマンドがローカルにインストールされている必要があります。

あとは Markdown の場合と基本的に同じです。

以下のコマンドで、サイトのスケルトンを生成できます。

$ hugo new site kechako.dev

新しい記事を書くときも、同じようにできます。

$ hugo new posts/new-post.adoc

以下のような archetypes/default.adoc を用意しておくと、それをもとにして新しい記事が生成されます。

+++
title = "{{ replace .Name "-" " " | title }}"
date = "{{ .Date }}"
author = "けちゃっぷ"
aliases = []
categories = []
tags = []
comments = false
description = ""
keywords = ""
isCJKLanguage = true
draft = true
+++

=

サイトのスケルトンを生成したときに、archetypes/default.md が生成されているので、それは消しておきます。

他にも、テーマを設定したりする必要がありますが、今回は割愛します。

netlify で公開する#

netlify は Hugo のビルドをサポートしています。

サイトの設定やコンテンツを GitHub に Push し、netlify でリポジトリを選択しサイトを作成すると、サイトがビルドされ自動で公開されます。

しかし、Asciidoc で記事を書く場合、上記の通り asciidoc または asciidoctor コマンドが必要です。 netlify のビルド環境にはどちらもインストールされていないため、このままではコマンドが見つからずエラーになります。

これを解決するために、asciidoctor をビルド時にインストールするように小細工を行います。

まず、以下のような Gemfile を作成します。

# frozen_string_literal: true

source "https://rubygems.org"

gem "asciidoctor"

そして、ビルド時に bundler が実行されるように、netlify.toml にてコマンドを指定してあげます。

[build]
publish = "public"
command = "bundle && hugo --gc --minify"

[context.production.environment]
HUGO_VERSION = "0.61.0"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"

必要に応じて、Hugo のバージョン等も指定します。

これらをまとめてコミットし、GitHub に push すると、Asciidoc で書いた記事もビルドできるようになります。

リダイレクトの設定#

リダイレクトの設定は、netlify.toml にて行います。

今回、ドメインも blog.kechako.com から kechako.dev に変更しました。 まず、そのためのリダイレクト設定を以下のように書きます。

[[redirects]]
  from = "https://blog.kechako.com/*"
  to = "https://kechako.dev/:splat"
  status = 301

恒久的な移動になるので、status は 301 です。デフォルトが 301 なので、省略可能です。

また、既存記事のパスを変更するので、それについても設定を書きます。

[[redirects]]
  from = "/entry/*"
  to = "/posts/:splat"
  status = 301

リダイレクトについてはこれだけです。

あとは、netlify のドメイン設定で、新ドメインと旧ドメインを登録します。

過去記事のコンバート#

はてなブログは記事のエクスポートができます。 ただし、Movable Type 形式です。

Markdown で記事を書いてても、エクスポートは Movable Type 形式です。

出力したファイルには、各記事のヘッダー情報と HTML でマークアップされた記事本体が含まれます。 画像はエクスポートされません。

そのままではどうしようもないので、Asciidoc に変換するプログラムを Go で雑に書きました。 画像はリンクからダウンロードしてきてローカルに保存し、その画像を Asciidoc から参照するようにしています。

移行作業のなかでこのプログラムを書くのに一番時間をかけましたが、おそらく二度と使用することはないでしょう。

コンバートした Asciidoc や画像ファイルをコミットし push すれば、移行作業は完了です。

最後に#

記事のコンバートは面倒でしたが、概ねスムーズに移行することができました。

これを機に、ブログを書く頻度を上げていきたいと思います。