2019-06-02に更新

GatsbyJSをインストールする

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/](http://localhost:8080/)

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

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

Originally published at www.corylog.com
ツイッターでシェア
みんなに共有、忘れないようにメモ

view_list [連載] ブロガー向けGatsby講座
第1回 GatsbyJSをはじめる
第2回 GatsbyJSをインストールする
第3回 GatsbyJSにページを追加しよう
第4回 GatsbyJSのLayoutを設定しよう
第5回 GatsbyJSのimageを使ってみよう

aocory

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!
ボードとは?

関連記事

コメント