GatsbyJSをインストールするには以下の手順が必要になります。
+ NodeJSをインストール
+ GatsbyCLIをインストール
+ Gatsbyのプロジェクトを作成する
それでは具体的に見てみましょう
GatsbyJSはNodeJS上で動きます。ここでは詳しく説明しませんが、一般のJavascriptはWebブラウザで動くものをさすが、NodeJSはサーバーで動くJavaScriptと理解してくれれば問題ありません。一言でいうと便利な奴です。
NodeJS公式サイト
インストールはLST版を選択すれば問題ないです。
NodeJSがインストールすればあと少しです。GatsbyCLI(Command Line Interface(コマンド・ライン・インターフェース))をインストールしましょう。これをインストールすることでgatsbyコマンドが使えるようになります。
npm install --global gatsby-cli
これをコマンドプロントでたたくだけです。
それではいよいよGatsbyJSのプロジェクトを作成します。
コマンドプロントを開いて
cd desktop
gatsby new blog
と入力してください。PCのデスクトップにblogという名前のフォルダができました。
いよいよGatsbyJSを立ち上げてみましょう。
cd blog
gatsby develop
と入力してみましょう。
GatsbyJSが立ち上がります。
ブラウザを開いて早速確認してみましょう。
[http://localhost:8080/](http://localhost:8080/)
をブラウザに入力してください。
こんな画面が表示されたら成功です。
おめでとうございます。
本当はGatsbyにはかっこいい便利なStarterというものがあります。
GatsbyJS Starterライブラリ
色々完成して素晴らしいのですがコードの質もまばらです。
CSSを使っていたり、SCSSを使っていたり書き方も色々でプログラムを知らないと混乱します。
知識があるならお勧めしますが、最初はスクラッチで作成していった方が僕も勉強になりますし、このサイトではフルスクラッチで作成していきたいと思います。
第1回 | GatsbyJSをはじめる |
第2回 | GatsbyJSをインストールする |
第3回 | GatsbyJSにページを追加しよう |
第4回 | GatsbyJSのLayoutを設定しよう |
第5回 | GatsbyJSのimageを使ってみよう |
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント