1) 技術的な選定
公式ページを立ち上げるにあたり、JAMStackで始めようということに決めはしたものの、JAMStackは基板とする仕組みとコンセプトで400を超えるプロジェクトが存在している。
StaticGen | Top Open Source Static Site Generators
この中で2020年に現在上位10位には確実に入っているGatsbyJSを選んだする。GatsbyJSはReactJSを基板とし、マークダウン(markdown)ファイルをサイト内で参照可能な情報としてアクセスできる。2020年段階ではテンプレートも多く始めるには手頃だと感じた。
gatsby-starter-blog: Gatsby Starter | GatsbyJS
starter-gatsby-blog: Gatsby Starter | GatsbyJS
GatsbyJSはファイルベースでブログを構築できるがデータソースはプラグインとして提供されており1つ以上のデータソースを使用できる。データソースにはGithubのレポジトリーにあるリソース、コンテンツ配信サービスのContentfulからデータソースを参照することもできる(Contentfuleはサービス側でプラグインやモバイル向けのSDKを提供している)。
今回は、ファイルベースを維持しつつ、Contentfulからブログの投稿元として参照するものとした。
2) テンプレートの選定
技術的な構成を大まかに決めたがもう一つ決める必要があるものがある、それは見た目で標準的なGatsbyJS の技術ブログとは差異を付けたい。しかし10年近くWebレイアウトから離れていたので自力で作るのは今回は荷が重い。
失われたWebレイアウト技術を埋めるべく今回はテンプレートと使用している。
Instagramのギャラリー機能やブログ投稿スタイルをいくつか用意されている。ブログ内検索、category、tag検索など一通りの機能を提供している。
Evanto Marketから購入可能。GatsbyJSのテンプレート自体の登録すうは少ないが、ReactJSのテンプレートが使えるはず(投稿者がReactJSに疎いのでこれ以上詳しい情報は提供できないのであしからず)。
Fatima - Creative React Gatsby Blog Template by Rainbow-Themes | ThemeForest
購入したテンプレートはfile-systemをデータソースとするので、
- ローカルでmarkdownファイル及び画像リソース追加、gatsby buildで静的ページ作成、デプロイツールでデプロイ
- レポジトリーとして管理されたフォルダ上でローカルでmarkdownファイル及び画像リソース追加、gitレポジトリー情へpush後にCI経由(github action)で、デプロイ
を想定している。今回はContentful を使うことになったので改修を加える。
3) 改修備忘録
改修についての詳細はReactJS、GatsbyJSの仕様と深く結びついている点があり、別途記事をあげようかと考えている。要点だけ以下に示す。
a) Contentfulとfile-system markdawnの構造の整合性
GatsbyJSのfile-system データソースから参照可能なmarkdownファイルはページ構築フェーズタイミングではJSON構造体として表現される。テンプレートはfile-system markdown前提で構築されるため、もう一つのデータソース、Contentfulからのデータソースの構造と少し異なる。似せることは可能だがそれでも差異が出てくる。ReactJS初心者のため今回は無理やりfile-systemベースのmarkdownファイル形式に変換するコードを書いている。
b) Contentfulとfile-system markdawnの画像リソースの整合性
aと同じように画像リソースの扱いもfile-systemとContentfulでの形式は異なる。そのためReactJSの仮想DOM構築タイミングで渡すコンポーネントを切り分ける必要があった。
c) 未宣言定義の手動定義
GatsbyJSの仕様によるトラブルとして別途記述するが、GatsbyJSはデータソースから最適なデータ構造を得ようとする。これが意味することは、データソース上で存在しない定義、たとえば変数名などは存在しないものとして扱う。またGatubyJSでのコーディングは、データ構造をimmutableとして扱うことでセキュリティ上のリスクを避けるように設計されているので、必要だが現時点で定義されていない変数名などは手動で定義する必要がある。
混乱に拍車をかけるのが、file-sysytemベースだとデータ構造がimmutableになる前にマニュアルで定義を付加できるタイミングがある。Contentfulのデータソースも同様に変更できるようにな錯覚をしてしまうが実際にはfile-systemと同じように変更を行おうとするとエラーとなる。file-system以外は宣言タイミングで出現する可能性がある変数名及び型を指定する事で問題が解決する。
e) 不要なコンポーネントの除外
Instagramのギャラリー機能は不要とみなし除外した、生的ページにと問い合わせ機能を組み込むためのDisqusも除外している。Contentfulのデータ整合性を取る段階で複数データソース対応時にエラーをdしていた前文検索機能、tag,categoryの各種コンポーネントも一時的に無効化している(検索,tag,categoryはのちに復元)。
以上。データソースを複数用意するだけでテンプレートと試行錯誤する時間がかかってしまった。手間をかけた分、他の技術ブログよりは凝った見た目になっていると期待したい。
