2018年12月18日

デザイン

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

目次

  1. はじめに
  2. 導入手順
  3. 記事の投稿
  4. まとめ

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

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

Serverless FrameworkでAWS Lambdaアプリを開発しよう!(前編)

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

はじめに

GatsbyJS

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

スクリーンショット 2018-12-17 17.01.12.png (133.7 kB)

NetlifyCMS

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

スクリーンショット 2018-12-17 17.01.50.png (265.4 kB)

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

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

導入手順

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

スクリーンショット 2018-12-17 17.09.46.png (94.6 kB)

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

スクリーンショット 2018-12-17 17.14.10.png (85.5 kB)

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

スクリーンショット 2018-12-17 17.30.30.png (96.6 kB)

記事の投稿

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

ログインが完了すると以下のような管理画面が表示されるので、右上のNew Blogボタンを押して新しく記事を投稿します。
スクリーンショット 2018-12-17 17.37.20.png (55.4 kB)

記事の編集画面は以下のようにタイトル、記事の説明文、本文を入力することができるので、記事コンテンツを入力し、完了したら右上のPublishボタンを押して投稿は完了です。
スクリーンショット 2018-12-17 17.44.08.png (74.0 kB)

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

スクリーンショット 2018-12-17 17.53.30.png (34.1 kB)

まとめ

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

 

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

0

0

AUTHOR

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP