ブログ開始から半年経ったので振り返る~構成編~

技術


このブログの一番最初の投稿は2020/1/12。

GatsbyJSでブログを作ってみたが記念すべき最初の投稿です。

どんなブログでも一番最初の投稿って後から見返すと、こっ恥ずかしいですね。

気づいたらブログを始めて半年近く経っていました。

最初の頃から色々と変わったこともあるので、この機会にブログについて振り返ってみたいと思います。

長くなりそうなので分割します。今回はブログの構成についてです。

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

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

初期

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

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

の流れです。

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

Gatsby.js Tutorials | GatsbyJS

GatsbyJS? GraphQL? git?

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

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

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

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

現在

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

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

  1. ソースコードはローカルで作り込み
  2. ソースコード修正をGitHubにpush
  3. GitHubにpushされるとNetlifyで自動的にbuild
  4. 記事はContentful上で作成
  5. 作成が完了したら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-sitemapGoogleに送るsitemap作成用
gatsby-plugin-google-tagmanagerGoogleTagManager導入用
gatsby-plugin-lodashビルド時のlodashサイズ削減
gatsby-plugin-typescriptTypeScriptファイルを読み込めるようにする
gatsby-plugin-offlinePWA化
gatsby-plugin-manifestgatsby-plugin-offlineと組み合わせて使う。manifestファイルの作成
gatsby-source-filesystemファイル読込
gatsby-plugin-sharpgatsby-transformer-sharpと組み合わせて使う。画像最適化
gatsby-transformer-sharpgatsby-plugin-sharpと組み合わせて使う
gatsby-source-contentfulContentfulのコンテンツ取得
gatsby-transformer-remarkmarkdown変換
gatsby-remark-autolink-headers見出し部分に自動でアンカーリンクをつける
gatsby-remark-code-titlesgatsby-remark-prismjsと組み合わせて使う。コードブロックに見出しをつける
gatsby-remark-prismjsコードブロックのシンタックスハイライト
gatsby-remark-custom-blocksmarkdown中に特定の記法でカスタムブロックを埋め込める
gatsby-remark-external-links外部リンクを別画面で開く
gatsby-plugin-catch-linksmarkdown中の内部リンクをLinkタグに置き換える
gatsby-plugin-prefetch-google-fontsGoogleフォントの読込用

今回はここまでです。

次回は記事の内容について振り返っていきたいと思います。

sake

現役システムエンジニア。
普段はホスト系のお仕事してます。
ブログでは主にWeb関係の技術について、勉強したことや実際にコーディングしてみた内容を発信していきます。

プロフィール