All Articles

ブログをGatsbyJSとNetlifyに移行した

はじめに

今まででに何度もブログを移行し続けたり、改修したりしていたが今までで自分的に一番良い出来なブログができた。

構成としては、GatsbyJS+Neylify+Netlify CMSで実装した。

2日間で実装したので付け焼き刃の知識しかないが、メモとして残しておく。

前回構成と問題

前回の構成としては、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

自分で1から実装することも考えたが休日の2日間で終わらせたかったので今回はテーマを選んだ。

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

Netlify

まずは登録する。

ログイン後、

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

30分くらいで終わった。

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

Netlify CMS

SettingのIdentityから以下のように設定し、ユーザーを招待する。

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

感想

ざっくりやったことはこれくらい。簡単にできる。

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

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

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