Gatsby触ってみる【HelloWorld編】

2021/01/10

漠然とVuePressからGatsbyに置き換えたいなーと思っているけど,まずはGatsbyがどんなもんか触ってみます。
とりあえず今日はHelloWorldまで。

チュートリアルやってみる

チュートリアルがあるのでチュートリアルやっていきます。

Nodeのインストールから丁寧に書いてありとても親切です。
すでにNodeはインストール済みなのでスキップします。

Gatsbyのスターターを使用するのにGitが必要なようです。
Gitもインストール済みなのでスキップ。

GatsbyCLIをnpm経由でインストールする。
グローバルにインストールしちゃいます。

$ npm install -g gatsby-cli

gatsbyコマンドを使用してスターターから新しいサイトを作成します。

$ gatsby new {任意の名前} https://github.com/gatsbyjs/gatsby-starter-hello-world

newコマンドで任意の名前のフォルダにスターターに準じたコードを配置してくれます。
今回使用したスターターは必要最低限の(HelloWorldな)要素を備えたスターターです。

開発モードで確認します

gatsby develop

コマンドが長いのでpackage.jsonのscriptsを下記のように編集

"scripts": {
  // (略)
  "dev": "gatsby develop",
  // (略)
},

特に使ってるエディタがなければVSCode推奨みたいです。
といってもチュートリアルのスクショでよく出てくるから〜というくらいの理由っぽいです。

あわせてPrettierプラグインも入れておくといいようです。

Gatsbyを動かす前提条件としてnodeとnpmとgitが必要。
全て入っていればすぐにHelloWorldできますね。
環境構築わりと細かく丁寧に説明されているからとてもわかりやすいです。
ちょっと短いですけど今日はこのへんで。

それではまた明日。