Madea-K Dev

プログラムのメモや日々思ったことなど

< 35歳迄に起業し1000万円以上稼ぐ >

高得点の爆速Headless CMSサイト(WordPress HeadLess CMS × Nuxt × Netlify) を60分以内でPWAにて構築してみよう。

まず初めに

今回パフォーマンス評価を見るために Auditing Performance を使用してます

仮に Auditing Performance のスコアが 100だからといって、本当の意味で良いサイトとは思いません

あくまで一つのツールからの判断、本当の評価はいつもエンドユーザーであることを忘れてはいけません

ただし、一つの指標として Auditing Performance のスコアを 100に近づける努力は必要だと思います

また Auditing Performance のスコアが高得点であれば、検索エンジン対策にもなるはずです

それに高得点であれば、例えば自分が作ったサイトを売り込むときの一つの売り文句になります

なので高得点を目指さない理由はありません
さぁ高得点を目指しましょう

まずは WordPress を準備し、Headless化よう

1) WordPressをインストールします

2) WP Headless のプラグインをインストールします

3) 下記 REST APIを叩いてみてJSON形式で取得できてるかを確認します
http://WprdPressのドメイン/wp-json/wp/v2/posts

補足

カスタムフィールドが必要があれば ACF を使用してみます

ACFだけだとRest APIが取得できないため、ACF to REST API プラグインを合わせて導入します

サイドバーにカスタム投稿を表示する場合は、Custom Post Type UI を使用します

カテゴリが初期だと tag_id で返ってきているために、カテゴリ名を返すように下記コードを functions.php に追記します

参考 : https://oku-log.com/blog/rest-api-category/

アイキャッチ画像を Rest API で取得する場合は better-rest-api-featured-images プラグインを使用します

次に Nuxt Cli を使用して実装しよう

1) Nuxt Cliをインストールします

2) ページをコーディングします

3) コーディングしたテンプレートに Rest APIで取得したデータをページに出力します
Rest API Handbook : https://developer.wordpress.org/rest-api/reference/

SNS紐付け方法
Twitter,Line
https://qiita.com/kako351/items/8f357a773eae048e5ab3
Facebook
https://developers.facebook.com/docs/plugins/share-button/
はてなブックマーク
https://b.hatena.ne.jp/guide/bbutton
icon用画像
https://icons8.com/icons

4) nuxt.config.jsにgenerateの内容を記載します

※slugが日本語の場合、文字化けするので下記などで対策するようにします

https://highfivecreate.com/blog/tips/2925.html

5) モジュールを使用しPWA化します
https://qiita.com/QUANON/items/880eaa43c1d2f55f5b4d

6) 一度 npm run generate でローカルで問題ないか生成して確認します

最後に Netlify でデプロイしよう

1) 両方の環境が準備できたら Netlify を使用し、デプロイを行ないます

2) WordPressの更新で Netlifyのコンテナを走らせる方法

まずは Netlify でビルド用フックを生成します
スクリーンショット-2019-08-06-19.35.35.png

次に生成したビルドフックを WordPress 側に WebSub/PubSubHubbub プラグインを使用して登録します
スクリーンショット-2019-08-06-19.38.02.png

3) 試しに WordPress から更新してみて、Netlifyのデプロイが走ってるかを確認します

補足
Netlifyにて「Does not use HTTP/2 for all of its resources」の問題が起きてる時は、nuxt-netlify-http2-server-push プラグインを使用すると解決出来ます

以上で、爆速サイトの完成です

HTMLの文法チェックツール

https://validator.w3.org/nu/?doc=https%3A%2F%2Fmaeda-k.dev%2F

全ソース

https://github.com/maeda-k/maeda-k.dev

/ Vue-Nuxt

×