リニューアルしようかなと思って。２年ぶりに触ります。
% gatsby -v
zsh: command not found: gatsbyパソコンも変わっているのでやはり入っていないですね。
インストール
公式を確認しながら進めていきます。
% npm install -g gatsby-cli% gatsby -v
Gatsby CLI version: 4.14.0インストールできました
プロジェクト作成
% gatsby newプロジェクトを作ります。
What would you like to call your site?
✔ · totolog34サイト名を聞かれるので好きな名前を
What would you like to name the folder where your site will be created?
✔ Documents/ totolog34作成するディレクトリ名を入力
? Will you be using JavaScript or TypeScript?
(Single choice) Arrow keys to move, enter to confirm
❯ JavaScript
TypeScriptTypeScript で作る予定だけど、公式を見るとまずは JavaScript で作ってあとから TypeScript にしたほうがいいと書いてあるのでそうする。
TypeScript を使用する場合は、最初にチュートリアルを実行してから、プロジェクトを TypeScript に変換することをお勧めします。https://www.gatsbyjs.com/docs/tutorial/part-1/
? Will you be using a CMS?
(Single choice) Arrow keys to move, enter to confirm
❯ No (or I'll add it later)
–
Contentful
DatoCMS
Netlify CMS
Sanity
Shopify
WordPressCMS を使うかどうか聞かれるが、「No (or I'll add it later)」（いいえ、またはあとで追加します）を選択。
? Would you like to install a styling system?
(Single choice) Arrow keys to move, enter to confirm
❯ No (or I'll add it later)
–
Emotion
PostCSS
Sass
styled-components
Theme UI
vanilla-extractスタイリングシステムを聞かれる。なんでもいいとは思うけど styled-components にしました。
? Would you like to install additional features with other plugins?
(Multiple choice) Use arrow keys to move, spacebar to select, and confirm with an enter on "Done"
◯ Add the Google Analytics tracking script
◯ Add responsive images
◯ Add page meta tags with React Helmet
◯ Add an automatic sitemap
◯ Generate a manifest file
◯ Add Markdown and MDX support
◯ Add Markdown support (without MDX)
─────
❯ Done追加でプラグインを入れるか聞かれますが、あとから必要なものを追加していくので一旦何も選ばずに終了します。
Thanks! Here's what we'll now do:
? Create a new Gatsby site in the folder totolog34
? Get you set up to use styled-components for styling your site
? Shall we do this? (Y/n) › Yes内容について確認があります。問題なければ Yes。
表示してみる
無事作成ができたら表示してみる。
% cd totolog34
% npm run develophttp://localhost:8000/へアクセス
表示されました