WordpressからGatsbyに移行した

2018-12-01

この記事は OIC ITCreate Club Advent Calendar 2018 2 日目の記事です。 https://adventar.org/calendars/3072

このブログを PHP+MySQL な WordPress から Gatsby という静的サイトジェネレーターでの運用に切り替えました。

https://www.gatsbyjs.org

当ブログの FC2 blog -> Movable Type -> WordPress -> Gatsby という歴史を見ると、歴史は繰り返すんだなという気持ちです。

Gatsby の特徴

早い・やすい・うまい

ビルド時に HTML をすべて静的にビルドするので、安全で高速なサイトが作れるだけでなく、テキストファイルとして記事が管理できるので、Git で管理したいエンジニアにとっても良い選択肢だと言えると思います。 S3 などにデプロイすることで、ホスティング費用を下げることも考えられます。

せっかくなので、Chrome を使って速度比較を行ってみました。 CDN とか特に使ってないですが爆速です

速度比較	WordPress	Gatsby
DOMContentLoaded	647ms	147ms
Load	989ms	624ms

GraphQL

Gatsby は主に 4 つのフェーズが有ります。

1 つ目は、ソースプラグインを使用して、記事の基になるデータを取得します。ローカルファイルを扱う gatsby-source-filesystem や、WP から記事の取得を行う gatsby-source-wordpress などが有ります。

2 つ目は、トランスフォームプラグインを使用して、データを変形させます。 Markdown に変換する gatsby-transformer-remark などが有ります。

3 つ目は、クエリです。 1・2 フェーズで収集したデータを元に、記事の一覧・記事の本文などを取得します。

4 つ目は、レンダリングです。クエリで得たオブジェクトを React を使って描写します。

複数のフェーズで分離しているため、プラグインの導入・カスタマイズなども手軽に行なえます。

クエリの例ですが、例えばこのような Markdown ファイルが存在するとします。

---
title: "Sweet Pandas Eating Sweets"
date: "2017-08-10"
---

Pandas are really sweet. Here's a video of a panda eating sweets.

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/4n0xNbfJLR8"
  frameborder="0"
  allowfullscreen
></iframe>

記事の一覧を出すためのクエリを実行します。

{
  allMarkdownRemark(
    sort: { fields: [frontmatter___date], order: DESC }
    filter: { frontmatter: { publish: { ne: false } } }
  ) {
    edges {
      node {
        id
        frontmatter {
          title
          date(formatString: "YYYY-MM-DD")
        }
        html
      }
    }
  }
}

レスポンスはこのようなものになります。

{
  "data": {
    "allMarkdownRemark": {
      "edges": [
        {
          "node": {
            "id": "eef0f3ed-ddfc-57d5-9688-cdce03605b11",
            "frontmatter": {
              "title": "Sweet Pandas Eating Sweets",
              "date": "2017-08-10"
            },
            "fields": {
              "slug": "/sweet-pandas-eating-sweets/"
            },
            "html": "<p>Pandas are really sweet.</p>\n<p>Here's a video of a panda eating sweets.</p>\n<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/4n0xNbfJLR8\" frameborder=\"0\" allowfullscreen></iframe>"
          }
        }
      ]
    }
  }
}

これを使用して React でエレメントの描写を行うフローで Web 開発を行います。

本ブログの構成

Gatsby
- ローカルの Markdown/画像
- WordPress(今までの記事を読み込める)
Github
- コードを置いている
CircleCI
- ビルド・デプロイを自動化している
Xserver
- rsync でファイルを置いて、HTTP で公開している
- WordPress を動かしている

デプロイ方法

CircleCI で生成された HTML ファイル等を、rsync を使用して Xserver に転送しています。 Workflow を使用して、デプロイ処理を書いています。ビルド毎に、ビルド番号・ブランチ名・コミットハッシュのディレクトリが作成され、ファイルがコピーされます。 Master ブランチのデプロイの際は、シンボリックリンクを張り替えることでデプロイが行えるようになっています。

deploy:
  working_directory: ~/builds
  machine:
    enabled: true
  steps:
    # ビルド等は省略
    - run:
        name: Deploy Over rsync
        command: |
          rsync -a -e "ssh -p 10022" ./public/ *****@*****.xsrv.jp:~/kamijin-fanta.info/public_html/blog/*****/build_${CIRCLE_BUILD_NUM}_${CIRCLE_BRANCH}_${CIRCLE_SHA1}/

          if [ "${CIRCLE_BRANCH}" == "master" ]; then
            ssh *****@*****.xsrv.jp -p 10022 "ln -sfn ~/kamijin-fanta.info/public_html/blog/*****/build_${CIRCLE_BUILD_NUM}_${CIRCLE_BRANCH}_${CIRCLE_SHA1}/ ~/kamijin-fanta.info/public_html/blog/current"
          fi

対応する.htaccess はこんな感じです。

gatsby-source-wordpress プラグインを使用して WordPress の過去記事を取得しているのですが、 /wp-json 以下のディレクトリにアクセスを行うことで実現しているので、こちらのリダイレクト設定を残す必要があります。

あとは、画像を保管している wp-content 以下や、管理ページの wp-admin にアクセスを行う必要が有ります。

そういった WordPress 固有のパス以外を、シンボリックリンクを張っている /current に内部リダイレクトを行う設定を記述しています。

ErrorDocument 404 /current/404.html
DirectoryIndex index.html index.php
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.php$ - [L]
  RewriteRule ^wp-json.* /index.php [L]

  # 過去記事URLからのリダイレクト設定
  RewriteCond %{REQUEST_URI} !index\.php
  RewriteCond %{REQUEST_URI} !^/wp.*
  RewriteCond %{REQUEST_URI} ^/20.*
  RewriteRule ^(.*)\.php$ /$1/ [L,R=301]

  RewriteCond %{REQUEST_URI} !index\.php
  RewriteCond %{REQUEST_URI} !^/wp.*
  RewriteCond %{REQUEST_URI} !^/current.*
  RewriteRule ^(.*)$ current/$1 [L]
</IfModule>

入れたプラグイン

gatsby-transformer-remark

Markdown のドキュメントをページとして公開できるようになります

gatsby-remark-prismjs

Markdown 中のシンタックスハイライトが行えます

object FugaObject {
  def main(arg: Array[String]) = {
    println("hello scala")
  }
}

gatsby-remark-external-links

Markdown 中の URL が安全になります

<a
  href="https://www.gatsbyjs.org"
  target="_self"
  rel="nofollow noopener noreferrer"
>
  https://www.gatsbyjs.org
</a>

gatsby-plugin-twitter

Twitter がいい感じに貼れます

太陽系観察中生命体

へんなのへんなのへんなの( ´･ヮ･`)https://t.co/bYMHjNGz3n
— 古川未鈴 (@FurukawaMirin) 2018年11月29日

エディタ設定

WP では、スクリーンショットを貼り付けする際には、ファイルとして保存 → アップロード画面 → 挿入というステップが必要になっていましたが、通常のエディタが使用可能なので、VisulStudioCode 等のエディタを使用可能になるので、画像を貼り付けるためのプラグインが使用可能です。これが結構便利なので乗り換える大きな理由にもなっています。

https://marketplace.visualstudio.com/items?itemName=mushan.vscode-paste-image

チェックリスト

静的サイトジェネレータはブログに特化していないことも多いので、やることが結構多かった

gatsby-transformer-remark
- Markdown のファイルを利用可能にする
gatsby-remark-prismjs
- 構文のハイライトが有効になる
gatsby-plugin-react-helmet
- <title> の設定
- OGP での、外部サイトでのリンク展開設定
gatsby-remark-emojis
emoj がを使用可能になる
gatsby-plugin-twitter
- Twitter 埋め込み
gatsby-plugin-google-analytics
- GA で解析できるようになる

おしまい

~~OGP とかは追々やります。~~ やりました

みんなも Gatsby で爆速 WEB ライフを！

↓wordpress 時代最後のスクリーンショット　デザインはあんまりいじってないです