GatsbyJSとNetlifyCMSでWebサイトを作ろう！

新しい技術にチャレンジし続けるeishisのアドベントカレンダーDay18です！

昨日はServerless FrameworkとTypeScriptを使ってAWS Lambda(Node.js)アプリを効率的に開発する記事でした。

Serverless FrameworkでAWS Lambdaアプリを開発しよう！（前編）

今回はGatsbyJSとNetlify CMSを使ったWebサイトの構築についてご紹介したいと思います。

はじめに

GatsbyJS

GatsbyJSはReactで作られている静的サイトジェネレータになります。記事をマークダウン形式で記述することで、そのデータをもとに静的なページを生成してくれます。表示は完全に静的なWebサイトとして表示されるので、動的に表示させるWordPressのように、PHPがインストールされているWebサーバや、データベースの用意も不要なため、管理コストを抑えることができます。

NetlifyCMS

NetlifyCMSは、Netlifyが提供しているCMS(コンテンツ・マネジメント・システム)になります。GatsbyJS単体ではマークダウン形式を記述するため、エディタが必要になります。NetlifyCMSを導入することでWebサイト上で記事を書いて投稿までできるようになるため、WordPressと同じような使用感で記事を書くことができます。

Netlifyについては前回の記事でご紹介したので、あわせてご覧ください。

Netlifyとは？ 〜概要から導入まで〜

導入手順

それでは早速導入手順についてご説明していきます。NetlifyCMSのWebサイトでスターターテンプレートを配布していくのでこちらを利用します。サイトにアクセスするとどの静的サイトジェネレータを利用するか選択ができるのでGatsbyJSを選択します。

Netlifyの画面に遷移するので、Githubと連携してスターターテンプレートをcloneします。
Netlify CMSではGUIを用いてマークダウンファイルを作成し、Gitに自動でpushしてくれるため、Gitの連携が必要になります。

連携が完了すると、リポジトリ名の設定ができるので、任意のリポジトリ名を設定して導入は完了です。
デプロイが完了すると以下のようなWebサイトが作成されます。

記事の投稿

導入が完了したので、次に記事の投稿を行います。記事の投稿はhttps://(webサイトのアドレス)/adminにアクセスし、NetlifyCMSにログインします。メールアドレスとパスワードを聞かれるので、登録したNetlifyのアカウントのメールアドレスとパスワードを入力してログインします。

ログインが完了すると以下のような管理画面が表示されるので、右上のNew Blogボタンを押して新しく記事を投稿します。

記事の編集画面は以下のようにタイトル、記事の説明文、本文を入力することができるので、記事コンテンツを入力し、完了したら右上のPublishボタンを押して投稿は完了です。

Publishボタンを押すと、裏ではgithubへのpushと、Webサイトのデプロイが走るので、それを待ってから再度サイトにアクセスすると、先程投稿した内容が反映されているかと思います。

まとめ

今回はGatsbyJSとNetlifyCMSを使ったWebサイトの構築についてご紹介しました。
GatsbyJSがReactで作成されているため、デザインの変更についてもReactの知識が必要になります。bageleeではReactについての学習記事もあるので、こちらもあわせてご覧ください。

 

Reactでスマートスピーカーのコマンド発音サービスを作ろう（１）【作りながら覚えるReact】