WordPressって便利ですけどサーバを用意したり、そもそもそのサーバ費用がかかったりと何かと不便ですよね。
そこでFirebaseです。FirebaseとはGoogleが管理しているサービスの１つです。Firebaseにはホスティング機能があります。さらに、基本的には無料です。
本記事ではWordPressブログをFirebaseに移行するための方法をまとめていきたいと思います。
環境
筆者のパソコン環境は以下です。
- MacOS High Sierra 10.13.4
- MAMP 5.7
- PHP 7.0.33
- WordPress 5.3.2
おおまかな手順
まず、WordPressからFirebaseに移行するためにはどのような手順を踏んでいくのかおおまかに説明します。そのあとに細かい手順をまとめます。
（WordPress導入についての説明は割愛します）
- WordPressから静的ファイルを生成
- Firebaseにデプロイ（アップロード）
- sitemapアップロード
WordPressから静的ファイルを生成
FirebaseでのホスティングはHTMLファイルを表示するだけのものなので、まずWordPressのページ全てをHTMLにします。
難しいように聞こえますが、WordPressのプラグインでHTMLファイルを生成することができるのでご安心ください。
Simply Static
Simply Staticというプラグインを使います。
インストール
WordPressのプラグイン追加画面の検索窓にSimply Staticと入力してください。すぐに見つかると思います。インストールしたら有効化まで行ってください。
パーマリンク設定
Simply Staticを使うときはパーマリンク設定に気をつけなければいけません。
前述したように、FirebaseではHTMLを表示するだけなのでHTMLファイルを生成しなければいけません。そのためにはまず、サイトのページへのアクセスをhtmlにします。
URLの構造はカスタムなのでなんでもいいですが、自分は投稿記事のタイトルをつけるようにしました。
余談ですが、噂では、検索エンジンでは aaa.com/p=123 のような意味のわからないURLよりも、たとえ日本語でも意味のある言葉をURLにした方が評価が高くなるそうです。
Simply Staticの設定
リンク先URL
相対URL を使用する を選択します。
追加する URL
sitemap.xmlを追加しました。これはあとで説明します。
追加ファイルとディレクトリ
除外する URL
上級者向けの設定
ここは特に設定なし
Simply Static実行
設定が終わったのでSimply Staticで静的ファイルを生成してみます。
管理画面の左ペインのSimply Staticにマウスオーバーすると、３つのメニューが出てきます。その中の生成をクリックします。
静的ファイルを生成する をクリックします。
生成するファイル数（記事の数、カテゴリの数など）が多いほど時間がかかります。
完了すると、画像にあるようにダウンロード用のリンクが表示されます。ここをクリックしてダウンロードします。
これで静的ファイルの生成が完了しました。では次はFirebaseにサインアップしてみましょう。
Firebase
https://firebase.google.com/?hl=ja
使ってみるをクリックします。
プロジェクト作成
プロジェクトを追加 をクリックします。
プロジェクト名をつける
アナリティクスの有効化
Google Analyticsを有効にするか選択します。特に害はないので有効にすることをおすすめします。
アナリティクス設定
プロジェクトを作成をクリックするとFirebaseプロジェクトが作成されます。
静的ファイルをアップロード
ではWordPressで生成した静的ファイルをFirebaseにアップロードします。
Firebaseプロジェクトの左ペインのHostingをクリックします。そして始めるをクリックすると手順が乗っています。
Firebase CLIのインストール
$ npm install -g firebase-toolFirebaseへログイン
$ firebase loginログインに成功するとこんな画面が開きます。
プロジェクトの開始
任意のディレクトリに移動して下記のコマンドを実行
$ firebase init
成功するとこんな表示が出てきます。ここでHostingを選択してください。
生成した静的ファイルを移動
Firebaseではpublicディレクトリ配下が配信の対象となるのでまずpublicディレクトリを作成します。
$ mkdir publicこのpublicディレクトリに生成した静的ファイルを移動します。
デプロイコマンド実行
$ firebase deployデプロイが成功すると下記のような表示が出ます
Deploy complete!さらにその下に、ホスト先のURLが表示されているかと思います。そのURLにアクセスしてみてください。自分のサイトが表示されたら成功です。
お疲れ様でした。
最後までお読みいただきありがとうございます。
次回はWordPress→Firebase移行に関する注意点をまとめていこうと思います。
