ブログ開始から半年経ったので振り返る～構成編～
技術
- 2020年6月27日
このブログの一番最初の投稿は2020/1/12。
GatsbyJSでブログを作ってみたが記念すべき最初の投稿です。
どんなブログでも一番最初の投稿って後から見返すと、こっ恥ずかしいですね。
気づいたらブログを始めて半年近く経っていました。
最初の頃から色々と変わったこともあるので、この機会にブログについて振り返ってみたいと思います。
長くなりそうなので分割します。今回はブログの構成についてです。
ブログの仕組み部分を初期と比べてみる
まずはこのブログがどうやって作られているのかです。
初期
初期は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.tsxGraphQL 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フォントの読込用 |
今回はここまでです。
次回は記事の内容について振り返っていきたいと思います。
