EBISUCOM エビスコム
  1. 著者NOTE

gatsby newの更新

gatsby v2.28から、gatsby new のコマンドがインタラクティブなものへと更新され、必要なプラグインを選択した上で、プロジェクトを作成できるようになりました。

https://github.com/gatsbyjs/gatsby/blob/master/docs/reference/release-notes/v2.28/index.md#new-gatsby-new

非常に便利な機能ではありますが、プラグインの構成や役割などが見えていない段階では複雑に見えるプロジェクトが作成されるため、本書ではシンプルなスターターである gatsby-starter-hello-world を利用しています。

Webサイト高速化のための静的サイトジェネレーター活用入門』のgatsby newの手順ではgatsby-starter-hello-world を選択することができなくなっていますので、P.35のように、

gatsby new mysite https://github.com/gatsbyjs/gatsby-starter-hello-world

として、プロジェクトを作成してください。

新しい gatsby newでは、以下のような選択が可能です(選択に応じて、入力する情報が変わります)。

参照: https://www.gatsbyjs.com/docs/gatsby-cli/

gatsby new
create-gatsby version 0.1.0
                                                   Welcome to Gatsby!

This command will generate a new Gatsby site for you in xxxxxxxxxx with the setup you select. Let's answer
some questions:                               

What would you like to name the folder where your site will be created?
✔ gatsbyjs/ my-gatsby-site

? Will you be using a CMS?
(Single choice) Arrow keys to move, enter to confirm
▸ No (or I'll add it later)
  –
  WordPress
  Contentful
  Sanity
  DatoCMS
  Shop? Will you be using a CMS?

  Netlify CMS

? Would you like to install a styling system?
(Single choice) Arrow keys to move, enter to confirm
▸ No (or I'll add it later)
  –
  CSS Modules/PostCSS
  styled-components
  Emotion
  Sass
  Theme UI

? Would you like to install additional features with other plugins?
(Multiple choice) Use arrow keys to move, enter to select, and choose "Done" to confirm your choices
▸◯ Add the Google Analytics tracking script
 ◯ Add responsive images
 ◯ Add page meta tags with React Helmet
 ◯ Add an automatic sitemap
 ◯ Enable offline functionality
 ◯ Generate a manifest file
 ◯ Add Markdown support (without MDX)
 ◯ Add Markdown and MDX support
  ─────
  Done

Thanks! Here's what we'll now do:

    🛠  Create a new Gatsby site in the folder  my-gatsby-site

? Shall we do this? (Y/n) ‣ Yes

HTML&CSS コーディング・プラクティスブック

デザインカンプと指示書に従い、
Webページをコーディングしてみる実践シリーズです。