> ## Documentation Index
> Fetch the complete documentation index at: https://docs.squarecloud.app/llms.txt
> Use this file to discover all available pages before exploring further.

# HTML/CSS で Square Cloud を始める

> HTML/CSS で Square Cloud を始める方法を学びましょう

## 🚀 はじめに

* 始める前に、HTML および CSS ファイルを作成するのに適したテキストエディタがあることを確認してください。[Visual Studio Code](https://code.visualstudio.com/) またはお好みのエディタをおすすめします。
* 次に、Square Cloud のアカウントを作成する必要があります。これは[ログインページ](https://squarecloud.app/ja/signup)から行えます。アカウントの作成にはメール、GitHub、またはその両方を使用できます。
* 最後に、アカウントに有効な有料プランが必要です。プランを確認し、ニーズに合わせて[こちら](https://squarecloud.app/ja/pricing)から購入できます。

<Info>Square Cloud は HTML/CSS サイトなどの静的プロジェクトをネイティブにサポートしています。つまり、HTML、CSS、その他の静的リソースをプラットフォーム上で簡単にホスティングできます。統合されたプレミアム CDN により、あなたのサイトは世界中のユーザーに素早く配信されます。</Info>

<Note>
  Square Cloud のウェブサイト経由でアプリケーションをアップロードする場合は、以下のセクションは無視して構いません。サイトが自動的に `squarecloud.app` 設定ファイルを作成します。
</Note>

## 📄 必要なファイル

* index.html（メインファイルの例）。
* vite.html（Vite プロジェクト向けのメインファイルの例）。
* 404.html（404 エラールーティングファイル、任意）。

## 🖥️ プロジェクトの準備

Square Cloud でプロジェクトをホスティングする前に、まずプロジェクトファイルがホスティング用に適切に設定されているかを確認してください。

## 📤 プロジェクトのホスティング方法

HTML/CSS プロジェクトのすべてのファイルを準備できたので、次のステップはそれらを Square Cloud にアップロードし、アプリケーションをオンラインにすることです。アップロードにはいくつかの方法がありますが、ここでは 2 つを取り上げます。Dashboard 経由と CLI 経由です。

### ダッシュボード経由

<Steps>
  <Step title="アップロードページにアクセス">
    [アップロードページ](https://squarecloud.app/ja/dashboard/new)にアクセスし、プロジェクトの zip ファイルをアップロードします。
  </Step>

  <Step title="環境を設定">
    zip をアップロードした後、プロジェクトの名前、メインファイルまたはランタイム環境、その他の設定を構成する必要があります。\
    ウェブプロジェクトをアップロードする場合は、必ず「Web Publication」を選択し、プロジェクトにサブドメインを設定してください。
  </Step>

  <Step title="プロジェクトをデプロイ">
    最後に「Deploy」ボタンをクリックして、プロジェクトを Square Cloud にホストします。\
    デプロイ後、ダッシュボードからプロジェクトのステータスとログを監視できます。

    <Frame>
      <img src="https://cdn.squarecloud.app/docs/articles/dashboard/uploading.gif" alt="Square Cloud へのアプリケーションのアップロード" style={{ borderRadius: "0.2rem" }} />
    </Frame>
  </Step>
</Steps>

### CLI 経由

この方法を使用するには、プロジェクトのルートディレクトリに `squarecloud.app` という名前の設定ファイルを作成する必要があります。このファイルには、プロジェクトに必要な設定が含まれます。

<Card title="詳細はこちら: Square Cloud の設定ファイルの作成方法。" icon="link" href="/ja/getting-started/config-file">
  squarecloud.app ファイルはアプリケーションを構成するために使用される設定ファイルであり、環境を定義するために使用されます。
</Card>

<Steps>
  <Step title="CLI をインストール">
    まず、環境に CLI がインストールされている必要があります。まだの場合は、ターミナルで次のコマンドを実行してください:

    ```
    npm install -g @squarecloud/cli
    ```

    すでにお持ちの場合は、更新することを推奨します。更新するには、ターミナルで次のコマンドを実行してください:

    <Tabs>
      <Tab title="Windows">
        ```bash theme={null}
        squarecloud update
        ```
      </Tab>

      <Tab title="Linux, macOS, and WSL">
        ```bash theme={null}
        curl -fsSL https://cli.squarecloud.app/install | bash
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="認証">
    次に、認証して他の CLI コマンドを使用するには、[こちら](https://squarecloud.app/ja/account/security)で「Request API Key」をクリックして認証キーを取得します。認証キーを取得したら、次のコマンドを実行してください:

    ```bash theme={null}
    squarecloud auth login
    ```
  </Step>

  <Step title="プロジェクトをアップロード">
    最後に、CLI を使用してアプリケーションを Square Cloud にデプロイするには、次のコマンドを実行する必要があります:

    ```bash theme={null}
    squarecloud upload 
    ```

    または、zip を手動で作成した場合は、次を使用できます:

    ```bash theme={null}
    squarecloud upload --file <path/to/zip> 
    ```
  </Step>
</Steps>

## お問い合わせ

**技術的な問題**が解決しない場合は、**専門のサポートチーム**がお手伝いします。[**お問い合わせ**](https://squarecloud.app/ja/support)いただければ、どのような問題でも喜んで解決をサポートいたします。