ハラミTech

技術系ブログです

Hugoのブログサイトからはてなブログへ移行した

Blog

はてなブログが独自ドメインに対してのHTTPS対応が開始されたので
それを機に、今までHugoとFirebase Hostingで作った独自のブログサイトからはてなブログへ移行しました。
今回はその話をしていきます。

なぜはてなブログへ移行したのか

独自のブログサイトは非常に快適でしたが、以下のような不満がありました。

  • ブログ上げるためにいちいちGitHubにPushしないといけない（手軽に修正できない）
  • フォロー機能がない

特に「フォロー機能」に関してはなにかしらのプラットフォームに乗っていないとつらいなぁと思ったので
独自だと無理でした。

なぜフォロー機能が必要か

ブログの流入元って

が主だと思うんですが、独自ブログだと上2つがメインになります。

アフィリエイトで食うつもりはないので、お金とかどうでもいいんですが、
せっかく書いた記事なのでどうせなら多くの人に見てもらいたいです。
SNSだと限界があって、特に有名人でもない僕にはSNSの流入はほとんどないです。

なのではてなブログに移行しました。

どうやって移行したのか

はてなブログはMarkdown記述に対応してます。
そしてHugoでもMarkdownで記事を書いてたので、文章自体の移行はコピペでやりました。

記事内の画像や埋込パーツに関しては、はてなブログの仕様に則る必要があるので、
そこは手動で修正しました。

今回は40記事くらいしかなかったので全部手動でやりましたが、数百とか記事があるとつらいかもですね。

あとURLパスもガッツリ変更しました。

ということで、記事のリダイレクト対応が必要になりました。

記事のリダイレクト方法

はてなブログの「設定」->「詳細設定」->「検索エンジン最適化」->「headに要素を追加」に以下のコードを入力します。

<script type="text/javascript" language="javascript">
var urls = location.pathname.split("/");

if (urls[1] == "post") {
    var redirect_path = "";

    switch(urls[2]) {
        case "000038":
            redirect_path = "/entry/retrospective201805";
            break;
        case "000039":
            redirect_path = "/entry/create-oss-cloudkms";
            break;
    }

    if (redirect_path != "") {
        if (document.referrer) {
            var referrer = "referrer=" + encodeURIComponent(document.referrer);
            redirect_path = redirect_path + (location.search ? '&' : '?') + referrer;
        }
        location.href = redirect_path;
    }
}
</script>

やってることは単純で、第1パスが「post」なら第2パスを見てリダイレクト先を指示する、というものです。
ただこれだと、SEOに対応したリダイレクトになっていません。
それはHTTPステータスが404になるためです。

今回はSEO対応は切り捨てました。検索エンジンやブックマークからの流入さえ拾えればとりあえずいいです。

はてなブログに移行してよかったか？

だいぶ満足してます。

  • よかったこと
    • 記事の編集が圧倒的に楽
    • 特になにもしなくてもHTTPS対応されてて楽
    • 埋め込みパーツがマジで便利
    • まだ読者いないけど、フォロー機能がついた
  • わるかったこと
    • だいぶ金がかかる
      • Hugo + Firebase Hostingだとほぼタダだった
    • ページの表示がおっそい

最後に

コストだけ考えれば圧倒的にHugo + Firebase Hostingでブログサイト作ったほうがいいんですが、
利便性考えるとやっぱりブログサービスは便利です。

そろそろ移行も大変な記事数になってきてきたので、今後はここに腰を落ち着けようと思います。

では！