Skip to content
This repository was archived by the owner on Jan 20, 2025. It is now read-only.
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions docs/docs/setting-up-gatsby-without-gatsby-new.md
Original file line number Diff line number Diff line change
@@ -1,68 +1,68 @@
---
title: Setting up a Gatsby Site Without the `gatsby new` Command
title: `gatsby new` コマンドを使わずに Gatsby でサイトを構築する
---

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.
セキュリティーを担保するために、NPM レジストリーを内部でクローンして利用する企業は多く存在します。もしあなたがそのような企業で働いているとすれば、`npm install -g gatsby-cli` を実行することはできますが、GitHub のパブリックリポジトリをクローンする `gatsby new <project-source>` を実行することはできないでしょう。多くの企業は GitHub のパブリックリポジトリをブロックしており、そのような状況下では `gatsby new` は失敗してしまいます。しかし心配にはおよびません。いくつかの手順を踏めば `gatsby new` コマンドを使わずとも Gatsby でサイトを構築できます。

## Preparing your environment
## 環境の準備

To get started with Gatsby, you’ll need to make sure you have the following software tools installed:
Gatsby を使うためには、以下のツールがインストールされている必要があります。

1. [Node.js](/tutorial/part-zero/#install-nodejs)
1. [npm CLI](/tutorial/part-zero/#familiarize-with-npm)
1. [Gatsby CLI](/tutorial/part-zero/#install-the-gatsby-cli)

For step-by-step installation instructions and detailed explanations of the required software, head on over to the [Gatsby tutorial](/tutorial/part-zero/).
これらのソフトウェアとそのインストールについての詳細な説明は、[チュートリアル](/tutorial/part-zero/)にて確認してください。

After your developer environment is set up, you'll want to set up a new project folder.
環境構築が終わったら、新しいプロジェクトとなるフォルダーを作成しましょう。

```shell
mkdir my-new-gatsby-site
cd my-new-gatsby-site
```

Next, you'll need to set up NPM within your project.
次に、プロジェクト内で NPM を初期化しましょう。

```shell
npm init
```

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.
それぞれのプロンプトに答え、`package.json` の生成に必要とされる情報を入力しましょう。もしプロンプトをスキップしたければ、`npm init -y` を実行すると最低限の項目があらかじめ入力されたデフォルトの `package.json` を生成できます。

Now, you'll need to install the necessary packages that Gatsby relies on to work its magic.
NPM の初期化が終わったら、必要なパッケージをインストールしましょう。

```shell
npm install --save gatsby react react-dom
```

Next, you'll add a `src` directory and a `pages` directory inside your project.
次に、プロジェクト内に `src` フォルダーを、そしてその中に `pages` ディレクトリーを作成してください。

```shell
mkdir src
cd src
mkdir pages
```

Inside the pages directory, you'll make an `index.js` file that exports a React component.
作成した `pages` ディレクトリーの中に、React コンポーネントを export する `index.js` ファイルを作成します。

```shell
cd pages
touch index.js
```

Now, add some React code to your `index.js` file as a starting point for your project.
そうしたらあなたのプロジェクトのスタート点となる React のコードを `index.js` ファイルに追加しましょう。

```jsx:title=src/pages/index.js
import React from "react"

export default () => <h1>Hello Gatsby!</h1>
export default () => <h1>こんにちは Gatsby!</h1>
```

Finally, go back to the root of your project and run the `gatsby develop` command to start a development server and begin coding.
最後に、プロジェクトのルートディレクトリーに戻って `gatsby develop` コマンドを実行し、開発サーバーを起動して開発を始めましょう。

```shell
cd ../../
gatsby develop
```

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.
それだけです!初期ページが `localhost:8000` で、GraphiQL IDE `localhost:8000/___graphql` で起動しているはずです。ここからは[チュートリアル](/tutorial/part-zero/#set-up-a-code-editor)に戻って、Gatsby が提供する機能をフルに体験するためコードエディターを設定する箇所からチュートリアルを再開してください。