BACK
|Gatsbyチュートリアル
Gatsby使い方 Step1
準備 コマンドラインを使えるようになろう
マックの方はこのリンク | ウィンドウズの方はこのリンクの参照をお勧めします
NodeJSとGatsbyのインストールはHomeBrewからがお勧め
- このリンクからHomeBrew(ホームブリュー)をインストール
NodeJSとnpmをインストール
インストール後はターミナル、もしくはコマンドプロンプトを開いて下記のコマンドをうつ
- まずはHomeBrewを最新のバージョンにします
brew update- 次にNodeJSをインストール
brew install node- 次にNodeJSとNpmのバージョンをチェック
node -vnpm -vもしくは
Macの方 ->Recommended For Most Usersをクリック。pkgファイルがダウンロードされるので、クリックしてインストール
Windowsの方 ->Windowsをクリックするとダウンロードが始まりますので、インストール もしくはマックのインストールと同じ手順で行いましょう
Gatsbyのインストール
次にターミナル、もしくはコマンドプロンプトより下記を入力してギャッツビーをインストール
npm install -g gatsby-cliGatsbyのスターターファイルを作成
- ターミナル、もしくはコマンドプロンプトを開きギットハブからスターターをダウンロード
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の最新のニュースを日本語で紹介します。
...