ブログ開始から半年経ったので構成について振り返る

技術

ブログの仕組み部分を初期と比べてみる

まずはこのブログがどうやって作られているのかです。

初期

初期はgatsby-source-filesystemを使って、ローカルのmarkdownファイルを記事データとして読み込んでいました。

ローカルでソースコード、記事データの作り込み
ローカルで作り込んだものをGitHubにpush
GitHubにpushされるとNetlifyで自動的にbuild

の流れです。

思い返すと、かなりGatsbyJS公式のチュートリアルに沿った形でソースも記事の取得方法も設定していましたね。

Gatsby.js Tutorials | GatsbyJS

GatsbyJS? GraphQL? git?

……全部わからん！状態からスタートしたので、まぁこんなもんかな……。

今思い返すとこんな右も左も分からない状態からGatsbyJS×GitHubでブログを作ろうと思い立ったもんです……。

元々WordPressに嫌気が指していた時期なので、代わりになる技術を探していたんですよね。

静的サイトジェネレータがいいらしい！ → GatsbyJSが人気らしい！という結構安直な理由でした。

現在

今の仕組みとしてはこんな感じです。

今はHeadless CMSのContentfulを導入して記事の管理をしています。

ソースコードはローカルで作り込み
ソースコード修正をGitHubにpush
GitHubにpushされるとNetlifyで自動的にbuild
記事はContentful上で作成
作成が完了したらApp機能を使ってNetlifyのbuildを走らせる

の流れです。

Headless CMSを導入した理由は、記事が増えてくるにつれて、「あの記事書き直したいけどどこだっけなぁ……」となっていたため。

ファイル名=記事のURLなので、なんとなくファイル名から予測して、1個1個開いたり、自分のサイト見てファイル名見てきたり……とちょっと手間でした。

100記事とかいってしまうと移行も大変になるだろうし、早めに移行してしまおう！ということで移行してしまいました。

NetlifyCMS → microCMS → Contentfulの順に試してContentfulに決めました。

Contentfulに決めたのはMarkdown連携のしやすさです。

フィールドタイプをtext → Markdownに設定すると、gatsby-transformer-remark系のプラグインがそのまま使えるのが大きかった。

ソースコードの構成について

このブログのソースコードに関わる部分を抜き出すとこんな感じになります。

実際のソースコードはGitHubにアップしていますので、そちらをご参照ください。

ソースコード

├ src
│  ├ components
│  ├ img
│  ├ pages
│  ├ styles
│  │　├ css
│  │　└ scss
│  ├ templates
│  └ utils
│
├ gatsby-node.js
├ gatsby-node
│ └ index.tsx
│
├ codegen.yml
├ types
│ └ graphql-types.tsx
│
└ gatsby-config.js

それぞれをざっくり説明。

src

ファイル・フォルダ	説明
components	細かいパーツ
img	素材として使う画像
pages	ページとして読み込むファイル。問い合わせページやタグ一覧など、Contentfulだけでは管理しきれないもの
styles	スタイルシート。SCSSで開発して、CSSにコンパイル
templates	ページ作成用のテンプレート
utils	ユーティリティ

gatsby-node

ts-nodeを使用してTypeScript化をしています。

実際のソースはgatsby-node内のindex.tsx内に記述。

gatsby-nodeのTypeScript化については、下記記事を参考にさせていただきました。

GraphQL Code Generator

下記はGraphQL Code Generator周りです。

TypeScriptの型指定に使っています。

├ codegen.yml
├ types
│ └ graphql-types.tsx

GraphQL Code Generatorについては紹介記事を書いているので、そちらを参考に。

GraphQL Code Generatorのススメ！GatsbyJSのTypeScript化

gatsby-config

gatsby-config.jsは主にプラグインの設定用です。

今インストールしているプラグインを洗い出してみました。

プラグイン	説明
gatsby-plugin-react-helmet	メタ情報作成用
gatsby-plugin-sitemap	Googleに送るsitemap作成用
gatsby-plugin-google-tagmanager	GoogleTagManager導入用
gatsby-plugin-lodash	ビルド時のlodashサイズ削減
gatsby-plugin-typescript	TypeScriptファイルを読み込めるようにする
gatsby-plugin-offline	PWA化
gatsby-plugin-manifest	gatsby-plugin-offlineと組み合わせて使う。manifestファイルの作成
gatsby-source-filesystem	ファイル読込
gatsby-plugin-sharp	gatsby-transformer-sharpと組み合わせて使う。画像最適化
gatsby-transformer-sharp	gatsby-plugin-sharpと組み合わせて使う
gatsby-source-contentful	Contentfulのコンテンツ取得
gatsby-transformer-remark	markdown変換
gatsby-remark-autolink-headers	見出し部分に自動でアンカーリンクをつける
gatsby-remark-code-titles	gatsby-remark-prismjsと組み合わせて使う。コードブロックに見出しをつける
gatsby-remark-prismjs	コードブロックのシンタックスハイライト
gatsby-remark-custom-blocks	markdown中に特定の記法でカスタムブロックを埋め込める
gatsby-remark-external-links	外部リンクを別画面で開く
gatsby-plugin-catch-links	markdown中の内部リンクをLinkタグに置き換える
gatsby-plugin-prefetch-google-fonts	Googleフォントの読込用

今回はここまでです。