All Articles

GatsbyJS製のブログを作った

はじめに

今まででに何度もブログを移行したり、改修したりしていたが今までで一番良い出来だと思う。

GatsbyJS + Neylify + Netlify CMS の構成

前回構成と問題

前回の構成としては、XServerでWordPressを動かしていた。 しかしWordPressの問題が多く、プラグインなどの更新がめんどくさかったり、ソースコードをいじるのがめんどくさかったり、遅かったり、プラグインのバグだったり、といろいろ不満があった。

そこで勉強がてらに静的サイトジェネレーターに移行することにした。過去に Hugo + github-pages を使用したことがあったので、それ以外で検討した。

技術選定

静的サイトジェネレーター

静的サイトジェネレーターの比較は以下のサイトから。

StaticGen | Top Open Source Static Site Generators

nuxtの経験はあったため、Reactがベースなものがいいなと思って調べた結果、最近流行りのGatsbyJSを使うことにした。

ホスティング

github-pages以外のものを使ってみたかったので調べた結果、以下の2つが候補になったがNetlifyを使うことにした。

Surge

Surge

  • GatsbyJSのチュートリアルにでてきた
  • コマンドで完結する手軽さ

ただしカスタムドメインのSSL化などが有料枠なために辞めた。 Why is Surge free? • Surge

Netlify

Netlify

  • 以前から興味があった
  • カスタムドメインのSSL化も無料でできる
  • CMSも提供してる

結果的にNetlifyにした。主な決め手はもともと興味があったからというのがでかい。

やったこと

GatsbyJS

まずはチュートリアルをやった。

Gatsby.js Tutorials | GatsbyJS

8章まであったが7章まで進めた。

テーマ決め

チュートリアルが終わったあと、Starter Libraryからブログのテーマを決めた。

Starter Library | GatsbyJS

選んだテーマをcloneして自分のリポジトリに上げておく。

Netlify

まずは登録する。

ログイン後、

  1. サイトの登録 (さっきのリポジトリと連携する)
  2. カスタムドメインのセット
  3. カスタムドメインのSSL化

30分くらいで終わった。

NetlifyはCDNも提供してるのでそれを活かすためにNetlifyのDNSを使用する。ドメインはお名前.comで取得していたのでNetlifyのネームサーバーを登録する。

Netlify CMS

微妙に動作が不安定だが、個人で利用する分にはそこまで気にならない。

CMSには https://{custom-domain.com}/admin でログインできる。

感想

思っていた以上に簡単にできた。

ビルドもデプロイも自動化されてるし、カスタムしたければローカルで変更しGitHubにあげるだけ。

CMSを使ったのも初めてだったがとても便利だった。ただちょっとシンプルすぎるなとも思ったが使いやすい。画像の複数アップロードがCMSからはできなかったので、ローカルで追加してからPushしている。

速度に関しては今までで一番速く満足である。

Published May 19, 2022

Infra Engineer / Co-Founder / Freelance.