GatsbyJSをインストールする

01 17, 2019

GatsbyJSをインストールする

GatsbyJSをインストールするには以下の手順が必要になります。

  • NodeJSをインストール
  • GatsbyCLIをインストール
  • Gatsbyのプロジェクトを作成する それでは具体的に見てみましょう

NodeJSをインストールする

GatsbyJSはNodeJS上で動きます。ここでは詳しく説明しませんが、一般のJavascriptはWebブラウザで動くものをさすが、NodeJSはサーバーで動くJavaScriptと理解してくれれば問題ありません。一言でいうと便利な奴です。
NodeJS公式サイト
インストールはLST版を選択すれば問題ないです。

GatsbyCLIをインストール

NodeJSがインストールすればあと少しです。GatsbyCLI(Command Line Interface(コマンド・ライン・インターフェース))をインストールしましょう。これをインストールすることでgatsbyコマンドが使えるようになります。

npm install --global gatsby-cli

これをコマンドプロントでたたくだけです。

GatsbyJSプロジェクトを作成

それではいよいよGatsbyJSのプロジェクトを作成します。 コマンドプロントを開いて

cd desktop
gatsby new blog

と入力してください。PCのデスクトップにblogという名前のフォルダができました。

GatsbyJSを立ち上げてみよう

いよいよGatsbyJSを立ち上げてみましょう。

cd blog
gatsby develop

と入力してみましょう。 GatsbyJSが立ち上がります。 ブラウザを開いて早速確認してみましょう。

http://localhost:8080/

をブラウザに入力してください。 1.PNG こんな画面が表示されたら成功です。 おめでとうございます。

本当はGatsbyにはかっこいい便利なStarterというものがあります。
GatsbyJS Starterライブラリ
色々完成して素晴らしいのですがコードの質もまばらです。 CSSを使っていたり、SCSSを使っていたり書き方も色々でプログラムを知らないと混乱します。 知識があるならお勧めしますが、最初はスクラッチで作成していった方が僕も勉強になりますし、このサイトではフルスクラッチで作成していきたいと思います。


コリ

コリといいます。奈良県でサラリーマンをしています。GatsbyJSでサイトを作るのが趣味です。