GatsbyJSとNetlify CMSでブログを作る


GatsbyReact用の非常に人気の高い静的サイトジェネレータです。

 

Next.js(SSR寄り)を使っているとどうしてもGatsbyも試してみたくなります。

スター数ではNext.jsの方が多いですがUsed byで見るとGatsbyの方が倍以上使われてるんですよね。

 

WordPressの代替を探していることもあり、GatsbyNetlify CMSで管理するブログを試してみます。

用語・略語:CMS:コンテンツマネジメントシステムSSG:静的サイトジェネレータ

GatsbyJS

 

とりあえずCLIをインストール。

 

続いてサイトを作成します。

1から書いてもいいんですが現在358もスターターが登録されてます。

こちらからスターターを選んで使ってみましょう。

パッケージマネージャーにnpmyarnかと聞かれます。

今回は普段使ってるyarnで。

 

最初は見た目だけでghostを選びましたが、よく見るとHeadless CMS "Ghost"用のスターターでした。説明はちゃんと読まないと…。

今回はテストがてらなので1番人気のスターターにしました。

 

準備が出来たら開発モードで動かしてみましょう。

デフォルトだと以下のアドレスで実行結果を確認できます。

  • HP:http://localhost:8000/
  • DB:http://localhost:8000/___graphql

 

記事を追加するにはcontent/blog/にマークダウン形式のファイルを追加します。

ホットリロードされるので手軽に編集出来ます。

 

開発が済んだらビルドしましょう。

buildpublic/に静的ファイルが作成されます。

serveコマンドでbuildした内容の確認もできます。

 

基本的な動きはこんな感じか。コマンドがわかりやすくていいですね。

Netlify CMS

 

途中で触れたGhostと同じセルフホスティング型のヘッドレスCMSです。

なんでNetlifyかというとSSG向けのCMSだからです。Gatsbyと相性がいい。

アカウントはEmailでも作れますが、どうせ連携に使うのでGitHub / GitLab / Bitbucketでサインアップするといいです。

 

gatsbynetlify-cms用のスターターを使ってGithubに上げます。

 

NetlifyNew site from Gitからスターターのリポジトリを選択して、案内通りにポチポチしていればxxxx.netlify.appというアドレスで閲覧可能になります。

 

Settings」→「Identity」を開いて「Enable Identity」した後、下まで スクロールして「Enable Git Gateway」します。

その後、xxxx.netlify.app/adminにアクセスするとログイン可能になるのでサインアップしてメール認証をすることで、よく見るような管理者ページが開けます。

ここで編集してPublishすることでGitPushされページ自体も更新されます。

 

ちなみにこのままだと誰でもユーザー登録できてしまうのでNetlifyに戻って設定をしておきます。

所感

Gatsbyは触りだけでプラグインやテーマもいじっていないのでNext.jsと比べて評価できないけど、SSGに絞っているのは思ったより気が楽でいいかもしれない。

 

CMSは現状だと設定が面倒な割に.mdファイルをブラウザで書いてるだけだから利点を感じにくい。public/をそのままGitHub Pagesに入れた方が楽な気すらする。

ソースコード(リポジトリ)をプライベートにできるのは多少利点か。

Netlifyは連携が強みっぽいのでLambda連携などしてSSGの手が届かないところを補う形で運用できればいい感じになりそう。


コメントを残す

メールアドレスが公開されることはありません。