BACK
|Gatsbyチュートリアル

Gatsby使い方 Step1

Gatsby JS logo image

準備 コマンドラインを使えるようになろう

マックの方はこのリンク | ウィンドウズの方はこのリンクの参照をお勧めします

NodeJSとGatsbyのインストールはHomeBrewからがお勧め

  1. このリンクからHomeBrew(ホームブリュー)をインストール

NodeJSとnpmをインストール

インストール後はターミナル、もしくはコマンドプロンプトを開いて下記のコマンドをうつ

  1. まずはHomeBrewを最新のバージョンにします
brew update
  1. 次にNodeJSをインストール
brew install node
  1. 次にNodeJSとNpmのバージョンをチェック
node -v
npm -v

もしくは

Macの方 ->Recommended For Most Usersをクリック。pkgファイルがダウンロードされるので、クリックしてインストール

Windowsの方 ->Windowsをクリックするとダウンロードが始まりますので、インストール もしくはマックのインストールと同じ手順で行いましょう

Gatsbyのインストール

次にターミナル、もしくはコマンドプロンプトより下記を入力してギャッツビーをインストール

npm install -g gatsby-cli

Gatsbyのスターターファイルを作成

  1. ターミナル、もしくはコマンドプロンプトを開きギットハブからスターターをダウンロード
gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
  1. スターターファイル、Hello-Worldを開く
cd hello-world
  1. ギャッツビーのウェブサイトを走らせてみる
gatsby develop

これでブラウザ(グーグルクロームを使用)を開いて「localhost:8000」とURLにタイプしてみましょう。

ギャッツビーコマンドの説明

  • new は新しいGatsbyコマンドを作成するコマンド 
  • 二つ目のファイル名は自分の好みのものに変更可

下記のような画面が表示されましたか?

Gatsby スターターをウェブブラウザに表示した際の最初の画面

これで最初のGatsbyサイト作成です 🎉 Congratulations!

  1. Gatsbyjsの使い方 ビギナー編 Step1 Gatsbyjsとは?また、インストールの仕方
  2. Gatsbyjsの使い方 ビギナー編 Step2 Gatsbyjsでページを生成してみよう!
  3. Gatsbyjsの使い方 ビギナー編 Step3 Gatsbyjsでフッターとヘッダーを作って、リンクオブジェクトを使ってみよう!
  4. Gatsbyjsの使い方 ビギナー編 Step4 Gatsbyでスタイルを設定しよう!
*Flamingod NewsはアメリカITの最新のニュースを日本語で紹介します。

...