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等を利用したコマンドも実行できる。
- https://www.netlify.com/
Gridsome
- Vue.jsでつくられたスタティックサイトジェネレーター(静的にファイルを生成してくれるもの)
- https://gridsome.org/

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

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

Jetpack
- https://ja.wordpress.org/plugins/jetpack/
REST API – Head Tags
- https://ja.wordpress.org/plugins/rest-api-head-tags/

いいと感じたところ

とりあえず速い、それだけでありがたいことですね。

モバイル

PC

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

試されるJS力

Gridsomeの場合はVue.jsを利用するため、その知識が必要。
ほぼほぼ素人のため、つまづきながらポチポチ進めました。
このあたりは引続き学習します。

テンプレートをJSで書く機会が訪れた!

とりあえず利用してみて

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

関連記事

Posted in

雑記