WordPress+Gridsome+Netlifyを組み合わせたJAMStackにて静的に出力することを試みした。

こんにちわ、こんばんば。今日は昨今流行と言われているJAMStackに挑戦してみました。とりあえずやってみた!というところですので、間違いとかあればご指摘くださいませ。引続きがんばります。

成果物とその仕組について

当ブログをもとに、静的に出力したものがこちらです。https://gridsome.demodemo.link/

Githubのリポジトリはこちら
https://github.com/megane9988/gridsome-megane-blog

もともとあった、このWordPressのブログの情報をAPIとして利用します。静的出力までの流れは、NetlifyがGithubのリポジトリにおいてあるGridsomeのフレームワークを利用して、WordPressの情報を元に 静的なファイルを生成してホスティングしてくれています。

  • WordPressのRest-API
    • WordPressのコンテンツをJSON形式で出力します。WordPressに組み込まれている標準機能の一つです。
    • こちらが提供されるのでいわいるHeadless CMSみたいな使いかたができます。
  • Netlify
    • 静的なファイルをホスティングしてくれるサービス
    • Githubなどのリポジトリと連動し、Javascript等を利用したコマンドも実行できる。
  • Gridsome
    • Vue.jsでつくられたスタティックサイトジェネレーター(静的にファイルを生成してくれるもの)

このための追加したプラグイン

APIとしてデフォルトでは足りない部分を補ってくれます。Jetpackでは関連記事とアイキャッチ画像を。REST API – Head Tagsでは`<head>`内で利用するmetaタグ関連をそれぞれ追加。

いいと感じたところ

  • とりあえず速い、それだけでありがたいことですね。
モバイル
PC
  • そもそも静的なのでセキュア
    • いまはこの執筆用のWordPressが見えていますので、セキュアさは何も変わってないですが、静的な方をメインに据えるスタイルにして、執筆用のWordPressを一般にはアクセスできないようなところにしておくと、より良さそうです。
  • WordPressの管理画面が普段どおり使える
    • 執筆方法について特別何も覚えなくてよいのはありがたいですね。
    • ブロックエディター使いやすいです。
  • Gridsomeにある程度出来上がってる雛形があるので、サクッと出来る
  • なんとなく今風
  • npmのライブラリを利用しやすい
    • ひとまずブックマーク用にアイコンを入れてみましたが、こういうふうに使えるのいいですね。
    • 他にも色々使ってみたいです。

試されるJS力

  • Gridsomeの場合はVue.jsを利用するため、その知識が必要。
  • ほぼほぼ素人のため、つまづきながらポチポチ進めました。
  • このあたりは引続き学習します。
テンプレートをJSで書く機会が訪れた!

とりあえず利用してみて

私のブログのように、それほどアクセスがなくて、そんなに仕組み的に難しいこともしてないようなサイトなら、積極的に使っていくことが可能だなと感じました。今後、さらにいろいろ使いたい機能を足していきながら、出来ることと出来にくいことを調べていきたいです。