【初心者向け】Gatsbyでプロジェクトを始める方法
gatsby cliのインストール
npm install -g gatsby-cli
とコマンドを打ちます。
インストールされているか確認するためには、
gatsby -v
Gatsby CLI version: 5.5.0
とこんな感じで返ってきたら成功です。
gitからコードをコピー(クローン)する場合
すでにgithubに上がっているリポジトリに途中から参加する場合
ダウンロードしたいコードをgithubからコピーしてきます。
そして以下のコマンドを打ちこみます。
git clone https://github.com/gatsbyjs/gatsby-starter-hello-world
新しくリポジトリを作成し開発を始める場合
gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-hello-world
この時、
gatsby-site は サイト名、
url はクローンしたいコード情報です。
クローンせずゼロから新しく開発する場合
gatsby new
と入力すると、2択の質問が5つ出てきます。
プロジェクト名をあらかじめ決めたいという場合は、
gatsby new プロジェクト名
とコマンドを打てばOKです。
※gatsby newと打ってもプロジェクト名は設定できるのでどちらでも問題ありません。
実行できたら...
package.jsonの中に以下のようにgatsbyがインストールされているか確認しましょう！
(バージョン(^4.22.0)は執筆時点でのものなので気にしなくて大丈夫です)
そしたらローカル環境でコード編集ができるようになります。
ローカル環境でサーバーを立ち上げるためには、
npm run develop または gatsby develop
で立ち上がります。
githubからクローンして
githubで他のエンジニアの方と開発を続ける場合、
あなたがローカル環境でコードを書き加えて、
それをリモートリポジトリにプッシュする必要がありますよね
(初心者の方に向けて言うと、githubにアップするようなイメージ)。
その時、git cloneのコマンドを打った後に、
ファイルの状態を確認をしてから
あるコマンドを打ち込む必要があります。
その状態とは、
①node_modulesというファイルがない
かつ
②package-lock.jsonというファイルがある
という状態です。
後述しているような「local:8000で検索」という操作は
ローカル環境で書いたコードを
ブラウザで見ることができる操作なのですが、
node_modulesというファイルがないと見ることができません。
package-lock.jsonというファイルは
そのnode_modulesの情報を
圧縮しているようなファイルになります。
つまり、node_modulesがなくてもpackage-lock.jsonがあれば
いつでも復活させることができます。
説明が長くなりましたが、以下の手順でコマンドを打ち込んで下さい。
git cloneした後に、①②の状態が確認出来たら
npm install
そしたら、node_modulesのファイルが復活しているはずです。
その後先ほどのように
npm run develop または gatsby develop
を打ち込んでみてください。
node_moduleとpackage-lock.jsonの説明
local:8000で検索
ターミナルで長いコマンドが出力されて"success"の文字が出たら、
ブラウザでlocal:8000と検索すれば自分のPCだけでサイトが表示されます！
以上が大まかな環境構築手順でした！
公式ドキュメント
Discussion