> ## 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.

# Host a Static HTML/CSS Website

> Host a static HTML, CSS and JavaScript website on Square Cloud: upload index.html with your assets, add a 404.html or vite.html fallback, and publish it.

The static runtime serves HTML, CSS, JavaScript, images and other files straight from your ZIP, with a web server managed by Square Cloud. There is no process of yours to keep running, so it is the lightest way to publish a website.

## Before you begin

* A text editor for your HTML and CSS files, such as [Visual Studio Code](https://code.visualstudio.com/).
* A Square Cloud account: [sign up](https://squarecloud.app/en/signup) with your email or GitHub.
* An active plan. See the [plans](https://squarecloud.app/en/pricing) and pick the one that fits your project.

## Static sites and server-rendered apps

A **static site** is a set of files that is the same for every visitor: plain HTML pages, or the build output of a framework such as Vite, React, Vue, Angular, Astro or Gatsby. The static runtime serves those files as they are.

A **server-rendered app** builds pages on each request, with server code such as Next.js, Nuxt, React Router or an API. It needs a process that keeps running, so it runs on a language runtime, such as the [Node.js runtime](/en/articles/getting-started-with-nodejs), with a `MAIN` file or a `START` command.

If your framework can do both, a static build is the lighter choice. Each [framework guide](#framework-guides) shows which options it supports.

## Configure Square Cloud

<Note>
  If you upload your application through the dashboard, you can skip this section: the dashboard creates the `squarecloud.app` configuration file for you.
</Note>

<Card title="Configuration file reference" icon="link" href="/en/getting-started/config-file">
  The `squarecloud.app` file tells Square Cloud how to run your application: its main file, memory, runtime version, name and, for a website, its subdomain.
</Card>

A `MAIN` that points to an HTML file selects the static runtime:

```systemd squarecloud.app theme={"system"}
MAIN=index.html
MEMORY=512
VERSION=recommended
DISPLAY_NAME=My website
SUBDOMAIN=mywebsite
```

512 MB is the minimum memory for a website, and plenty for static files.

## How the static runtime serves files

* The root of the ZIP is the root of your site: `about.html` is served at `/about.html`, and `blog/index.html` at `/blog/`.
* `/` serves `vite.html` if it exists, otherwise `index.html`.
* When a path does not match any file, the runtime serves `vite.html` if it exists. This keeps client-side routes of single-page apps working on refresh, whatever the framework: rename the `index.html` of the build to `vite.html`.
* Without `vite.html`, unknown paths return your `404.html`, or a default 404 page if you don't have one.
* Files are compressed on the fly, and your `squarecloud.app` file is never served.

<Warning>Every file in the ZIP is public. Don't upload source code, `.env` files or anything else you don't want visitors to download.</Warning>

## Prepare the project

Put your files at the root of the ZIP, next to `squarecloud.app`:

* `index.html`, or `vite.html` for a single-page app.
* Your CSS, JavaScript, images and fonts, in any folder structure.
* `404.html`, optional: the page for paths that don't exist.

For a framework build, zip the contents of the build output folder, not the folder itself.

## Framework guides

Each guide shows the build command, the output folder and how to publish it on the static runtime.

<CardGroup cols={3}>
  <Card title="Vite" icon="v" href="/en/tutorials/website/vite" />

  <Card title="React" icon="react" href="/en/tutorials/website/react" />

  <Card title="Vue" icon="vuejs" href="/en/tutorials/website/vue" />

  <Card title="Angular" icon="angular" href="/en/tutorials/website/angular" />

  <Card title="Astro" icon="rocket-vertical" href="/en/tutorials/website/astrojs" />

  <Card title="Gatsby" icon="g" href="/en/tutorials/website/gatsby" />

  <Card title="Preact" icon="atom-simple" href="/en/tutorials/website/preact" />

  <Card title="Qwik" icon="circle-bolt" href="/en/tutorials/website/qwik" />

  <Card title="SolidJS" icon="s" href="/en/tutorials/website/solidjs" />

  <Card title="Nuxt" icon="mountains" href="/en/tutorials/website/nuxt" />
</CardGroup>

## Troubleshooting

<AccordionGroup>
  <Accordion title="The Square Shield default page appears" icon="file">
    The page says "Hi, I'm Square Shield": the runtime did not find `index.html` or `vite.html` at the root of the ZIP. You probably zipped the build folder itself instead of its contents: zip the files inside it.
  </Accordion>

  <Accordion title="A refresh on a route returns 404" icon="route">
    Your single-page app handles routes in the browser. Rename its `index.html` to `vite.html` so unknown paths load the app, and update `MAIN`.
  </Accordion>
</AccordionGroup>

For other problems, see [Troubleshooting](/en/platform/troubleshooting).

## Deploy

### Via dashboard

<Steps>
  <Step title="Access the Upload Page">
    Access the [upload page](https://squarecloud.app/en/dashboard/new) and upload your project zip file.
  </Step>

  <Step title="Configure Your Environment">
    After uploading your zip, you will need to configure the name, main file or runtime environment and other settings for your project.\
    If you are uploading a web project, make sure to select "Web Publication" and set a subdomain to your project.
  </Step>

  <Step title="Deploy Your Project">
    Finally, click on the "Deploy" button to host your project on Square Cloud.\
    After deployment, you can monitor your project's status and logs from the dashboard.

    <Frame>
      <img src="https://cdn.squarecloud.app/docs/articles/dashboard/uploading.gif" alt="Uploading application to Square Cloud" style={{ borderRadius: "0.2rem" }} />
    </Frame>
  </Step>

  <Step title="Confirm Your App Is Live">
    Your first deploy usually takes less than a minute. In the [dashboard](https://squarecloud.app/en/dashboard), wait for your application status to show as running and check the logs for any startup errors.\
    If you deployed a website or API, open `https://<your-subdomain>.squareweb.app` in your browser: you should see your application responding. If you deployed a bot, send it a command to confirm it is online.
    <Tip>App not starting? See the [Troubleshooting guide](/en/platform/troubleshooting/app-wont-start) for the most common causes and fixes.</Tip>
  </Step>
</Steps>

### Via CLI

To use this method, your project needs a configuration file named `squarecloud.app` at its root. It tells Square Cloud how to run your application.

<Card title="Configuration file guide" icon="link" href="/en/getting-started/config-file">
  Learn how to create the `squarecloud.app` configuration file that defines your application's environment.
</Card>

<Steps>
  <Step title="Install the CLI">
    Install the [Square Cloud CLI](/en/cli-reference/installation). If you already have it, run the same command to update it:

    <CodeGroup>
      ```bash macOS, Linux, and WSL theme={"system"}
      curl -fsSL https://cli.squarecloud.app/install | bash
      ```

      ```bash Windows with npm theme={"system"}
      npm install -g @squarecloud/cli@latest
      ```
    </CodeGroup>
  </Step>

  <Step title="Log In">
    Run the command below. It opens your browser: approve the login there and the CLI is ready. There is no API key to copy. For scripts and CI, see [CLI authentication](/en/cli-reference/authentication).

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

  <Step title="Upload Your Project">
    From your project folder, run the command below. The CLI zips the current folder, leaving out what [`squarecloud.ignore`](/en/getting-started/squarecloud-ignore) lists, and uploads it:

    ```bash theme={"system"}
    squarecloud upload
    ```

    To upload a zip you created yourself, pass it with `--file`:

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

  <Step title="Confirm Your App Is Live">
    Your first deploy usually takes less than a minute. Check your application status and logs directly from the terminal:

    ```bash theme={"system"}
    squarecloud app status
    squarecloud app logs
    ```

    If you deployed a website or API, open `https://<your-subdomain>.squareweb.app` in your browser: you should see your application responding. If you deployed a bot, send it a command to confirm it is online.
    <Tip>App not starting? See the [Troubleshooting guide](/en/platform/troubleshooting/app-wont-start) for the most common causes and fixes.</Tip>
  </Step>
</Steps>

## Next steps

<CardGroup cols={3}>
  <Card title="Environment variables" icon="key" href="/en/platform/environment-variables">
    Keep secrets and settings out of your code and read them at runtime.
  </Card>

  <Card title="Custom domain" icon="globe" href="https://help.squarecloud.app/en-us/article/how-to-set-up-your-own-domain-cnamedns-1fzbrgh/">
    Serve your app on your own domain, on the Standard plan and above.
  </Card>

  <Card title="Troubleshooting" icon="wrench" href="/en/platform/troubleshooting">
    Fix an app that does not start or a site that does not respond.
  </Card>
</CardGroup>

## Contact us

If you continue facing **technical difficulties**, our **specialized support team** is available to assist you. [**Contact us**](https://squarecloud.app/en/support) and we'll be happy to help you resolve any issue: support quality is a big part of why developers rate Square Cloud [**4.9/5 across 402 reviews**](https://www.trustpilot.com/review/squarecloud.app) on Google and Trustpilot.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.