はてなBlogからGitlab Pages + Gatsbyに移行した
エンジニアなんだしBlogくらい自分で運用しようかなと思いたち、Gatsbyで作ったページに記事を移行しました。 デザインも機能性も酷い状態ですが、少しづつ手を入れていこうと思っています。
記事を移行する
記事ごとのmdファイルに切り分ける
はてなBlogのエクスポート機能を使うとMT形式のテキストで全記事データを取得できるので、 このtxtをもとに１記事づつのファイルを作成していきます。 手作業で移行するのはダルいので、Rubyで雑なスクリプトを書いて、以下のようなことをやりました
- “AUTHOR”という文字列を記事の切れ目の判定に使い、エクスポートしたtxtを１記事づつのテキストの配列にsplitする
-
記事のmarkdownファイルにfrontmatterを記述したいので、“TITLE”, “BASENAME”, “CATEGORY”等を正規表現で抜き出す
- “TITLE”はそのままtitileに
- dateは”BASENAME”から作る方が楽だった
- “CATEGORY”はコンマ区切りでつなげてdescriptionに
- 下書き記事は出力したくないので”Draft”ステータスのものは省く
-
はてなBlogと同じurlになるようなディレクトリ、ファイル名で出力する
- gatsby-config.jsのgatsby-source-filesystemのoptionも上記のディレクトリ構成に合わせて修正
こんな感じで記事自体は表示できるようになります。
ifameをプラグインの記法に置き換える
ただ、YouTubeなどiframeの埋め込みがうまく表示できないため、gatsby-remark-embed-youtubeなどのプラグインを導入し、iframe部分をプラグインが提供している記法に置き換えていきます。 これも手作業はダルいのでRubyに以下のようなことをやってもらいます。YouTubeの場合
- 記事をNokogiriでパースする
- 記事中のiframeタグのうち、srcに”youtube”という文字列が含まれるものを集める
- 上のiframeの親要素に、 youtube:https:xxx という文字列をadd_childで入れる
- iframe要素をremoveする
という感じで、Nokogiri使って、もともとのiframe要素を消すかわりにプラグインの記法に修正していきました。
ローカルプラグインを作る
YouTubeとinstagram、Twitterはpluginと上記の要素書き換え対応でいけました。 amazonのアフィリンクはpluginがなかったのですが、gatsby-remark-embed-youtubeはわりと単純なpluginなので、これを参考にローカルプラグインを作って、それと、要素の書き換えで対応しました。
ググってQiitaの記事など参考にしたのですが、結局公式が一番わかりやすかったです。
amazonはこれでなんとかなりましたが、はてなBlogの、自サイト内リンクの対応はちょっと今悩んでいます。 iframelyみたいな外部サービスを使うのもいいのでしょうけど、せっかくなのでもうちょっと悩んでみようかな。
GitLab Pagesでホスティングする
インフラ面は楽してGatsbyでReact楽しもうかなと思い、今回はGitlab Pagesでホスティングすることにしました。
このへんはジャバ・ザ・ハットリさんの記事読みつつやってみたらすんなりできました。コンテンツ側が落ち着いたら、インフラ面でも遊んでみたいですね。
さいごに
React慣れるのに良いオモチャがほしいなと思っただけで、はてなBlogをやめたかったわけではないのです。はてなBlogは使いやすくて良いサービスですし、SEOも強いように感じます。
なんとか移行したものの、まだまだ雑然とした感じです。なかなか長く楽しめそうです。