More than 3 years have passed since last update.

JAMstackなブログ開設にチャレンジ

Last updated at 2020-01-02Posted at 2019-12-22

福岡から世界中の"むずかしい"を簡単にする株式会社diffeasyCTOの西@_takeshi_24です。

この記事はアドベントカレンダー「diffeasyCTO西の24(にし)日連続投稿チャレンジ Advent Calendar 2019」の21日目の記事です。

この記事は「JAMstackなブログ開設にチャレンジ」シリーズとして、連載していきます。
JAMstackなブログ開発にチャレンジしたい方、是非Qiitaアカウントかtwitterをフォローしていただき、ツッコミやいいね！お願いします！

JAMstackって何？

まずJAMstackとは何か？
J : JavaScript
A : API
M : Markup
の頭文字をとったもので、その名の通り、JavaScriptとAPIとMarkupを組み合わせたWebアプリケーションアーキテクチャです。

こちらにJAMstackの定義が記載されています。
https://jamstack.org/

少し前のWebアプリケーション開発といえば、LAMPアーキテクチャがよく聞かれました。
LAMPとは
L : Linux
A : Apache
M : MySQL
P : PHP
の構成です。
ブログでは、今でも多く利用されているWordPressというCMSツールがまさにこの構成です。

JAMstackなアーキテクチャのCMSは「ヘッドレスCMS」と呼ばれています。
ヘッドとはビューの意味で、従来のLAMP構成のCMSだとビューも含めてコンテンツを管理していましたが、ヘッドレスCMSの場合は、その名の通り、ビューがなく、APIでコンテンツを管理します。

JAMstackなサイトのメリットは主に以下のような点です。

JAMstackなブログを公開するためには以下の構成が必要になります。

何はともあれ、コンテンツを管理し、APIで提供するためのヘッドレスCMSが必要です。
よく利用されているのはcontentfulというツールです。

他にもFirebase上でコンテンツを管理するためのヘッドレスCMSFlamelinkなどがあります。

WordPressでは基本的にコンテンツの情報をDBから取得して配信します。
それに対して、JAMstackなブログではブログサイトを静的コンテンツとして高速に配信します。
そのために静的コンテンツを生成するための静的サイトジェネレータが必要です。

静的サイトジェネレータも色々とありますが、有名どころでは、
React.js製の「GatsbyJS」、Go製の「HUGO」、Vue.js製の「VuePress」などがあります。
この辺は好みや使いやすさ、慣れている言語で良いと思います。

Vue.js製のフレームワークNuxt.jsでも静的なサイトをジェネレートできますので、Nuxt.jsを利用したことがある方なら、こちらを利用する選択肢もあります。

静的サイトを配信するためのCDN、ホスティングサービスが必要です。
CDNは各社クラウドサービスのCDNの他、Netlify、FirebaseHostingなどのホスティングサービスがあります。

上記のツールがJAMstackなブログの基本構成になるのですが、ブログを日々運用して改善していくことを考える必要があります。
ソース管理ツールは当然必要ですが、CI / CDツールによって、コンテンツが更新された際に自動的に静的サイトをジェネレートし、継続的に配信を自動化していく仕組みが必要です。

ソース管理ツールも色々ありますが、基本はGitHubを利用するのが一般的です。
その他にはGitLabやBitBucketなどがあります。

CIツールも色々あります。
CircleCI、Jenkinsなどが一般的です。

今回JAMstackなブログ開設のためにチャレンジする構成は、以下の通りです。

次回「Nuxt.js / Contentful でJAMstackなブログ開発編」では、Contentfulで記事を投稿して、Nuxt.jsで表示するところまでを説明します。

是非Qiitaアカウントかtwitterをフォローしていただき、ツッコミやいいね！お願いします！

#advent_24のハッシュタグでフィードバックいただけると嬉しいです！