GatsbyJSをインストール





GatsbyJSとは

  • 静的サイトジェネレーターで簡単にシンプルなブログが作れる
  • ReactJSを使っている
  • Markdownの記事書いて、記事の作成もコマンドから行える
  • node.js環境で動く
  • SPA(Single Page Application)が作れる
  • データベース不要で、ページの表示が速い
  • GraphQLを使っている
  • (starter)スターターが容易されていて、予め必要物がそろっているので色々なスターターを使えば自分好みにカスタマイズできる
    このように色々あるが、Hexoと同じような技術

スタータとプラグインのリンク

starter
plugin

GraphQL(グラフキューエル)とは

  • Facebookが開発したAPI用のクエリ言語
  • サーバとのデーターのやり取りする記述
  • Gatsbyはデータ取得にこれを使用している
  • WebAPIとはオンライン上で使えるアプリケーション(instagramなど)
  • REST(REpresentational State Transfer )とよく比較される

ReactJS(リアクト)とは

React(公式ホームページ)

  • JavaScriptのフレームワークではなく、UIを作るためのライブラリ
  • 画面の表示が速い
  • Facebookが開発でFacebookやInstagramなどに使われている
  • UIを作りやすい
  • Virtual DOM(仮想DOM)
  • JavaScriptのコードの中にHTMLタグを記述できる(JSX)

Gatsbyをインストールする

Node.jsが必要なのでインストールしておく

1
npm install --global gatsby-cli

公式どおりにインストールする

以下のコマンドでバージョンを確認

1
gatsby --version

表示されれば無事インストールされる

プロジェクトを作成

1
gatsby new blog

これでblogというフォルダに色々キットが保存される
cd ディレクトリ名で移動して

1
gatsby develop

を入力すると
http://localhost:8080/
にGatsbyが立ち上がる

node.jsが最新版でなかったためか、エラーが出たので注意する

参考リンク

GatsbyJS公式