💭
【Gatsby】プロジェクトを作る流れ
概要
案件で、Gatsbyを使うことがあったので、プロジェクト作成までの流れをメモ。
node.jsやnpmなどはインストールしてる状態とする。
手順
そんなに長い記事でもないのでサクッとメモ。
- npmコマンドでグローバルにgatsby-cliのインストール
- gatsbyコマンドを利用して新しいサイトを作成
- 開発サーバの起動
といった流れになる。
Gatsby Cliを入れる
npm install -g gatsby-cli
gatsby -v
Gatsby CLI version: 5.5.0
グローバルにインストールした後は、バージョンを確認。表示されれば成功。
Gatsbyのプロジェクトを作成
プロジェクトを作成するには以下のコマンド。
gatsby new
上記のコマンドを入力するとサイトの名前やCSSは何を使うかなどの詳細を決める項目へ移る。詳細は下記
//サイト名
What would you like to call your site?
//ディレクト名
What would you like to name the folder where your site will be created?
//typescript使うかどうか
Will you be using JavaScript or TypeScript?
//CMSは使うかどうか。使わないならnoを選択
Will you be using a CMS?
//CSSのフレームワークを選択
Would you like to install a styling system?
//追加でプラグインを入れるかどうか。何も選ばないならDoneを選択
Would you like to install additional features with other plugins?
上記のことを聞かれたら、プロジェクトを作成が始まる。
終了したら、作成したディレクトにcd ディレクト名で移動する。
その後、下記のコマンドでローカルで立ち上がるか確認。
//ローカル
gatsby develop
npm run develop //こっちでもいい。
//ビルドする場合
gatsby build
といったんはこんな感じでプロジェクトが作成できる。
別の作成方法
gatsby newを実行すればサイト名やディレクトリ名、使用するCMSなどを対話形式で作成できるが、下記の方法でも作成できる。
gatsby new ディレクトリ名
こちらで作成してgatsby-config.jsを見るとGatsby Imageなどパッケージがインストールされてる。
またGatsbyにはスターターというWordpressでいうテーマみたいのがたくさんあって、それを使ってプロジェクト作成も可能。
gatsby new ディレクトリ名 スターターのURL
スターター一覧のURLはこちら
まとめ
下記のサイトを参考にさせていただきました。
Discussion