WordPressからJekyllへの移行

こちらは、2023年6月7日に公開された以下のドキュメントを翻訳したものとなります。

PlayCanvasの新しいブログへようこそ！😎

WordPressからJekyllへの移行を決定しました。まだ始めたばかりですが、結果にとても満足しています。そこで、なぜ私たちがこの決断をしたのかプロセスを説明することが皆さんの役に立つかもしれないと考えました。

経緯

まず、2012年2月に非常にカジュアルな投稿でブログを開始しました。WordPressのインスタンスをインストールし、数年間は問題なく運営していました。しかし2015年にWordPressのインスタンス管理を自分達でおこないたくないと考え、WordPressのホスティングサービスであるWPEngineにサインアップして今日に至りました。

もっと良い方法は?

数年経つにつれて、WordPressへの不満を感じ始めました。スタイリングのカスタマイズが難しいうえに投稿を一括編集できませんでしたし、またメディアライブラリでのメディア管理も不便でした。一方でブログの人気は一層高まり、WPEngineのコストも増していました。チームメンバーがJekyllを代替案としたので、私たちは移行作業にどのような手順が必要かテストしました。

WordPressからJekyllへの移行

まず、こうした作業に取り組む際にはChatGPTを利用するべきです。おかげで、私にとってはスムーズで楽しい体験となりました。いかに簡単な手順だったかを理解いただくために、以下に主なステップを示します：

1. WordPressのコンテンツをエクスポートする：WordPressのダッシュボードで、ツール->エクスポートに移動し、「すべてのコンテンツ」を選択します。「エクスポートファイルをダウンロード」をクリックします。サイトのすべてのコンテンツが含まれたXMLファイルがダウンロードされます。
   
2. WordPressエクスポートをJekyll形式に変換する：WordPressエキスポートファイルをJekyllフレンドリーな形式に変換するには、exitwpという名前のツールを使用できます。手順は以下となります：
   
   • exitwp をそのGitHubリポジトリからクローンまたはダウンロードします。
   • Put your WordPress XML file in the wordpress-xml directory in the exitwp directory.

   • exitwpディレクトリ内の wordpress-xml ディレクトリにWordPressのXMLファイルを配置します。

   • exitwp を実行します（Pythonといくつかのライブラリが必要です。詳細はリポジトリの README を参照してください）。

   • これにより、Jekyllが理解できるマークダウン形式に変換されたすべてのブログ投稿が _posts ディレクトリに生成されます。

3. Jekyllを設定する：
   • RubyとJekyllをインストールします。インストールガイドについては、Jekyllの公式サイトを参照してください。
   • コマンドラインに jekyll new my-awesome-site と入力して、新しいJekyllサイトを作成します。
   • exitwp が生成した _posts ディレクトリで新しいJekyllサイトの_postsディレクトリを置き換えます。
   • bundle exec jekyll serve コマンドを使用し、サイトをローカルで実行して表示を確認します。
   • そして、ブラウザを http://localhost:4000 で開きます。

ブログ投稿コンテンツを基本的なJekyllサイトに正常にエクスポートした後、それらすべてを新しいGitHubリポジトリにチェックインしました。これ以降、私がコンテンツを変更するたびにGitバージョン管理で追跡されるようにしたかったのです。皆さんもしてみませんか？

マークダウンへの初期移行はうまくいきましたが、完璧ではありませんでした。生成されたマークダウンには不要な余白がたくさんあり、部分的には構文も崩れていました。そこで、マークダウンのコンテンツを全面的にきれいにする良い機会としました。

Prettier

Prettierは素晴らしいコードフォーマッターですが、Markdownの書式設定にも組み込まれていることは知られていないかもしれません。NPM経由でPrettierをインストールし、すべてのMarkdownファイルに適用しました：

prettier --write _posts

すると、すべての書式設定が美しく一貫性のあるものになりました。

Linkinator

Linkinatorは、MarkdownとHTMLの両方で壊れたハイパーリンクを報告するツールです。次のコマンドを使用して、ローカルで生成されたJekyllサイトをスキャンしました。

linkinator . --server-root _site --recurse --verbosity error

100以上のリンク切れを修正しました。投稿が古いほどリンク切れも多くなりました（皆さんの予想通りです）。WordPressの公開サイトでもLinkinatorを使用できましたが、WordPressのUIで投稿ごとに切り替えてハイパーリンクを編集するのは不便でした（220以上の投稿があります）。そのため、WordPressの公開サイトでのLinkinatorは使用しませんでした。今ではVisual Studio Codeで簡単に検索してリンクを置換できるようになりとても楽になりました。

ChatGPTはリンク切れについて読者により良い体験を提供する点のほか、次のように述べています：

Googleのアルゴリズムは複雑で多面的ですが、サイトに多くの壊れたリンクやリンク切れがあると、ウェブサイトのSEOランキングに（間接的に）悪影響を与える可能性があります。

このため、上記の手順は間違いなくおこなう価値がありました！

メディアライブラリ

すべてのWordPressブログには、投稿で参照されるすべての画像や動画が含まれるメディアライブラリがあります。PlayCanvasのメディアライブラリには1GB以上のコンテンツがありました。しかし、私は多くのコンテンツが実際にはどの投稿からも参照されていないことに気付きました。（GitHubリポジトリを肥大化させないため）使用されているメディアのみをエクスポートしたかったのです。

• ステップ1: WordPressプラグイン Media Cleanerをインストールして、使用されていないメディアファイルを削除します。
• ステップ2: WordPressプラグインExport Media Libraryをインストールし、残りのすべてのメディアファイルをZIP形式でダウンロードします。

このプロセスでメディアライブラリのサイズが1GBから約550MBに削減されました。私はただZIPの中身を（Jekyllサイトのルートフォルダを基準に） assets/media に展開し、新しいファイルの場所を使うようすべてのメディア埋め込みリンクを検索して置換しただけです。簡単ですね！

GitHub Pagesでのホスティング

完全にエクスポートされたJekyllブログができました。では、どこでホスティングすればよいでしょうか？1つのオプションは静的サイトをファイルサーバーに置いてCDNの背後に配置することです。ただし、Jekyllブログのファイルセットは既にGitHubにあるので、サイトをホスティングするためにGitHub Pagesを使用してはどうでしょうか？以下がそのメリットです：

• デプロイの設定が簡単です。

• 管理されたプラットフォームなので、自身のインフラのようにメンテナンスやセキュリティの心配は不要です。

• そのうえ無料です！

メリットとデメリット

移行が完了したので、主なメリットを簡単にまとめてみます：

• 無料：ブログのコストは完全に0ドルになりました。
• 安全: 潜在的な攻撃経路を排除しました。パスワードのリセット確認メールも不要です！
• 強力なツール：Markdownのリントやフォーマットには、多くの無料オープンソースツールがあります。
• 編集が容易: Visual Studio Codeなど、お好きなエディターを選択できます。
• バージョン管理: すべてのコンテンツがバージョン管理され、リビジョン履歴や差分などの機能を使用できます。
• 共同作業が可能: GitHubのプルリクエスト機能を使用して、皆さんからのブログへの貢献を受け付けることができます。
• カスタマイズが可能: Jekyll テーマを使用してHTMLや投稿のスタイルを微調整できます。
• プラットフォームにとらわれない： Markdownを使えば将来的に他のプラットフォームに移行するのも簡単です。

それでは、以降のデメリットは何でしょうか？🤔 正直なところ、何も思い浮かびません！コメント機能はまだ有効になっていませんが、DisqusにはJekyllとのインテグレーションがあるようですので後に有効化できると思います。もし何か重要な点を見逃しているようでしたら、お気軽にTwitterでご連絡ください。数年前にこの移行をおこなっていればよかったと思っています。

オープンソースで皆さんからの貢献を受け付けます

上記のとおり、ブログは現在GitHub上にあります。リポジトリを確認いただき、弊社の取り組みが気に入った場合はStarボタンを押してください。⭐私達はブログのコンテンツをAttribution-NonCommercial 4.0 International licenseの下にオープンソース化することを決めました。これは私達の行動の多くをオープンソース化する取り組みの一環です。

最終的には皆さんにもご参加いただき、ブログを今後さらに改良していきたいと考えています。問題を提案したり、プルリクエストを送ったりすることをぜひ検討してみてください。

• スペルや文法の修正を送信する。
• デザインの微調整や改善を送信する。
• 自身の投稿を送信してPlayCanvasプロジェクトを紹介する。

私からは以上となります。

このブログは皆さんのものです！😊
この新しいプラットフォームで皆さんからも今後、多くのブログ投稿をいただけるようお待ちしています！👋

Will