|
1 | 1 | --- |
2 | | -title: Setting up a Gatsby Site Without the `gatsby new` Command |
| 2 | +title: `gatsby new` コマンドを使わずに Gatsby でサイトを構築する |
3 | 3 | --- |
4 | 4 |
|
5 | | -There are many Enterprise level companies that maintain an internal clone of the NPM registry for security purposes. If you work for such a company, you may find that you are able to successfully run `npm install -g gatsby-cli` but cannot run the `gatsby new <project-source>` as the `gatsby new` command clones a repo from a public GitHub repository. Many companies block public GitHub, which will cause the `gatsby new` command to fail. Not to worry, though, you can set up a new Gatsby site without the `gatsby new` command with a few quick steps. |
| 5 | +セキュリティーを担保するために、NPM レジストリーを内部でクローンして利用する企業は多く存在します。もしあなたがそのような企業で働いているとすれば、`npm install -g gatsby-cli` を実行することはできますが、GitHub のパブリックリポジトリをクローンする `gatsby new <project-source>` を実行することはできないでしょう。多くの企業は GitHub のパブリックリポジトリをブロックしており、そのような状況下では `gatsby new` は失敗してしまいます。しかし心配にはおよびません。いくつかの手順を踏めば `gatsby new` コマンドを使わずとも Gatsby でサイトを構築できます。 |
6 | 6 |
|
7 | | -## Preparing your environment |
| 7 | +## 環境の準備 |
8 | 8 |
|
9 | | -To get started with Gatsby, you’ll need to make sure you have the following software tools installed: |
| 9 | +Gatsby を使うためには、以下のツールがインストールされている必要があります。 |
10 | 10 |
|
11 | 11 | 1. [Node.js](/tutorial/part-zero/#install-nodejs) |
12 | 12 | 1. [npm CLI](/tutorial/part-zero/#familiarize-with-npm) |
13 | 13 | 1. [Gatsby CLI](/tutorial/part-zero/#install-the-gatsby-cli) |
14 | 14 |
|
15 | | -For step-by-step installation instructions and detailed explanations of the required software, head on over to the [Gatsby tutorial](/tutorial/part-zero/). |
| 15 | +これらのソフトウェアとそのインストールについての詳細な説明は、[チュートリアル](/tutorial/part-zero/)にて確認してください。 |
16 | 16 |
|
17 | | -After your developer environment is set up, you'll want to set up a new project folder. |
| 17 | +環境構築が終わったら、新しいプロジェクトとなるフォルダーを作成しましょう。 |
18 | 18 |
|
19 | 19 | ```shell |
20 | 20 | mkdir my-new-gatsby-site |
21 | 21 | cd my-new-gatsby-site |
22 | 22 | ``` |
23 | 23 |
|
24 | | -Next, you'll need to set up NPM within your project. |
| 24 | +次に、プロジェクト内で NPM を初期化しましょう。 |
25 | 25 |
|
26 | 26 | ```shell |
27 | 27 | npm init |
28 | 28 | ``` |
29 | 29 |
|
30 | | -Fill out the prompts for the `package.json` file that is generated. If you'd like to skip that, you can run `npm init -y` and a pre-filled `package.json` will be generated for you. |
| 30 | +それぞれのプロンプトに答え、`package.json` の生成に必要とされる情報を入力しましょう。もしプロンプトをスキップしたければ、`npm init -y` を実行すると最低限の項目があらかじめ入力されたデフォルトの `package.json` を生成できます。 |
31 | 31 |
|
32 | | -Now, you'll need to install the necessary packages that Gatsby relies on to work its magic. |
| 32 | +NPM の初期化が終わったら、必要なパッケージをインストールしましょう。 |
33 | 33 |
|
34 | 34 | ```shell |
35 | 35 | npm install --save gatsby react react-dom |
36 | 36 | ``` |
37 | 37 |
|
38 | | -Next, you'll add a `src` directory and a `pages` directory inside your project. |
| 38 | +次に、プロジェクト内に `src` フォルダーを、そしてその中に `pages` ディレクトリーを作成してください。 |
39 | 39 |
|
40 | 40 | ```shell |
41 | 41 | mkdir src |
42 | 42 | cd src |
43 | 43 | mkdir pages |
44 | 44 | ``` |
45 | 45 |
|
46 | | -Inside the pages directory, you'll make an `index.js` file that exports a React component. |
| 46 | +作成した `pages` ディレクトリーの中に、React コンポーネントを export する `index.js` ファイルを作成します。 |
47 | 47 |
|
48 | 48 | ```shell |
49 | 49 | cd pages |
50 | 50 | touch index.js |
51 | 51 | ``` |
52 | 52 |
|
53 | | -Now, add some React code to your `index.js` file as a starting point for your project. |
| 53 | +そうしたらあなたのプロジェクトのスタート点となる React のコードを `index.js` ファイルに追加しましょう。 |
54 | 54 |
|
55 | 55 | ```jsx:title=src/pages/index.js |
56 | 56 | import React from "react" |
57 | 57 |
|
58 | | -export default () => <h1>Hello Gatsby!</h1> |
| 58 | +export default () => <h1>こんにちは Gatsby!</h1> |
59 | 59 | ``` |
60 | 60 |
|
61 | | -Finally, go back to the root of your project and run the `gatsby develop` command to start a development server and begin coding. |
| 61 | +最後に、プロジェクトのルートディレクトリーに戻って `gatsby develop` コマンドを実行し、開発サーバーを起動して開発を始めましょう。 |
62 | 62 |
|
63 | 63 | ```shell |
64 | 64 | cd ../../ |
65 | 65 | gatsby develop |
66 | 66 | ``` |
67 | 67 |
|
68 | | -And that's it! You should now have your initial page running on `localhost:8000` with a GraphiQL IDE running on `localhost:8000/___graphql`. From here, you can follow the rest of the [Gatsby tutorial](/tutorial/part-zero/#set-up-a-code-editor) starting with setting up a code editor to get the full experience of what Gatsby can offer. |
| 68 | +それだけです!初期ページが `localhost:8000` で、GraphiQL IDE が `localhost:8000/___graphql` で起動しているはずです。ここからは[チュートリアル](/tutorial/part-zero/#set-up-a-code-editor)に戻って、Gatsby が提供する機能をフルに体験するためコードエディターを設定する箇所からチュートリアルを再開してください。 |
0 commit comments