はてなブログからの静的ウェブ生成Hugoへ移行まとめ（前編）

今回はてなブログから静的ウェブページ（LOLIPOPレンタルサーバホスト）へ無事移行ができましたので、その辺の経緯、手順、課題だった点などを全て白日の下に晒したいと思います。なお、本記事は長くなりそうなので記事を前後編に分け、技術的nerdy（オタク的）なことは全て後編に譲りたいと思います。プログラムとかコマンドは出しません。ですので、はてなからの移行を検討してる方はこの記事を読むと大まかな概要がわかるかと思います。

結論

いきなりの結論ですが、もっと早く移行しておけばよかったというのが正直なところです。はてなブログで悩まされていた様々な点がほぼ解消され、快適になったことが定量的にも確認できました。また、月額のWebサーバコストが６００円→１００円になったのも大きいです。

移行後のシステム構成と運用

現在どういう仕組みかですが、

レンタルサーバ： LOLIPOPレンタルサーバ（エコノミープラン利用）
静的ウェブページ生成ツール： HUGO⤴️
使用しているHUGOのテーマ： Tranquilpeak⤴️
ローカルハードディスクとレンタルサーバ同期ツール: Rclone⤴️（Webdav経由）
バックアップ: Bitbucket⤴️
エディタ: sublime（自分の好みのものでOK）

となっています。また、日々の運用は

ローカルでhugo serverを起動
エディタで記事をマークダウンで書き、推敲（都度、ブラウザ上のlocalhostアドレスで内容を確認。はてなブログでいうところのプレビュー）
記事を書き終わったら、hugoで公開用静的ウェブページ生成
LOLIPOPレンタルサーバと上記３で生成したローカルのウェブページをRcloneを使って同期
バックアップのため更新内容をBitbucketに反映

です。

はてなブログを離れたわけ

最初に、移行の動機を述べておく必要がありますね。別に、安くなるからとかそういうわけじゃないんです。それは結果的に付いてきたこと。

私とはてな

元々このブログは海外ドラマなんて全く関係なかったんですよね。英語の勉強法を暗中模索していたんです。だって、一番最初の記事がタカタ製エアバッグ問題の冒頭説明なわけでして・・・（笑）　しかし、多くの人と同じように三日坊主ですぐにブログを更新はしなくなるんですが、私はその間海外ドラマにはまったのでした。そして１年半の月日が経ったらあら不思議、英検１級に合格できちゃったのです。そこからさらに海外ドラマを見続けて、ある時、海外ドラマ視聴で英語勉強するのがコスパ最強と確信したのですよ。そこで、ちょうど手元にあったこのブログを「ドラマの中の英語」という題名に改名し、そこからブログを毎日のように更新しだしたんです。そして、はてなブログプロになったのがちょうど２年前。アクセス数が増えてきたので、１年前に独自ドメインに移行し広告等もつけるようになりました。

しかし、使えば使うほどはてなブログの問題点もたくさん見えてきたんです。

はてなブログの問題１：遅い

もうね。表示が遅いんですよ。テーマの問題かと調査もしたんですが、サーバの問題という自分では手が出せない領域の話という結論になりました。ブログなんてただhtml渡すだけなのになんで遅いの？って感じ。無料なら別にいいんですけど、金払ってるのにこの惨状はどうなんでしょう・・・

はてなブログの問題２：sitemap

はい。はてなってGoogleとのsitemapの問題が全く解決されないんですよ。しかも、この問題をはてな側サポートに投げてるユーザーの記事を何件も読みましたが、はてなユーザーサポートの塩対応ぶりに読んでるこちらが思わず涙してしまう状況。彼らは自分の問題と認識してないんですね。「ライト、ついてますか？」と思わず問いかけたくなる感じなのです。

ライト、ついてますか―問題発見の人間学

ドナルド・C・ゴース (著), G.M.ワインバーグ (著), 木村泉 (翻訳) : 共立出版

Amazon

楽天ブックス

はてなブログの問題３：マークダウンの構造化ができない

字幕：その時、ドローンが鳥さんに襲われた！

題名：ドローンと鳥のニアミス

私は、独自に画像上に字幕を入れる処理を入れてるんですが、これって標準のマークダウンじゃできないんですね。そのため、はてなブログ時代はhtmlをわざわざコピペしていたんです。でも、それって、全く構造化されていないんですよ。例えば、後から一部変更したいってなったとき、どうしましょう？　全記事を編集で逐次開いて、修正していく？　実は私のサイトって記事数優に1,000を超えてるんですよね。ユーザーはそんなことしたくないんです。

ちなみに、上の字幕画像の処理は、Hugoだと以下のようになっています。

{{< subimg src="bird-and-drone-near-miss-720x405p.jpg" alt="ドローンを飛ばしていたら鳥と急接近" title="題名：ドローンと鳥のニアミス" w="720" h="405" >}}
{{< line >}}字幕：その時、ドローンが鳥さんに襲われた！{{< /line >}}
{{< /subimg >}}

ほらね、簡単で再利用しやすいでしょ？

はてなブログの問題４：有料会員特典の恩恵が少ない

はてなブログは有料会員に対し様々な追加サービスを付与してくれてますが、実はそれが自分には全く価値がないものばかりだったんですね。ぶっちゃけ、価値があるのは独自ドメインが使えるってのだけ（笑）

画像を月3GBまでアップロードできるってのも、こっちはサイトが遅いんで如何に画像サイズを少なくするかって考えてるので、そんな使えないし、使わないし。月3MBもあれば十分なレベル。そもそも、はてなの画像管理ツールのできは犯罪レベルですし。

うっかり記事を消しても履歴を残せるってのも、実ははてなブログのエディタで記事を書いてる最中にはてなサーバがダウンしたことが今まで２度もあって、両者ともに書いてた記事はインターネットのどこかに消えて痛い思いをしたことあるんです。それ以来怖くてローカルのエディタで記事書いてるくらいなんですよね（笑）

そして、無料会員特典のはてなスターやコメント欄等も自分は使ってないくらいなので、ぶっちゃけはてなである必要はいつのまにかなくなっていたんです。

はてなブログの問題５：テーマデザインが変わる

自分が気に入っていたデザインのとある場所に、ある時から横線が入るようになりました。調べた結果、テーマ開発者の方がデザインを更新したのが反映されたのですが、自分としては勝手に変えないでーって感じでした（笑）わがままなのは承知ですが。

移行先の選定

さて、はてなブログからの移行となるとWordPressが第一候補に挙がるみたいですが（実際、グーグルで検索してもトップ）、実はわたしは常々これに疑問を持っていたんです。だって、ブログって動的である必要あります？　今サイト見たとしましょう。そして１時間後にサイト見た時なにか変わってる必要あります？　ないですよね、記事更新しない限り。そして、利用者ごとに表示内容変えることもないんです。TwitterとかFacebookはそりゃ動的にする必要ありますよね。次から次へとタイムライン更新されるんですから。でもさ、ぶっちゃけ個人のブログですよ。アプリケーション・サーバーを動かすなんて、目玉焼き作るのにフランスで修行した五つ星レストランのシェフ読んでくるようなもんじゃないですか？（笑）

そして、ワードプレスだと私がはてなブログの時から懸念していたサイトが遅いって問題も解決されないんじゃないかという不安もあったのです。

そこで検証をしてみました。実際自分の目で確認しないことには分かりませんからね。

私のブログのユーザーは国内なので、国内にデータセンターがあるレンタルサーバで、無料のお試し期間がある次の４つのサービスに申し込みます。

この４つのサーバに既存のアクセスが多いブログ記事のhtmlファイルを上げて速度を比較しようというものです。ちなみに、これらのファイルサイズ自体は小さいので、検証用に新たに10MBの画像付き記事や1MB近くの文字列を含んだファイルなどいくつかをHugoで作成して、それも併せてスピードテストの対象にしました。

なお、この時点ではFTPを使ってファイルを上げましたが、ラクサバはFTPのパスワードがよくわからず、ファイルをサーバに上げるところで躓き、残念ながら対象外となってしまいました。新規登録後に届いた設定のメールの内容を確認すると、ラクサバだけパスワードの記述がないんです。どうも、メール本文上にパスワードの記述しないことでセキュリティ向上を試みているみたいですが、その分の説明が無いのでユーザーにとってはちんぷんかんぷん。ラクサバの方は、メール本文やフローを再度精査したほうが良いかと思います。

ここで、今回のお試し中の３つのレンタルサーバの比較をしておきます（検証時時点）

	ロリポップ	スターサーバー	さくらのレンタルサーバー
初期費用	¥1,500	¥1,500	¥1,048
月額	¥100	¥126	¥131
プロトコル	HTTP	HTTPS	HTTPS
ストレージ	HDD	SSD	HDD

（追記） なんとロリポップは、初期費用無料とSSD化、そしてストレージ容量拡大を打ち出したみたいです

ロリポップだけはSSLの設定をお試し期間中はさせてくれませんでした。注目はスターサーバーのストレージSSD。OSの起動なんかだと体感的に速くなりますが、果たしてWEBの表示でどのくらい効果あるのか？　そして、もちろん名実のさくらという三つ巴の勝負の始まりです。

スピードの検証はGoogle Pagespeed Insight⤴️を使って、１００点満点で調査。朝（７時）、正午（１２時）、夜間（２２時）にPagespeed Insight経由で３つのサイトに置いた全く同じhtmlファイルにアクセスします。時間の前後は数十秒ありますが、全く同じ時間帯です。なお、その瞬間だけ重いとかいうイレギュラーな状況が発生すると統計値に信頼が置けないので、今回は平均ではなく中央値を採用しています。つまり、1,2,3,4,100というデータの時、中央値は3です。100という異常値が一つ混じっても影響はないです。

それでは、結果はというと・・・

サーバとアクセスデバイス	Pagespeedの中央値
ロリ（モバイル）	59
ロリ（デスクトップ）	94
スター（モバイル）	53
スター（デスクトップ）	93.5
さくら（モバイル）	48.5
さくら（デスクトップ）	89

なんと、僅差ながらロリポップがモバイルでもデスクトップでもトップになりました。この時点でさくらさんとはごめんなさいですね。

なお、さくらさんの名誉のためというわけではありませんが、皆さんの環境でもこの結果通りになるというわけではないことは注意しておきます。というのも、こういった激安のレンタルサーバは他のユーザーと共用の環境に入っているからです。つまり、一緒に入っている他のユーザーの利用具合に影響されるのです。例えば、毎晩２２時に大量のトラフィックを発生させるユーザーと一緒の環境だったら・・・？　そういうこともあって、検証の時間帯を朝昼晩に分けたりもしたんですよね。あと、さくらさんの良い点はFTPの速度が他と比べ段違いに早かった点。同じデータをアップロードするのにさくらだけ1/4くらいの時間で終了してました。

さて、ロリポップとスターサーバーに候補は絞られましたが、その差はわずか、neck-and-neck（首の差で、接戦で）です。自分的にはスターサーバーのSSDというのに惹かれるんですけど、果たして全く差が出ないものなのでしょうか？

上記検証で個人的に一つ問題だと思うのが、ロリポップだけSSLの設定が入っておらずHTTPアクセスになってる点。SSLを入れるとHTTP/2で速くなったり、暗号化で遅くなったりcase-by-caseなんですよね。そこで、スターサーバーの設定からSSLを外して２つのレンタルサーバだけで再度検証してみることにしました。OGのHTTP対決です（笑）

その結果は・・・

サーバとアクセスデバイス	Pagespeedの中央値
ロリ（モバイル）	55
ロリ（デスクトップ）	94
スター（モバイル）	56
スター（デスクトップ）	94

なんと、今度はスターサーバーに軍配が（笑）

それにしても、ネットワークのレイテンシが大きすぎて、SSDでも静的なファイルの読み込みだけならあまり意味ないみたいですね。

お試し期間が切れつつある中どちらを取るか迷っているところに、なんということか、ロリポップから素敵な案内が舞い込んできました：

2020/07/04 【7月の土日・祝日限定】全プラン初期費用無料キャンペーン開催中⤴️

ということで、エコノミープランなら15ヶ月分無料ですよ。これがひと押しとなって、結局ロリポップでレンタルサーバを借りることに決定しました（笑）

静的ウェブページで現状のはてなブログより速くなるのが確認できたのも良かったです。

（追記）なんと太っ腹にも、ロリポップは初期費用無料を継続するみたいですね。しかも、SSDが標準になるとか。SSDは静的ウェブページで効果は見られませんが、それでもあったら嬉しいかぎりです。

静的ウェブページ生成ツールの選定

次に、なぜ静的ウェブページ生成ツールとしてHugoを選んだかですが、これはツールではなく、自分が気に入ったデザインのテーマがたまたまHugo対応だっただけです。

以下のテーマ集のページを眺めていたら、ちょうどよさげなTranquilpeakというテーマを見つけられました。

JAMstack Themes⤴️

なお、Hugo以外にもjekyll等ツールはありますが、基本はほとんど同じですね。マークダウンで記事を書いて、それを元にツールが静的ファイルを生成してくれ、あとはそれをアップロードするだけ。非常に簡単です。

はてなからの移行手順

具体的な移行手順は専門的になってしまいますので後編に譲るとして、ここでは移行の概要と嵌った点を述べておきます。

データ移行

まず、既存のはてなブログ上にあるデータですが、movable typeという形式でエクスポートできるようになっています。この中身は巨大な１つのテキストファイルで、各記事のタイトル等の属性と、実際のhtmlが保存されるという形式です。

Hugoではこのデータを直接取り扱えないので、自分の場合は各記事をyamlファイルに変換する簡易プログラムを作成しました。色々不具合が見つかって後からデータを修正しましたが、データがローカルにあって一括で処理できるってのは本当にありがたいことだと実感しました。

私は移行直前の一週間前から作業にかかりましたが、余裕を持ってやったほうが絶対いいですね。

URLの変更

既存のはてなブログでのURLであるentry/slugや、私の場合は以前時間形式にしていたのでentry/2020/07/22/001729なんかが入れ混じってる状態もあって、Tranquilpeakテーマ上でそれと整合性を合わせるのが非常に面倒くさいので、今回思い切ってURLを一新しました。https://www.serendipity.page/b/2020/07/slug/ という形になってます。旧URLにアクセスすると新規URLに遷移するようになってます（Hugoの機能）

なお、サイトのURL構造がどうなるかはテーマに依存するところもあるので、テーマの説明を熟読したほうがいいでしょうね。また、テーマによってはHugoの機能を拡張して、かゆいところに手が届くようにもなってますし。

例えば、この警告はTranquilpeakによって拡張されてる機能ですね

はてな脱出で嵌った点

まず、切り替えがいつになるのかが自分はわかっていませんでした。7/10に切り替わるということでしたので、7/11に日付が変わった時点だと考えていましたが、7/10 AM1だとは思いませんでした（笑）　気づいて急遽DNS等の設定を変えましたが、いつ切り替わるかは事前に確認したほうがいいでしょうね。

次に、固定ページ。はてなブログのプロユーザーはブログ記事とは違う固定ページを作れるんですけど、これが解約された時点で見えなくなります（笑）　自分はサイトの説明やプライバシーポリシーは後回しにしていたので、見えなくなってしまい焦りましたｗ　結局、internetarchiveで過去のものを探してきましたけど。皆様に置かれましては固定ページはくれぐれも忘れなきよう・・・

同期にRcloneを使用する理由

まず静的ウェブページツールの挙動について簡単におさらい。皆さんが今日１つ記事をマークダウンで書いたとします。その記事のhtmlファイルがツールによって生成されるわけですが、更新されるファイルはそれだけではありませんよね。前回書いた記事に「次へ」のボタンが表示されるようになりますし、サイトのトップページindex.htmlだって新たな記事が最初に表示されるようになるわけです。その一方、１年前に書いた記事のhtmlファイルは更新はされないでしょうね。

というように、新たに記事を書くと、更新されるものと更新されないものが出てくるわけです。記事を書くたび全てのファイルを上書き保存してたら大変ですよね。件数が少ないうちはいいでしょうが、私みたいに1,000件超えるとなると・・・悪夢ですね（笑）　そこで、ローカルで更新されたファイル分だけサーバ上のものを更新する仕組みが必要となるのですが・・・

同期ツールRcloneはその領域で大活躍するんです！

詳しいコマンド等は後編に譲りますが、このRcloneは同系統のrsyncに影響を受けて開発され、クラウドストレージとの同期に特化しているんです。最小限の更新で、しかもFTPより速いんです。静的ウェブページやる人はFTPでなくRcloneにしたほうが絶対いいですね。

なお、ここだけの話。実は最初はFTPを試していたんですが、時間がものすごくかかってたんですね。１時間半とかかかるんですよ。多分、全部のファイル上書きしてるからだと思いますけど。それで、FTPを諦めて、rsync＋webDAV（dropboxみたいなもの）で頑張ってたんですけど、自分の環境では安定して動かず、最終的にRcloneに落ち着きました。

なお、興味深いのが、HugoもRcloneもGolangというプログラム言語で開発されているんですね。自分も好きな言語だったりします。

はてなで良かった点

これだけだとはてなブログdis（非難）で終わってしまうので、移行した後だから分かる、はてなブログの良かった点を述べておきたいと思います。

検索

まず最初に、記事検索機能に関してはてなブログが他の追随を許しません。私はあの機能を何度使ったことか！　でも、アクセスログ調べると読者の人はあんまり使ってないんですよね。ブログ主が記事書く時に「昔〇〇って記事書いたよなあ」と検索するのに使っていただけでした（笑）　まあ、今度からローカルディスクにファイルがあるので、検索は引き続きできるかと思います。

アクセスログ

Google Analyticに入っているのでログは必要ないかと思いきや、やっぱしあの簡易のログは好きでした。

横のつながり

はてなはユーザー同士の横のつながりが強いですよね。自分ははてなスターもコメントもとうの昔に廃止してしまっていたので問題ないですが、そういった繋がりを大事にする人ははてなに留まる選択肢は大いにあります。

定量的な成果

最後に、はてなブログから移行してどんだけ変わったか指標を見てきましょう！

サイトマップ

誤解しないでほしいのが、これは改善じゃなく正常になっただけです（笑）

使用前

Google Analytic上でのsitemap取得エラー

使用後

Google Analytic上でのsitemap取得状況

サイトスピード

グラフ自身に語らせましょう。一番右端でサイト移行がされてます。

モバイル

アクセススピード

デスクトップ