BACK
|Gatsbyチュートリアル
Gatsby使い方 Step1
準備 コマンドラインを使えるようになろう
マックの方はこのリンク | ウィンドウズの方はこのリンクの参照をお勧めします
NodeJSとGatsbyのインストールはHomeBrewからがお勧め
- このリンクからHomeBrew(ホームブリュー)をインストール
NodeJSとnpmをインストール
インストール後はターミナル、もしくはコマンドプロンプトを開いて下記のコマンドをうつ
- まずはHomeBrewを最新のバージョンにします
brew update
- 次にNodeJSをインストール
brew install node
- 次にNodeJSとNpmのバージョンをチェック
node -v
npm -v
もしくは
Macの方 ->Recommended For Most Usersをクリック。pkgファイルがダウンロードされるので、クリックしてインストール
Windowsの方 ->Windowsをクリックするとダウンロードが始まりますので、インストール もしくはマックのインストールと同じ手順で行いましょう
Gatsbyのインストール
次にターミナル、もしくはコマンドプロンプトより下記を入力してギャッツビーをインストール
npm install -g gatsby-cli
Gatsbyのスターターファイルを作成
- ターミナル、もしくはコマンドプロンプトを開きギットハブからスターターをダウンロード
gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
- スターターファイル、Hello-Worldを開く
cd hello-world
- ギャッツビーのウェブサイトを走らせてみる
gatsby develop
これでブラウザ(グーグルクロームを使用)を開いて「localhost:8000」とURLにタイプしてみましょう。
ギャッツビーコマンドの説明
- new は新しいGatsbyコマンドを作成するコマンド
- 二つ目のファイル名は自分の好みのものに変更可
下記のような画面が表示されましたか?
これで最初のGatsbyサイト作成です 🎉 Congratulations!
- Gatsbyjsの使い方 ビギナー編 Step1 Gatsbyjsとは?また、インストールの仕方
- Gatsbyjsの使い方 ビギナー編 Step2 Gatsbyjsでページを生成してみよう!
- Gatsbyjsの使い方 ビギナー編 Step3 Gatsbyjsでフッターとヘッダーを作って、リンクオブジェクトを使ってみよう!
- Gatsbyjsの使い方 ビギナー編 Step4 Gatsbyでスタイルを設定しよう!
*Flamingod NewsはアメリカITの最新のニュースを日本語で紹介します。
...