はじめに
本記事は https://tech-blog.yoshikiohashi.dev/posts/start-gatsby-blog のクロスポスト記事になります。
この記事はGatsbyというヘッドレスCMS技術で構成されています。今回は「エンジニア初心者でもできる」を前提に以下の構成で記事を作成していこうと思います。
- Gatsby始めるまで
- GatsbyにShare機能、OGPタグをつける
- タグ機能、カテゴリ機能をつける（基礎編）
- タグ機能、カテゴリ機能をつける（応用編）
- GatsbyにTableOfContents（目次）をつける
- DarkModeをつける
始める前に知っておくこと
この記事に行き着くということは既にCMSが何者かは理解している気もしますが一応。
CMSとは
Contents Management Systemの略ですね。IT業界は略語が多くて何言ってるかわからないこと多いですよね。。。
ざっくり分類すると何かしらの記事をWebサイト上に残せるWebシステムのことになります。相変わらずシェア率の高いWordPressだったり、はてなブログだったり、wix.comとか様々なサービスがありますね。
ヘッドレスCMSとは
今回で言うGatsbyはCMSの中でもヘッドレスになります。ヘッドってなんだよ！って突っ込みはあるかと思いますが、PCでいう記憶容量のHDDとか記事を覚えておくDBの存在がなく、予め必要なデータをビルドするときに静的なHTMLとして作成しておいて表示スピードを上げたものがヘッドレスCMSということになります。
ちなみにヘッドレスCMSは他にも色々あり、HugoだったりJEKYLLがあります。Gatsbyとの違いは
- Gatsbyのシェア率が高い
- GraphQLを使用している
- デザインのテンプレートが豊富
というのが利点としてあります。
CMS（記事の保存先）は何を使うのか
Gatsbyで色々表示が早くなるはなるのですが、作る前に記事の保存先をどこで管理し、どこで記事を書くのかという前提を決めておく必要があります。
基本的には、「ソースコードで管理」でいいのですが、そのままだといちいちgitターミナルからでの作成・更新になってしまうので、PCを開かないと記事が書けなく結局「記事の更新がストップする」という事になりかねないので慎重に選びましょう。
自分が試したのは以下のサービスです。私のイチオシはnetlify cmsですね！
netlify cmsの利点
- Markdownで書けてPreviewを見ながら記事がかける
- ブログのCDNをnetlifyで行えばどこでも記事を編集できる
- スマホ対応は現時点ではされていないが実装が予定されている
gatsby template を選ぼう
Gatsbyにはある程度完成されたWordPressでいうテーマみたいなものが存在します。ここで良いテーマを選べるとブログの作成工数がぐっと抑えられます！
Template選び方の注意
例えば利用したいCMSがある場合、以下のようにCMS Netlifyにチェックを付けてお気に入りのTemplateを選びましょう。
ほぼそのまま使えると思うTemplate 3選
-
https://www.gatsbyjs.org/starters/thriveweb/yellowcake/
- 旅行ブログとかグラフィカルな記事を書きたいならこれ
- ちなみに別で運営している旅行ブログはこちらを使用しています。
-
https://www.gatsbyjs.org/starters/alxshelepenok/gatsby-starter-lumen/
- 技術ブログとか文章多めな記事の場合はこちらがベーシックでおすすめ
- このブログもこのテンプレートを参考に作成しています。
-
https://www.gatsbyjs.org/starters/netlify-templates/gatsby-starter-netlify-cms/
- 本家 netlifyのテンプレート。ベースとしては最適。
git cloneしよう
ここまでベーステンプレートの選択をしてきたかと思いますが、良いと思ったテンプレートは見つかりましたか？ここが決まればあとは簡単です。以下のコマンドを打ちましょう。
gatsby-cliをグローバルインストールする
npm install -g gatsby-cli
気に入ったテンプレートのURLをコマンドで打ちましょう
gatsby new [your-blog-name] https://github.com/netlify-templates/[your-select-template]
ローカル環境で立ち上がるか確認
cd [your-blog-name]
gatsby develop
localhost:8000 にアクセスしてみましょう。表示されたらOK。表示されてない場合は何かが足りないので手順を振り返ってみましょう。
表示されたらGitHubなどにRepositoryをUploadしてコミットしておきましょう。
netlify uploadしよう
ここまで来たらGUIでぽちぽちするだけです。
- UploadしたRepositoryを選択する
- Build command を入力する
Build command はnetlify CI上で実行されるコマンドになります。Gatsbyのビルドコマンドはgatsby build になるので入力して[Deploy site]をクリックしてCIが成功したら完了です。
まとめ
いかがだったでしょうか？立ち上げまで順調にできましたか？
WordPressと比べると準備だったり覚えるのが大変だとは思いますが、これも理想のスピードのため。
ちなみにこのブログのスピードをLightHouseで測ってみると結構いい点数が取れました！みなさんも是非Gatsby導入して快適なブログを手にしてみてください。それでは次回の記事で。
