Pure LiquidとmicroCMSでブログサイトを作ってみよう
前回、Liquid をベースに静的サイト制作ができる開発テンプレート Pure Liquid について紹介をしました。今回は Pure Liquid が備える静的サイトジェネレーターと日本製のヘッドレス CMS で注目を集める microCMS を使って Jamstack 構成のブログサイトを作成していきたいと思います。
プロジェクトのセットアップ
利用したいディレクトリで以下セットアップ用のコマンドを実行します。ここでは yarn をベースに解説を進めていきます。
<YOUR-PROJECT-NAME> は独自のプロジェクト名に差し替えてください。
yarn create pure-liquid <YOUR-PROJECT-NAME>
対話モードで利用するパッケージマネージャーを聞かれます。 yarn を選択して進めます。
環境のセットアップが終わったら、ターミナルに表示されるコマンドを実行してみましょう。
cd <YOUR-PROJECT-NAME> && yarn build && yarn start
上記コマンドで開発環境のローカルサーバーが立ち上がります。
http://localhost:8080 にアクセスをしてみてください。
以下のような画面が表示されれば OK です。
microCMS での記事作成
まずは microCMS のアカウントを作成します。
microCMS でブログの記事情報を作成したいと思います。新規 API の作成でブログを選択します。
しばらくするとサンプル記事をベースにブログ形式で必要な API の雛形が準備されます。
API 設定から自動でセットアップされた API スキーマが確認できます。ここでは以下のような項目が作成されています。
-
title: タイトル -
content: 内容 -
eyecatch: アイキャッチ -
category: カテゴリ
必要に応じて欲しいフィールドを追加してください。今回は試しに記事説明（ディスクリプション）を入力するフィールドを作成してみたいと思います。
「フィールドを追加」を選択し、フィールド ID を description、表示名を説明、種類をテキストフィールドに設定してください。
検証のため、記事をさらに追加しておきましょう。
記事一覧画面で API プレビューを選択すると以下のように、どのようなレスポンスが返ってくるのかを確認できます。
以上で microCMS での作業は完了です。
記事の静的生成
CMS の事前準備は整ったので作成したブログ API を利用して記事ページを静的に出力させていきましょう。⛷
環境変数の設定
作成した Pure Liquid のプロジェクトを開き、.envファイルをルート直下（ package.json が存在する階層）に作成します。環境変数として microCMS のドメイン情報や API キー情報を以下のように記載します。
MICROCMS_DOMAIN=https://<YOUR-Project>.microcms.io
MICROCMS_API_KEY=<MICROCMS_API_KEY>
API 呼び出し
microCMS で作成したブログ API から記事情報を取得する実装を行います。
src/_data/ に blogs.js ファイルを作成し、以下記載内容をコピペします。
/* eslint-disable */
require('dotenv').config();
const EleventyFetch = require('@11ty/eleventy-fetch');
module.exports = async () => {
try {
const MICROCMS_DOMAIN = process.env.MICROCMS_DOMAIN;
const MICROCMS_API_KEY = process.env.MICROCMS_API_KEY;
const url = `${MICROCMS_DOMAIN}/api/v1/blogs`;
return EleventyFetch(url, {
duration: '30s',
type: 'json',
fetchOptions: {
headers: {
// microCMS API key
'X-MICROCMS-API-KEY': MICROCMS_API_KEY,
},
},
});
} catch (e) {
console.error(e);
return {
// fallback data
};
}
};
上記の処理で blogs という名前のグローバルデータで、どの liquid ファイルからでも microCMS から取得したブログ記事情報にアクセスができるようになります。
Pure Liquid には @11ty/eleventy-fetchというモジュールが標準で同梱されています。@11ty/eleventy-fetchを用いると、フェッチ時にキャッシュを作成し、API へのリクエストが大量に送られてしまうことを防いでくれます。
キャッシュの期間は duration で設定できます。秒であれば43s、分の場合は2mといったように指定します。duration: "*" と指定するとキャッシュを使用して、新しいデータを次回から取得しなくなります。
{
duration: '30s',
type: 'json',
fetchOptions: {
headers: {
// microCMS API key
'X-MICROCMS-API-KEY': MICROCMS_API_KEY,
},
},
}
テンプレートファイルの作成
まずは microCMS の情報が取得できているかを確認します。
src/index.liquid のファイルを展開し、liquid の json フィルターを利用して、適当な箇所でデータを出力してみましょう。
{{ blogs | json }}
次のように出力されれば OK です。contents の中に記事情報が配列で格納されていることが確認できます。
src 配下に blogs フォルダーを作成し、index.liquid ファイルを作成しましょう。
---
layout: layout/theme.liquid
pagination:
data: blogs.contents
size: 1
alias: blog
addAllPagesToCollections: true
eleventyComputed:
title: "{{ blog.title }}"
description: "{{ blog.description }}"
breadcrumbs: [{item: "{{ blog.title }}"}]
pageId: "blogs"
permalink: "blogs/{{ blog.id }}.html"
---
<div class="l-container">
<h1 class="c-heading--lev1">📖 {{ blog.title }}</h1>
{% if blog.eyecatch.url %}
<div class="blogs__eyecatch"><img src="{{ blog.eyecatch.url }}" width="{{ blog.eyecatch.width }}" height="{{ blog.eyecatch.height }}" alt=""></div>
{% endif %}
<div class="blogs__container">
{{ blog.content }}
</div>
</div>
今回は 1 つのブログテンプレートを用いて複数のファイルを記事毎に作成したいため、pagination という機能を利用します。以下の指定では blogs.contents に含まれる複数の記事情報をデータとして取得し、blog という名前で各記事の情報を取得します。
pagination:
data: blogs.contents
size: 1
alias: blog
addAllPagesToCollections: true
liquid テンプレートでは以下のように値を出力します。
{{ blog.title }}
ここでは各記事のファイル名は一意のものになるよう、記事 ID を以下のように使用しています。
permalink: "blogs/{{ blog.id }}.html"
ここまでファイルの準備ができたら、build をかけて記事を生成してみましょう。
microCMS で作成した記事が blogs 配下で以下のように作成されていれば OK です。
ローカルサーバーを起動して記事情報が出力できているか確認してみましょう。
ブログサイトを公開
ブログの内容やサイトの体裁を独自のものに整えたら、ホスティングサービスへデプロイする準備を進めます。お好みのサービスを利用してサイトを公開しましょう。各サービスでの設定方法などは割愛します。
記事公開時に自動でコンテンツが反映されるよう、Webhook の設定もお忘れなく。
Tips
この記事ではプレビュー画面の実装は触れませんが、通常の CMS 案件でプレビュー機能はほぼ必須になるかと思います。
サーバーレス関数が利用できる環境であれば、Eleventy Serverless が検討できるかもしれません。Eleventy には SSR ができる EleventyServerlessBundlerPlugin というプラグインが用意されています。
CSR でプレビュー画面の作成を検討する場合は以下記事を参照してみてください。
Discussion