Gatsbyでブログを始めるまで

Programming

はじめに

この記事は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を選びましょう。 image.png (813.2 kB)

ほぼそのまま使えると思うTemplate 3選

image.png (2.1 MB) image.png (786.5 kB) image.png (2.1 MB)

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

  1. https://app.netlify.com/start にアクセス
image.png (166.4 kB)
  1. UploadしたRepositoryを選択する
image.png (213.2 kB)
  1. Build command を入力する

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

image.png (163.4 kB)

まとめ

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

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

image.png (138.8 kB)
#Blog#CMS#Gatsby

Related Links


GatsbyにShare機能、OGPタグをつける
Gatsbyにタグ機能、カテゴリ機能をつける(基礎編)
タグ機能、カテゴリ機能をつける(応用編)
GatsbyにTableOfContents(目次)をつける
DarkModeのCSSを適用させる
GatsbyブログのSEO対策でやっておくこと一覧
多機能なGatsbyJSのThemeをつくってnpmに公開した話
Yoshiki Ohashi
2x歳の個人事業主エンジニア。SI企業1年, Webベンチャー企業2年で上流から下流の経験を経て独立。 エンジニアらしく性格は温和。プロジェクトチームに心理的安全性を求める。go gin | Spring | Java | Kotlin | Vue | Python | 筋トレ | キャンプ | 個人開発 | 新潟出身

よく読まれている記事


Gatsbyでブログを始めるまで
GatsbyにShare機能、OGPタグをつける
Gatsbyにタグ機能、カテゴリ機能をつける(基礎編)
DL実装するときに理解すること
多機能なGatsbyJSのThemeをつくってnpmに公開した話
© 2020 Yoshiki Ohashi All rights reserved.