WordpressからGatsbyに移行した

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

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

https://www.gatsbyjs.org

starts gatsby 2018 11 30 23 57 46

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

Gatsbyの特徴

早い・やすい・うまい

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

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

速度比較WordPressGatsby
DOMContentLoaded647ms147ms
Load989ms624ms

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がいい感じに貼れます

エディタ設定

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

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

starts gatsby 2018 12 01 11 50 27

チェックリスト

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

  • 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とかは追々やります。 やりました

starts gatsby 2018 12 01 19 36 14

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

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

starts gatsby 2018 12 01 00 01 10