Gatsby.JS 環境構築

[mapconcierge]

@SahoYoshihara と @Babby168 は、自分のPCに Gatsby.JS の環境を構築よろしく！ https://www.gatsbyjs.com/docs/quick-start/

[mapconcierge]

最初の npm install -g gatsby-cli コマンドが実行できない場合は Node.JS を先にインストールしてください。 https://nodejs.org/ja/

[SahoYoshihara]

nodeのインストールは完了しました。(v14.9.0) しかし、npm install -g gatsby-cli をコマンド入力しても大量のwarning とerrorが表示されるので　Gatsbyjsの方はインストールができていない状況です。

[SahoYoshihara]

Gatsby インストール完了しました。 開発サーバーの起動まで出来ています。

[mapconcierge]

@SahoYoshihara 以下のコマンドで、TEDx 用に修正したデータから一発インストールできるか確認してみてください！

gatsby new gatsbytest https://github.com/tedxagu/gatsby-starter-elemental

[mapconcierge]

その次は、以下の資料をみながら GitHub Pages でホスティングテストしてみてください。 https://www.gatsbyjs.com/docs/how-gatsby-works-with-github-pages/ http://makotottn.hatenablog.com/entry/2018/01/04/201752

テスト用 GitHubレポジトリは以下に用意しました。 https://github.com/tedxagu/gatsbytest

gh-pages ブランチは作成済みです。 https://github.com/tedxagu/gatsbytest/tree/gh-pages

[mapconcierge]

package.json の scripts 欄に deploy 行を追加して master ブランチにアップしてみた。ドキュメント見ながら手探り状態。 https://github.com/tedxagu/gatsbytest/blob/master/package.json

  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
    "deploy": "gatsby build && gh-pages -d public -b master"
  },

[mapconcierge]

package-lock.json は不要だったので削除しました。

[SahoYoshihara]

http://makotottn.hatenablog.com/entry/2018/01/04/201752 ここに書いてあることをやってみたところ、developされたものに作成したwebが反映されませんでした。 ❯ gatsby new username.github.io ←この部分のusernameは何か特定の名前を入れなくては行けないのでしょうか？

SahonoMacBook-Air:gatsbytest saho$ npm i -g gatsby-cli npm WARN deprecated @hapi/joi@15.1.1: joi is leaving the @hapi organization and moving back to 'joi' (https://github.com/sideway/joi/issues/2411) npm WARN deprecated @hapi/address@2.1.4: This version has been deprecated and is no longer supported or maintained npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3. /Users/saho/.nodebrew/node/v14.9.0/bin/gatsby -> /Users/saho/.nodebrew/node/v14.9.0/lib/node_modules/gatsby-cli/cli.js

gatsby-cli@2.12.93 postinstall /Users/saho/.nodebrew/node/v14.9.0/lib/node_modules/gatsby-cli node scripts/postinstall.js

Success!

Welcome to the Gatsby CLI! Please visit https://www.gatsbyjs.org/docs/gatsby-cli/ for more information.

npm WARN gatsby-interface@0.0.166 requires a peer of gatsby@2.6.0 but none is installed. You must install peer dependencies yourself. npm WARN gatsby-interface@0.0.166 requires a peer of react@16.8.1 but none is installed. You must install peer dependencies yourself. npm WARN gatsby-interface@0.0.166 requires a peer of react-dom@16.8.1 but none is installed. You must install peer dependencies yourself. npm WARN acorn-dynamic-import@4.0.0 requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself. npm WARN theme-ui@0.2.52 requires a peer of @mdx-js/react@^1.0.0 but none is installed. You must install peer dependencies yourself. npm WARN @reach/popover@0.10.3 requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself. npm WARN @reach/combobox@0.10.3 requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself. npm WARN @reach/tooltip@0.10.3 requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself. npm WARN @reach/alert@0.10.3 requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself. npm WARN @reach/tabs@0.10.3 requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself. npm WARN @reach/dialog@0.10.3 requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself. npm WARN @reach/menu-button@0.10.3 requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself. npm WARN @reach/utils@0.10.5 requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself. npm WARN @reach/visually-hidden@0.10.4 requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself. npm WARN @reach/auto-id@0.10.5 requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself. npm WARN @reach/portal@0.10.5 requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself. npm WARN @reach/descendants@0.10.5 requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself. npm WARN @reach/rect@0.10.5 requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself.

• gatsby-cli@2.12.93 updated 1 package in 27.067s SahonoMacBook-Air:gatsbytest saho$ gatsby -h Usage: gatsby [options]

コマンド: gatsby develop Start development server. Watches files, rebuilds, and hot reloads if something changes gatsby build Build a Gatsby project. gatsby serve Serve previously built Gatsby site. gatsby info Get environment information for debugging and issue reporting gatsby clean Wipe the local gatsby environment including built assets and cache gatsby repl Get a node repl with context of Gatsby environment, see (https://www.gatsbyjs.org/docs/gatsby-repl/) gatsby recipes [recipe] [EXPERIMENTAL] Run a recipe gatsby new [rootPath] [starter] Create new Gatsby project. gatsby plugin Useful commands relating to Gatsby plugins gatsby telemetry Enable or disable Gatsby anonymous analytics collection.

オプション: --verbose Turn on verbose output [真偽] [デフォルト: false] --no-color, --no-colors Turn off the color in output [真偽] [デフォルト: false] --json Turn on the JSON logger [真偽] [デフォルト: false] -h, --help ヘルプを表示 [真偽] -v, --version Show the version of the Gatsby CLI and the Gatsby package in the current project [真偽] SahonoMacBook-Air:gatsbytest saho$ gatsby new username.github.io info Creating new site from git: https://github.com/gatsbyjs/gatsby-starter-default.git Cloning into 'username.github.io'... remote: Enumerating objects: 29, done. remote: Counting objects: 100% (29/29), done. remote: Compressing objects: 100% (25/25), done. remote: Total 29 (delta 2), reused 17 (delta 2), pack-reused 0 Unpacking objects: 100% (29/29), 624.58 KiB | 437.00 KiB/s, done. success Created starter directory layout info Installing packages... yarn install v1.22.5 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... warning "gatsby > @pmmmwh/react-refresh-webpack-plugin@0.4.2" has incorrect peer dependency "react-refresh@^0.8.3". warning "gatsby > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta". warning "gatsby > gatsby-cli > gatsby-recipes > gatsby-interface@0.0.166" has incorrect peer dependency "gatsby@2.6.0". warning "gatsby > gatsby-cli > gatsby-recipes > gatsby-interface@0.0.166" has incorrect peer dependency "react@16.8.1". warning "gatsby > gatsby-cli > gatsby-recipes > gatsby-interface@0.0.166" has incorrect peer dependency "react-dom@16.8.1". [4/4] 🔨 Building fresh packages... success Saved lockfile. ✨ Done in 43.39s. info Your new Gatsby site has been successfully bootstrapped. Start developing it by running:

cd username.github.io gatsby develop

SahonoMacBook-Air:gatsbytest saho$ cd username.github.io SahonoMacBook-Air:username.github.io saho$ gatsby develop

Something is already running at port 8000 ✔ Would you like to run the app at another port instead? … yes success open and validate gatsby-configs - 0.040s success load plugins - 3.319s success onPreInit - 0.053s success initialize cache - 0.013s success copy gatsby files - 0.083s success onPreBootstrap - 0.015s success createSchemaCustomization - 0.020s success Checking for changed pages - 0.004s success source and transform nodes - 0.113s success building schema - 0.311s success createPages - 0.002s success Checking for changed pages - 0.002s success createPagesStatefully - 0.085s success update schema - 0.025s success write out redirect data - 0.004s success Build manifest and related icons - 0.171s success onPostBootstrap - 0.180s info bootstrap finished - 8.890s success onPreExtractQueries - 0.002s success extract queries from components - 0.362s success write out requires - 0.035s success run static queries - 0.270s - 3/3 11.11/s success run page queries - 0.086s - 6/6 69.71/s success Generating image thumbnails - 3.927s - 6/6 1.53/s ⠀ You can now view gatsby-starter-default in the browser. ⠀ http://localhost:8001/ ⠀ View GraphiQL, an in-browser IDE, to explore your site's data and schema ⠀ http://localhost:8001/___graphql ⠀ Note that the development build is not optimized. To create a production build, use gatsby build ⠀ success Building development bundle - 8.548s

[SahoYoshihara]

とりあえず、自分のレポジトリ上では同じように出来ました。 https://github.com/SahoYoshihara/sahoyoshihara.github.io

[mapconcierge]

2020-09-12 のレクチャーで、Gatsby.JS の環境構築と、作業データの共有については確認完了。

動作テスト用のリポジトリは適宜これを使って、動作テスト https://github.com/tedxagu/workdata4gatsby

同じテスト環境を構築するには、以下のコマンドで一発実行。

gatsby new gatsbytest4work https://github.com/tedxagu/workdata4gatsby

[mapconcierge]

環境構築が確認できたので、一旦この Issue は閉じます。