Blog.

はてなブログをGatsbyに移行してみた

Takahiko Wada
Takahiko Wada

今まで使っていたはてなブログを Gatsby に移行しました。

移行する過程で、はてなブログのエクスポートファイルを Gatsby 用の markdown に変換スクリプトも作ったので紹介したいと思います。

スクリプトはこちら → hatena-gatsby-converter on GitHub

はてなブログのエクスポート形式と Gatsby の markdown 形式

https://help.hatenablog.com/entry/export からエクスポートできます。

エクスポートされたファイルの形式は MT(MovableType)形式というようです。

はてなブログのエクスポートファイル

AUTHOR: wasan
TITLE: お正月に向けて、かるた読み上げアプリを作ってみた
BASENAME: 2019/12/31/072355
STATUS: Publish
ALLOW COMMENTS: 1
CONVERT BREAKS: 0
DATE: 12/31/2019 07:23:55
CATEGORY: 作ってみたモノ
-----
BODY:
<h1>かるたの読み手をアプリにやってもらうようにしました。</h1>

<p>今回もReact Native + Expoです。<br/>
Speech <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>便利〜！</p>

<h2>きっかけ</h2>
...

はじめにタイトルや日付などのヘッダ情報があり、その後に本文が HTML 形式で格納されています。

それを Gatsby 用の markdown に変換していきます。

Gatsby の markdown はこんな形式です。

Gatsby の markdown ファイル

---
title: "お正月に向けて、かるた読み上げアプリを作ってみた"
date: "2019-12-31T07:23:55+09:00"
tags: ["作ってみたモノ"]
---
# かるたの読み手をアプリにやってもらうようにしました。

今回もReact Native + Expoです。
Speech [API](http://d.hatena.ne.jp/keyword/API)便利〜！

MT 形式と似ていますが、本文の部分が HTML ⇔ 　 markdown というのが大きな違いになります。

  • ヘッダ情報は正規表現で抜き取り
  • HTML 部分は HTML→markdown への変換ライブラリを利用

で変換することにしました。

スクリプト

そして出来たスクリプトがこちら。
hatena-gatsby-converter on GitHub

HTML→markdown の変換は turndownというライブラリを利用しました。

var markdown = turndownService.turndown('<h1>Hello world!</h1>')

のような感じで一発で変換できます。

画像もそのまま表示されました。
元画像へのリンクはそのままですが、はてなブログを生かしておけば引き続き表示できそうです。

fc2 ブログもインポート

あと MT 形式はブログでは割と一般的らしく、過去に使っていた fc2 ブログも MT 形式でした。

若干の方言があり少し改修が必要でしたが、fc2 ブログの記事も Gatsby 用に変換できました。

2004 年から記事があり、もはや黒歴史でしかないのですが、、、
せっかくなので Gatsby にまとめていこうと思い、全てインポートしました。

まとめ

ブログサービスは無数にあってどれを使うか悩ましいけど

  • 無料(Netlify 利用)
  • 広告なし

はよいですね。

多少エンジニア的な知識は必要ですが、勉強にもなるし。

Gatsby 自体はまだまだカスタマイズの余地がありますが、可能性が無限大で面白そう。

細々と書いていきたいと思います。

作ってみたモノ