はじめに

本記事は https://tech-blog.yoshikiohashi.dev/posts/start-gatsby-blog のクロスポスト記事になります。

この記事はGatsbyというヘッドレスCMS技術で構成されています。今回は「エンジニア初心者でもできる」を前提に以下の構成で記事を作成していこうと思います。

始める前に知っておくこと

この記事に行き着くということは既に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でいうテーマみたいなものが存在します。ここで良いテーマを選べるとブログの作成工数がぐっと抑えられます！

Gatsby Template

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でぽちぽちするだけです。

https://app.netlify.com/start にアクセス

UploadしたRepositoryを選択する

Build command を入力する

Build command はnetlify CI上で実行されるコマンドになります。Gatsbyのビルドコマンドはgatsby build になるので入力して[Deploy site]をクリックしてCIが成功したら完了です。

まとめ

いかがだったでしょうか？立ち上げまで順調にできましたか？
WordPressと比べると準備だったり覚えるのが大変だとは思いますが、これも理想のスピードのため。

ちなみにこのブログのスピードをLightHouseで測ってみると結構いい点数が取れました！みなさんも是非Gatsby導入して快適なブログを手にしてみてください。それでは次回の記事で。