開発環境のセットアップとビルド、サーブなどのコマンド

以下の手順では、この Web サイトの開発環境をセットアップする方法を説明します。

クラウド IDE のセットアップ

Gitpod

Gitpod.io で作業する手順は以下です。

1. このリポジトリをフォークします。詳細は リポジトリのフォーク方法 を参照してください。

2. gitpod.io/workspaces から新しいワークスペースを作成する（初回のみ）か、フォークしたリポジトリ上の既存のワークスペースを開きます。 また、次の形式のリンクを開くこともできます。 https://gitpod.io#https://github.com/YOUR_GITHUB_ID/opentelemetry.io

   注記: このリポジトリで作業するための権限がある場合や、単に内容を確認したい場合は、 https://gitpod.io/#https://github.com/open-telemetry/opentelemetry.io を開いてください。

Gitpod はリポジトリ固有のパッケージを自動的にインストールします。 これで、ビルド、サーブ、Web サイトファイルの更新を行う準備が整いました。 変更の提出方法の詳細については、コンテンツの提出を参照してください。

Codespaces

GitHub Codespaces で作業するには、下記にしたがってください。

1. Web サイトのリポジトリをフォークします。
2. フォークから Codespace を開きます。

開発環境は DevContainer 設定を介して初期化されます。これで、ビルド、サーブ、Web サイトファイルの更新を行う準備が整いました。 変更の提出方法の詳細については、コンテンツの提出を参照してください。

ローカルセットアップ

1. https://github.com/open-telemetry/opentelemetry.io でWeb サイトのリポジトリフォークした後に、クローンします。

2. リポジトリのディレクトリに移動します。

   cd opentelemetry.io
   

3. Node.js の Active LTS リリース をインストールまたはアップグレードします。 Node.js インストレーションの管理には nvm の使用を推奨します。 Linux では以下のコマンドを実行してください。 .nvmrc ファイルで指定されたバージョンにインストールとアップグレードします。

   nvm install
   

   Windows で インストールする場合 は、nvm-windows を使用してください。 cmd を使用し、Windows PowerShell を使用しないことをお勧めします。

   nvm install lts && nvm use lts
   

4. npm パッケージとその他の依存関係をインストールします。

   npm install
   

お好みの IDE を起動してください。これで、ビルド、サーブ、Web サイトファイルの更新を行う準備が整いました。 変更の提出方法の詳細については、コンテンツの提出を参照してください。

ビルド

サイトをビルドするには、次のコマンドを実行します。

npm run build

生成されたサイトのファイルは public ディレクトリ内にあります。

ERROR error building site: ...[long message]... TOCSS: failed to transform "/scss/main.scss" (text/x-scss)

ERROR failed to load modules: module "github.com/FortAwesome/Font-Awesome" not found

npm install

サーブ

サイトをサーブするには、次のコマンドを実行します。

npm run serve

サイトは localhost:1313 でサーブされます。

Netlify のリダイレクトをテストする必要がある場合は、次のコマンドを実行し、localhost:8888 にアクセスしてください。

npm run serve:netlify

この serve コマンドは、ディスクではなくメモリ上のファイルを提供します。

macOS で too many open files や pipe failed というエラーが発生する場合は、ファイルディスクリプタの制限を増やす必要があるかもしれません。 詳しくは Hugo のイシューの #6109 を参照してください。

コンテンツとサブモジュール

Web サイトは以下のコンテンツを基に構築されます。

• content/、static/ などの Hugo のデフォルトディレクトリ
• config/_default/module-template.yaml の Hugo config で定義されたマウントポイント。 マウントは content-modules の Git サブモジュールから直接取得される場合や、content-modules から前処理されたコンテンツ（tmp/ に配置）の場合があり、それ以外の場所からは取得されません。

サブモジュールの変更

content-modules のサブモジュール内のコンテンツを変更する場合は、まずそのサブモジュールのリポジトリに対して PR（サブモジュールの変更を含む）を送信する必要があります。 サブモジュールの PR が承認された後にのみ、サブモジュールを更新し、この Web サイトに変更を反映できます。

これは、サブモジュールそのものを更新するよりも、対応するサブモジュールの元のリポジトリで作業することが、content-modules の変更を管理する最も簡単な方法です。

経験豊富なコントリビューターは、サブモジュール内で直接作業することも可能です。 その場合、（サブモジュールの）変更を直接ビルドおよびサーブできます。 デフォルトでは CI スクリプトが呼び出しのたびに、サブモジュールを取得します。 作業中にこの動作を防ぐには、環境変数 GET=no を設定してください。 サブモジュールの PR を提出する前に、サブモジュールに対して git fetch --unshallow を実行する必要もあります。 または、DEPTH=100 を設定してサブモジュールを再取得してください。

DevContainer サポート

このリポジトリは Development Containers での使用に設定されています。DevContainerは以下のようなさまざまなクラウドおよびローカル IDE でサポートされています（アルファベット順）。

• Codespaces
• DevPod
• Gitpod
• VSCode

ツール

Code-excerpter

このリポジトリ内のソースファイルと同期を保つ必要があるコードスニペットには、code-excerpter を使用してください。 各ロケールのサイトページはコードの抜粋を含みますが、それらを利用する原文は content/en 配下で英語で作成され、ローカリゼーションチームが各ロケール向けに更新します。

英語のソースページでは、更新対象となるフェンス付きコードブロックの直前に、ファイル抜粋ディレクティブを記載してください。

<?code-excerpt path-base="examples/java/getting-started"?>

<?code-excerpt "src/main/java/otel/DiceApplication.java" from="@SpringBootApplication"?>

```java
@SpringBootApplication
public class DiceApplication {
  public static void main(String[] args) {
    SpringApplication app = new SpringApplication(DiceApplication.class);
    app.setBannerMode(Banner.Mode.OFF);
    app.run(args);
  }
}
```

複数の抜粋が同じディレクトリから取得される場合は、任意の path-base ディレクティブをページ上部付近に 1 度だけ記載してください。 code-excerpt ディレクティブ構文の詳細については、code-excerpter の README を参照してください。

ソースファイルまたはディレクティブを編集し、フェンス付きコードを編集しないでください。 その後、次の npm スクリプト を実行してください。

npm run fix:code-excerpts

code-excerpts が最新かどうかを確認するには、次のコマンドを実行してください。

npm run check:code-excerpts