From 0d90510bfbec7f7fd249731fd1c6736af6b82eb6 Mon Sep 17 00:00:00 2001 From: harapeko Date: Fri, 7 Feb 2020 05:19:22 +0900 Subject: [PATCH 01/12] translate docs/global-css --- docs/docs/global-css.md | 60 ++++++++++++++++++++--------------------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/docs/docs/global-css.md b/docs/docs/global-css.md index 17d50bd5c..e383518a9 100644 --- a/docs/docs/global-css.md +++ b/docs/docs/global-css.md @@ -1,24 +1,24 @@ --- -title: Standard Styling with Global CSS Files +title: グローバル CSS ファイルを用いた標準的なスタイリング --- -Traditionally, websites are styled using global CSS files. +古くよりウェブサイトはグローバル CSS ファイルによってスタイリングが行われてきました。 -Globally-scoped CSS rules are declared in external `.css` stylesheets, and [CSS specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) and [the Cascade](https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade) determine how styles are applied. +グローバルスコープ CSS ルールは外部 `.css` ファイルの中で宣言され、 [詳細度](https://developer.mozilla.org/ja/docs/Web/CSS/Specificity) と [カスケード処理](https://developer.mozilla.org/ja/docs/Web/CSS/Cascade) によってスタイルの優先順位が決められ、スタイルが適用されます。 -## Adding global styles with a layout component +## レイアウトコンポーネントにグローバルスタイルを追加する -The best way to add global styles is with a [shared layout component](/tutorial/part-three/#your-first-layout-component). This layout component is used for things that are shared throughout the site, including styles, header components, and other common items. +グローバルスタイルを追加する最善の方法は [共通レイアウトコンポーネント](/tutorial/part-three/-はじめてのレイアウトコンポーネントの作成) を利用することです。レイアウトコンポーネントはサイト共通の部品として使用されます。たとえば、スタイルやヘッダーコンポーネント、そのほか共通で使われる部品が該当します。 -> **NOTE:** This pattern is implemented by default in [the default starter](https://github.com/gatsbyjs/gatsby-starter-default/blob/02324e5b04ea0a66d91c7fe7408b46d0a7eac868/src/layouts/index.js#L6). +> **NOTE:** このパターンは Gatsby の [the default starter](https://github.com/gatsbyjs/gatsby-starter-default/blob/02324e5b04ea0a66d91c7fe7408b46d0a7eac868/src/layouts/index.js#L6) の中でデフォルトレイアウトとして実装されています。 -To create a shared layout with global styles, start by creating a new Gatsby site with the [hello world starter](https://github.com/gatsbyjs/gatsby-starter-hello-world). +グローバルスタイルを使った共通レイアウトを学ぶために、 まず [hello world starter](https://github.com/gatsbyjs/gatsby-starter-hello-world) を使った新しい Gatsby サイトを作成してください。 ```shell gatsby new global-styles https://github.com/gatsbyjs/gatsby-starter-hello-world ``` -Open your new site in your code editor and create a new directory at `/src/components`. Inside, create two new files: +新規作成したサイトをコードエディターで開きます。 `/src/components` ディレクトリーを作成し、新規ファイルを 2 つ作成します： ```diff global-styles/ @@ -31,7 +31,7 @@ Open your new site in your code editor and create a new directory at `/src/compo └─ index.js ``` -Inside `src/components/layout.css`, add some global styles: +`src/components/layout.css` の中にグローバルスタイルを追加します： ```css:title=src/components/layout.css div { @@ -40,7 +40,7 @@ div { } ``` -In `src/components/layout.js`, include the stylesheet and export a layout component: +`src/components/layout.js` の中でスタイルシートを読み込み、レイアウトコンポーネントをエクスポートします： ```jsx:title=src/components/layout.js import React from "react" @@ -49,7 +49,7 @@ import "./layout.css" export default ({ children }) =>
{children}
``` -Finally, update `src/pages/index.js` to use the new layout component: +最後に `src/pages/index.js` を更新して、作成したレイアウトコンポーネントを使用します。 ```jsx:title=src/pages/index.js import React from "react" @@ -58,17 +58,17 @@ import Layout from "../components/layout" export default () => Hello world! ``` -Run `npm run develop` and you’ll see the global styles applied. +`npm run develop` を実行するとグローバルスタイルが適用されていることを確認できます。 ![Global styles](./images/global-styles.png) -## Adding global styles without a layout component +## レイアウトコンポーネントを使わずにグローバルスタイルを追加する -In some cases, using a shared layout component is not desirable. In these cases, you can include a global stylesheet using `gatsby-browser.js`. +場合によっては、共通レイアウトコンポーネント使うことは好ましくありません。このような場合では `gatsby-browser.js` を使ってグローバルスタイルを読み込むこともできます。 -> **NOTE:** This approach does _not_ work with CSS-in-JS. Use shared components to share styles in CSS-in-JS. +> **NOTE:** このアプローチは CSS-in-JS と同時には動作しません。 共通コンポーネントを使って、CSS-in-JS の中でスタイルを割り当ててください。 -First, open a new terminal window and run the following commands to create a new default Gatsby site and start the development server: +はじめに、新しいターミナルウィンドウを開き、下記コマンドを実行して新規に Gatsby サイトを作成し、開発サーバーを起動してください。 ```shell gatsby new global-style-tutorial https://github.com/gatsbyjs/gatsby-starter-default @@ -76,7 +76,7 @@ cd global-style-tutorial npm run develop ``` -Second, create a CSS file and define any styles you wish. An example: +次に、CSS ファイルを作成し、任意の CSS を定義してください。例： ```css:title=src/styles/global.css html { @@ -88,10 +88,10 @@ a { } ``` -Then, include the stylesheet in your site's `gatsby-browser.js` file. +そして、`gatsby-browser.js` の中で CSS ファイルを読み込みます。 -> **NOTE:** This solution works when including css as those styles are extracted when building the JavaScript but not for css-in-js. -> Including styles in a layout component or a global-styles.js is your best bet for that. +> **NOTE:** この方法は CSS を読み込んだときに実行され、読み込んだスタイルは JavaScript ビルド時に出力されます。 CSS-in-JS のための JavaScript ビルドは行われません。 +> レイアウトコンポーネントまたは global-styles.js の中で CSS ファイルを読み込むことが最善策になります。 ```javascript:title=gatsby-browser.js import "./src/styles/global.css" @@ -100,15 +100,15 @@ import "./src/styles/global.css" // require('./src/styles/global.css') ``` -> _Note: You can use Node.js require or import syntax. Additionally, the placement of the example css file in a `src/styles` folder is arbitrary._ +> _Note: Node.js の require, import 構文を使うことができます。さらにつけ加えると、 `src/styles` フォルダの中に置く実例 CSS ファイルの配置は任意です。_ -You should see your global styles taking effect across your site: +グローバルスタイルがサイト全体に反映されているはずです： ![Global styles example site](./images/global-styles-example.png) -### Importing CSS files into components +### コンポーネントの中で CSS を読み込む -It is also possible to break up your CSS styles into separate files so that team members can work independently while still using traditional CSS. You can then [import files directly](/docs/importing-assets-into-files/) into pages, templates, or components: +チームメンバーが従来の CSS (非 CSS-in-JS)を使用している場合でも、 個別の CSS ファイルに分割し、独立した作業が行えます。[import files directly](/docs/importing-assets-into-files/) を使ってページやテンプレート、コンポーネントの中で CSS を取り込むことで可能にします。 ```css:title=menu.css .menu { @@ -122,11 +122,11 @@ It is also possible to break up your CSS styles into separate files so that team import "css/menu.css" ``` -This approach can simplify integration of CSS or [Sass](/packages/gatsby-plugin-sass/) styles into your Gatsby site by allowing team members to write and consume more traditional, class-based CSS. However, there are [trade-offs](#limitations) that must be considered with regards to web performance and the lack of dead code elimination. +このアプローチではチームメンバーがより伝統的に使われてきたクラスベースの CSS を使って記述することが可能になり、Gatsby サイトの中で CSS や Sass 記法の統合が簡単に実現できます。ただし、ウェブパフォーマンスや不要になったコードの除去を忘れる事について考えなければならなくなるトレードオフがあります。 -### Adding classes to components +### コンポーネントに CSS クラスを追加する -Since `class` is a reserved word in JavaScript, you'll have to use the `className` prop instead, which will render as the browser-supported `class` attribute in your HTML output. +`class` は JavaScript において予約語なので、代わりに `className` 属性を使わなければなりません。 HTML に出力されるとブラウザサポートされた `class` 属性としてレンダリングされます。 ```jsx @@ -138,8 +138,8 @@ Since `class` is a reserved word in JavaScript, you'll have to use the `classNam } ``` -### Limitations +### 問題解決の限界 -The biggest problem with global CSS files is the risk of name conflicts and side effects like unintended inheritance. +グローバル CSS ファイルのもっとも大きな問題は名前が衝突するリスクと、意図しない継承の影響を受けてしまうことです。 -CSS methodologies like BEM can help solve this, but a more modern solution is to write locally-scoped CSS using [CSS Modules](/docs/css-modules/) or [CSS-in-JS](/docs/css-in-js/). +この問題を解決するための助けとして BEM のような CSS 設計がありますが、より現代的な解決策は [CSS Modules](/docs/css-modules/) や [CSS-in-JS](/docs/css-in-js/) を使用したローカルスコープの CSS を記述することです。 From ef00f84cc12d3d23d7a057d41a5190bba9b490cf Mon Sep 17 00:00:00 2001 From: harapeko Date: Mon, 10 Feb 2020 23:04:16 +0900 Subject: [PATCH 02/12] Update docs/docs/global-css.md Co-Authored-By: Yasuaki Uechi --- docs/docs/global-css.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/global-css.md b/docs/docs/global-css.md index e383518a9..1c96efb6e 100644 --- a/docs/docs/global-css.md +++ b/docs/docs/global-css.md @@ -8,7 +8,7 @@ title: グローバル CSS ファイルを用いた標準的なスタイリン ## レイアウトコンポーネントにグローバルスタイルを追加する -グローバルスタイルを追加する最善の方法は [共通レイアウトコンポーネント](/tutorial/part-three/-はじめてのレイアウトコンポーネントの作成) を利用することです。レイアウトコンポーネントはサイト共通の部品として使用されます。たとえば、スタイルやヘッダーコンポーネント、そのほか共通で使われる部品が該当します。 +グローバルスタイルを追加する最善の方法は [共通レイアウトコンポーネント](/tutorial/part-three/#はじめてのレイアウトコンポーネントの作成) を利用することです。レイアウトコンポーネントはサイト共通の部品として使用されます。たとえば、スタイルやヘッダーコンポーネント、そのほか共通で使われる部品が該当します。 > **NOTE:** このパターンは Gatsby の [the default starter](https://github.com/gatsbyjs/gatsby-starter-default/blob/02324e5b04ea0a66d91c7fe7408b46d0a7eac868/src/layouts/index.js#L6) の中でデフォルトレイアウトとして実装されています。 From 5b7f21c26c559f5f64f57ca2a3f78e56069c090e Mon Sep 17 00:00:00 2001 From: harapeko Date: Mon, 10 Feb 2020 23:04:28 +0900 Subject: [PATCH 03/12] Update docs/docs/global-css.md Co-Authored-By: Yasuaki Uechi --- docs/docs/global-css.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/global-css.md b/docs/docs/global-css.md index 1c96efb6e..6790641a8 100644 --- a/docs/docs/global-css.md +++ b/docs/docs/global-css.md @@ -66,7 +66,7 @@ export default () => Hello world! 場合によっては、共通レイアウトコンポーネント使うことは好ましくありません。このような場合では `gatsby-browser.js` を使ってグローバルスタイルを読み込むこともできます。 -> **NOTE:** このアプローチは CSS-in-JS と同時には動作しません。 共通コンポーネントを使って、CSS-in-JS の中でスタイルを割り当ててください。 +> **ヒント:** このアプローチは CSS-in-JS と同時には動作しません。 共通コンポーネントを使って、CSS-in-JS の中でスタイルを割り当ててください。 はじめに、新しいターミナルウィンドウを開き、下記コマンドを実行して新規に Gatsby サイトを作成し、開発サーバーを起動してください。 From 50e4b7cb5c008402e8f5c93b076747688142987c Mon Sep 17 00:00:00 2001 From: harapeko Date: Mon, 10 Feb 2020 23:04:44 +0900 Subject: [PATCH 04/12] Update docs/docs/global-css.md Co-Authored-By: Yasuaki Uechi --- docs/docs/global-css.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/global-css.md b/docs/docs/global-css.md index 6790641a8..50976db42 100644 --- a/docs/docs/global-css.md +++ b/docs/docs/global-css.md @@ -90,7 +90,7 @@ a { そして、`gatsby-browser.js` の中で CSS ファイルを読み込みます。 -> **NOTE:** この方法は CSS を読み込んだときに実行され、読み込んだスタイルは JavaScript ビルド時に出力されます。 CSS-in-JS のための JavaScript ビルドは行われません。 +> **ヒント:** この方法は CSS を読み込んだときに実行され、読み込んだスタイルは JavaScript ビルド時に出力されます。 CSS-in-JS のための JavaScript ビルドは行われません。 > レイアウトコンポーネントまたは global-styles.js の中で CSS ファイルを読み込むことが最善策になります。 ```javascript:title=gatsby-browser.js From c7a7e62d5d354ca9e352ccef2a95360698b3afca Mon Sep 17 00:00:00 2001 From: harapeko Date: Mon, 10 Feb 2020 23:04:51 +0900 Subject: [PATCH 05/12] Update docs/docs/global-css.md Co-Authored-By: Yasuaki Uechi --- docs/docs/global-css.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/global-css.md b/docs/docs/global-css.md index 50976db42..ed0d34541 100644 --- a/docs/docs/global-css.md +++ b/docs/docs/global-css.md @@ -100,7 +100,7 @@ import "./src/styles/global.css" // require('./src/styles/global.css') ``` -> _Note: Node.js の require, import 構文を使うことができます。さらにつけ加えると、 `src/styles` フォルダの中に置く実例 CSS ファイルの配置は任意です。_ +> _ヒント: Node.js の require, import 構文を使うことができます。さらにつけ加えると、 `src/styles` フォルダの中に置く実例 CSS ファイルの配置は任意です。_ グローバルスタイルがサイト全体に反映されているはずです： From 131be1835a1d7e8a23c955d433e05095d32563e5 Mon Sep 17 00:00:00 2001 From: harapeko Date: Tue, 11 Feb 2020 21:52:51 +0900 Subject: [PATCH 06/12] Update docs/docs/global-css.md Co-Authored-By: Jesse Katsumata --- docs/docs/global-css.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/global-css.md b/docs/docs/global-css.md index ed0d34541..657215047 100644 --- a/docs/docs/global-css.md +++ b/docs/docs/global-css.md @@ -4,7 +4,7 @@ title: グローバル CSS ファイルを用いた標準的なスタイリン 古くよりウェブサイトはグローバル CSS ファイルによってスタイリングが行われてきました。 -グローバルスコープ CSS ルールは外部 `.css` ファイルの中で宣言され、 [詳細度](https://developer.mozilla.org/ja/docs/Web/CSS/Specificity) と [カスケード処理](https://developer.mozilla.org/ja/docs/Web/CSS/Cascade) によってスタイルの優先順位が決められ、スタイルが適用されます。 +グローバルスコープ CSS ルールは外部 `.css` ファイルの中で宣言され、[詳細度](https://developer.mozilla.org/ja/docs/Web/CSS/Specificity)と[カスケード処理](https://developer.mozilla.org/ja/docs/Web/CSS/Cascade)によってスタイルの優先順位が決められ、スタイルが適用されます。 ## レイアウトコンポーネントにグローバルスタイルを追加する From 22297b734efeedafd0f3abd87344d5e385959cc0 Mon Sep 17 00:00:00 2001 From: harapeko Date: Tue, 11 Feb 2020 21:53:04 +0900 Subject: [PATCH 07/12] Update docs/docs/global-css.md Co-Authored-By: Jesse Katsumata --- docs/docs/global-css.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/global-css.md b/docs/docs/global-css.md index 657215047..4c9bab05a 100644 --- a/docs/docs/global-css.md +++ b/docs/docs/global-css.md @@ -8,7 +8,7 @@ title: グローバル CSS ファイルを用いた標準的なスタイリン ## レイアウトコンポーネントにグローバルスタイルを追加する -グローバルスタイルを追加する最善の方法は [共通レイアウトコンポーネント](/tutorial/part-three/#はじめてのレイアウトコンポーネントの作成) を利用することです。レイアウトコンポーネントはサイト共通の部品として使用されます。たとえば、スタイルやヘッダーコンポーネント、そのほか共通で使われる部品が該当します。 +グローバルスタイルを追加する最善の方法は[共通レイアウトコンポーネント](/tutorial/part-three/#はじめてのレイアウトコンポーネントの作成)を利用することです。レイアウトコンポーネントはサイト共通の部品として使用されます。たとえば、スタイルやヘッダーコンポーネント、そのほか共通で使われる部品が該当します。 > **NOTE:** このパターンは Gatsby の [the default starter](https://github.com/gatsbyjs/gatsby-starter-default/blob/02324e5b04ea0a66d91c7fe7408b46d0a7eac868/src/layouts/index.js#L6) の中でデフォルトレイアウトとして実装されています。 From 2e9b4d530599cc3aa4731bbaa4db5538456bff14 Mon Sep 17 00:00:00 2001 From: harapeko Date: Tue, 11 Feb 2020 21:53:14 +0900 Subject: [PATCH 08/12] Update docs/docs/global-css.md Co-Authored-By: Jesse Katsumata --- docs/docs/global-css.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/global-css.md b/docs/docs/global-css.md index 4c9bab05a..37459c881 100644 --- a/docs/docs/global-css.md +++ b/docs/docs/global-css.md @@ -10,7 +10,7 @@ title: グローバル CSS ファイルを用いた標準的なスタイリン グローバルスタイルを追加する最善の方法は[共通レイアウトコンポーネント](/tutorial/part-three/#はじめてのレイアウトコンポーネントの作成)を利用することです。レイアウトコンポーネントはサイト共通の部品として使用されます。たとえば、スタイルやヘッダーコンポーネント、そのほか共通で使われる部品が該当します。 -> **NOTE:** このパターンは Gatsby の [the default starter](https://github.com/gatsbyjs/gatsby-starter-default/blob/02324e5b04ea0a66d91c7fe7408b46d0a7eac868/src/layouts/index.js#L6) の中でデフォルトレイアウトとして実装されています。 +> **ヒント:** このパターンは Gatsby の [the default starter](https://github.com/gatsbyjs/gatsby-starter-default/blob/02324e5b04ea0a66d91c7fe7408b46d0a7eac868/src/layouts/index.js#L6) の中でデフォルトレイアウトとして実装されています。 グローバルスタイルを使った共通レイアウトを学ぶために、 まず [hello world starter](https://github.com/gatsbyjs/gatsby-starter-hello-world) を使った新しい Gatsby サイトを作成してください。 From 6e3f7761b42a52b6a5f510fccdabb0fac2ddec8e Mon Sep 17 00:00:00 2001 From: harapeko Date: Tue, 11 Feb 2020 21:53:24 +0900 Subject: [PATCH 09/12] Update docs/docs/global-css.md Co-Authored-By: Jesse Katsumata --- docs/docs/global-css.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/global-css.md b/docs/docs/global-css.md index 37459c881..6d8e42a64 100644 --- a/docs/docs/global-css.md +++ b/docs/docs/global-css.md @@ -18,7 +18,7 @@ title: グローバル CSS ファイルを用いた標準的なスタイリン gatsby new global-styles https://github.com/gatsbyjs/gatsby-starter-hello-world ``` -新規作成したサイトをコードエディターで開きます。 `/src/components` ディレクトリーを作成し、新規ファイルを 2 つ作成します： +新規作成したサイトをコードエディターで開きます。`/src/components` ディレクトリーを作成し、新規ファイルを 2 つ作成します： ```diff global-styles/ From 674bcdbb3cb2fc80d651d5a609f9d08f20bdb8c9 Mon Sep 17 00:00:00 2001 From: harapeko Date: Tue, 11 Feb 2020 21:53:38 +0900 Subject: [PATCH 10/12] Update docs/docs/global-css.md Co-Authored-By: Jesse Katsumata --- docs/docs/global-css.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/global-css.md b/docs/docs/global-css.md index 6d8e42a64..94c2767e8 100644 --- a/docs/docs/global-css.md +++ b/docs/docs/global-css.md @@ -100,7 +100,7 @@ import "./src/styles/global.css" // require('./src/styles/global.css') ``` -> _ヒント: Node.js の require, import 構文を使うことができます。さらにつけ加えると、 `src/styles` フォルダの中に置く実例 CSS ファイルの配置は任意です。_ +> _ヒント: Node.js の require、import 構文を使うことができます。さらにつけ加えると、 `src/styles` フォルダの中に置く実例 CSS ファイルの配置は任意です。_ グローバルスタイルがサイト全体に反映されているはずです： From 7d66200b20c4ceb634aad4a0181d7bc9a52b7a88 Mon Sep 17 00:00:00 2001 From: harapeko Date: Tue, 11 Feb 2020 21:54:13 +0900 Subject: [PATCH 11/12] Update docs/docs/global-css.md Co-Authored-By: Jesse Katsumata --- docs/docs/global-css.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/global-css.md b/docs/docs/global-css.md index 94c2767e8..3db5c3983 100644 --- a/docs/docs/global-css.md +++ b/docs/docs/global-css.md @@ -108,7 +108,7 @@ import "./src/styles/global.css" ### コンポーネントの中で CSS を読み込む -チームメンバーが従来の CSS (非 CSS-in-JS)を使用している場合でも、 個別の CSS ファイルに分割し、独立した作業が行えます。[import files directly](/docs/importing-assets-into-files/) を使ってページやテンプレート、コンポーネントの中で CSS を取り込むことで可能にします。 +チームメンバーが従来の CSS (非 CSS-in-JS)を使用している場合でも、個別の CSS ファイルに分割し、独立した作業が行えます。それらの CSS ファイルはページやテンプレート、コンポーネントの中で[直接取り込む](/docs/importing-assets-into-files/)ことができます。 ```css:title=menu.css .menu { From bf55d24bf2dba31adc9ca6b14fc5dc07315c0afc Mon Sep 17 00:00:00 2001 From: harapeko Date: Tue, 11 Feb 2020 21:55:10 +0900 Subject: [PATCH 12/12] Update docs/docs/global-css.md Co-Authored-By: Jesse Katsumata --- docs/docs/global-css.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/global-css.md b/docs/docs/global-css.md index 3db5c3983..0ccd21b8b 100644 --- a/docs/docs/global-css.md +++ b/docs/docs/global-css.md @@ -12,7 +12,7 @@ title: グローバル CSS ファイルを用いた標準的なスタイリン > **ヒント:** このパターンは Gatsby の [the default starter](https://github.com/gatsbyjs/gatsby-starter-default/blob/02324e5b04ea0a66d91c7fe7408b46d0a7eac868/src/layouts/index.js#L6) の中でデフォルトレイアウトとして実装されています。 -グローバルスタイルを使った共通レイアウトを学ぶために、 まず [hello world starter](https://github.com/gatsbyjs/gatsby-starter-hello-world) を使った新しい Gatsby サイトを作成してください。 +グローバルスタイルを使った共通レイアウトを学ぶために、まず [hello world starter](https://github.com/gatsbyjs/gatsby-starter-hello-world) を使った新しい Gatsby サイトを作成してください。 ```shell gatsby new global-styles https://github.com/gatsbyjs/gatsby-starter-hello-world