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/
をブラウザに入力してください。 こんな画面が表示されたら成功です。 おめでとうございます。
本当はGatsbyにはかっこいい便利なStarterというものがあります。
GatsbyJS Starterライブラリ
色々完成して素晴らしいのですがコードの質もまばらです。
CSSを使っていたり、SCSSを使っていたり書き方も色々でプログラムを知らないと混乱します。
知識があるならお勧めしますが、最初はスクラッチで作成していった方が僕も勉強になりますし、このサイトではフルスクラッチで作成していきたいと思います。