Gatsuby, Get Started!

Gatsubyとは

Gatsbyとは、Reactベースの無償のオープンソースのフレームワーク。 速攻でWEBサイトやアプリを作成することができる？

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps

GatsubyJSで始める

1. Gatsubyクライアントをインストールする

   $ npm install - global gatsby-cli
   

   npmが古いバージョンの場合は、下記のコマンドで最新版にあげてください。

   $ npm i -g npm
   

2. サイトを作成する

   好きなフォルダに移動し、下記のコマンドを打つと、「my-gatsuby-site（任意）」のディレクトリが作成される。 プロジェクトフォルダに移動してください。

   $ npx gatsby new my-gatsby-site
   $ cd my-gatsby-site
   

3. 動作確認する

   • デベロップモードで起動する。

     $ npm run develop
     
     DONE  Compiled successfully in 2623ms                                  18:19:03
     
     
     You can now view gatsby-starter-default in the browser.
     
     http://localhost:8000/
     
     View GraphiQL, an in-browser IDE, to explore your site's data and schema
     
     http://localhost:8000/___graphql
     
     

   • http://localhost:8000/でアクセスすると下記のようなデフォルトページが表示される

   

   • GraphiQLモードで起動する

   • http://localhost:8000/___graphqlでアクセスするとGraphQLにてサイトデータやスキーマを検証できる？

   

   • GraphQLとは？…今度調べる(TODO)

4. 本番運用用のビルドを作成する

   サイトに必要な最適化されたプロダクションビルドデータが展開される

   npm run build
   

5. 本番用ビルドをローカルで動かす

   npm run serve