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

# Hospede um site estático em HTML/CSS

> Hospede um site estático em HTML, CSS e JavaScript na Square Cloud: envie o index.html e os assets, adicione um 404.html ou vite.html de fallback e publique.

O runtime estático serve HTML, CSS, JavaScript, imagens e outros arquivos direto do seu ZIP, com um servidor web gerenciado pela Square Cloud. Não há nenhum processo seu para manter rodando, então essa é a forma mais leve de publicar um site.

## Antes de começar

* Um editor de texto para os seus arquivos HTML e CSS, como o [Visual Studio Code](https://code.visualstudio.com/).
* Uma conta na Square Cloud: [cadastre-se](https://squarecloud.app/pt-br/signup) com seu e-mail ou GitHub.
* Um plano ativo. Veja os [planos](https://squarecloud.app/pt-br/pricing) e escolha o que combina com o seu projeto.

## Sites estáticos e aplicações renderizadas no servidor

Um **site estático** é um conjunto de arquivos que é igual para todos os visitantes: páginas HTML simples, ou a saída do build de um framework como Vite, React, Vue, Angular, Astro ou Gatsby. O runtime estático serve esses arquivos como estão.

Uma **aplicação renderizada no servidor** monta as páginas a cada requisição, com código de servidor como Next.js, Nuxt, React Router ou uma API. Ela precisa de um processo que continue rodando, então roda em um runtime de linguagem, como o [runtime Node.js](/pt-br/articles/getting-started-with-nodejs), com um arquivo `MAIN` ou um comando `START`.

Se o seu framework faz as duas coisas, um build estático é a opção mais leve. Cada [guia de framework](#guias-de-frameworks) mostra quais opções ele suporta.

## Configure a Square Cloud

<Note>
  Se você envia sua aplicação pelo dashboard, pode pular esta seção: o dashboard cria o arquivo de configuração `squarecloud.app` para você.
</Note>

<Card title="Referência do arquivo de configuração" icon="link" href="/pt-br/getting-started/config-file">
  O arquivo `squarecloud.app` diz à Square Cloud como executar a sua aplicação: o arquivo principal, a memória, a versão do runtime, o nome e, para um site, o subdomínio.
</Card>

Um `MAIN` que aponta para um arquivo HTML seleciona o runtime estático:

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

512 MB é a memória mínima para um site, e é mais do que suficiente para arquivos estáticos.

## Como o runtime estático serve os arquivos

* A raiz do ZIP é a raiz do seu site: `about.html` é servido em `/about.html`, e `blog/index.html` em `/blog/`.
* `/` serve o `vite.html` se ele existir, senão o `index.html`.
* Quando um caminho não corresponde a nenhum arquivo, o runtime serve o `vite.html` se ele existir. Isso mantém as rotas do lado do cliente de aplicações single-page funcionando ao recarregar, qualquer que seja o framework: renomeie o `index.html` do build para `vite.html`.
* Sem `vite.html`, caminhos desconhecidos retornam o seu `404.html`, ou uma página 404 padrão se você não tiver uma.
* Os arquivos são comprimidos na hora, e o seu arquivo `squarecloud.app` nunca é servido.

<Warning>Todo arquivo do ZIP é público. Não envie código-fonte, arquivos `.env` ou qualquer outra coisa que você não queira que os visitantes baixem.</Warning>

## Prepare o projeto

Coloque os seus arquivos na raiz do ZIP, ao lado do `squarecloud.app`:

* `index.html`, ou `vite.html` para uma aplicação single-page.
* Os seus arquivos CSS, JavaScript, imagens e fontes, em qualquer estrutura de pastas.
* `404.html`, opcional: a página para caminhos que não existem.

Para o build de um framework, compacte o conteúdo da pasta de saída do build, e não a pasta em si.

## Guias de frameworks

Cada guia mostra o comando de build, a pasta de saída e como publicá-la no runtime estático.

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

  <Card title="React" icon="react" href="/pt-br/tutorials/website/react" />

  <Card title="Vue" icon="vuejs" href="/pt-br/tutorials/website/vue" />

  <Card title="Angular" icon="angular" href="/pt-br/tutorials/website/angular" />

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

  <Card title="Gatsby" icon="g" href="/pt-br/tutorials/website/gatsby" />

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

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

  <Card title="SolidJS" icon="s" href="/pt-br/tutorials/website/solidjs" />

  <Card title="Nuxt" icon="mountains" href="/pt-br/tutorials/website/nuxt" />
</CardGroup>

## Solução de problemas

<AccordionGroup>
  <Accordion title="A página padrão do Square Shield aparece" icon="file">
    A página diz "Hi, I'm Square Shield": o runtime não encontrou `index.html` nem `vite.html` na raiz do ZIP. Provavelmente você compactou a pasta do build em vez do conteúdo dela: compacte os arquivos que estão dentro da pasta.
  </Accordion>

  <Accordion title="Recarregar uma rota retorna 404" icon="route">
    A sua aplicação single-page trata as rotas no navegador. Renomeie o `index.html` dela para `vite.html`, para que caminhos desconhecidos carreguem a aplicação, e atualize o `MAIN`.
  </Accordion>
</AccordionGroup>

Para outros problemas, veja [Solução de problemas](/pt-br/platform/troubleshooting).

## Faça o deploy

### Via dashboard

<Steps>
  <Step title="Acesse a página de upload">
    Acesse a [página de upload](https://squarecloud.app/pt-br/dashboard/new) e envie seu arquivo zip.
  </Step>

  <Step title="Configure seu ambiente">
    Após fazer o upload do seu arquivo zip, você precisará configurar o nome, o arquivo principal ou o ambiente de execução e outras configurações do seu projeto.\
    Se você estiver enviando um projeto web, certifique-se de selecionar "Publicação na Web" e definir um subdomínio para o seu projeto.
  </Step>

  <Step title="Faça o deploy do projeto">
    Por fim, clique no botão "Deploy" para hospedar seu projeto na Square Cloud.
    Após o deploy, você poderá monitorar o status e os registros do seu projeto no dashboard.

    <Frame>
      <img src="https://cdn.squarecloud.app/docs/articles/dashboard/uploading-pt-br.gif" alt="Enviando aplicação para a Square Cloud" style={{ borderRadius: "0.2rem" }} />
    </Frame>
  </Step>

  <Step title="Confirme que seu app está no ar">
    Seu primeiro deploy geralmente leva menos de um minuto. No [dashboard](https://squarecloud.app/pt-br/dashboard), aguarde o status da sua aplicação mudar para em execução e verifique os registros em busca de erros de inicialização.\
    Se você fez deploy de um site ou API, abra `https://<seu-subdominio>.squareweb.app` no navegador: você deve ver sua aplicação respondendo. Se você fez deploy de um bot, envie um comando para confirmar que ele está online.
    <Tip>Seu app não está iniciando? Veja o [guia de solução de problemas](/pt-br/platform/troubleshooting/app-wont-start) para as causas e correções mais comuns.</Tip>
  </Step>
</Steps>

### Via CLI

Para usar esse método, seu projeto precisa de um arquivo de configuração chamado `squarecloud.app` na raiz. Ele informa à Square Cloud como executar a sua aplicação.

<Card title="Guia do arquivo de configuração" icon="link" href="/pt-br/getting-started/config-file">
  Saiba como criar o arquivo de configuração `squarecloud.app` que define o ambiente da sua aplicação.
</Card>

<Steps>
  <Step title="Instale a CLI">
    Instale a [CLI da Square Cloud](/pt-br/cli-reference/installation). Se você já a tem, execute o mesmo comando para atualizá-la:

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

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

  <Step title="Faça login">
    Execute o comando abaixo. Ele abre o seu navegador: aprove o login lá e a CLI está pronta. Não há nenhuma chave de API para copiar. Para scripts e CI, veja [autenticação da CLI](/pt-br/cli-reference/authentication).

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

  <Step title="Envie o seu projeto">
    Na pasta do seu projeto, execute o comando abaixo. A CLI compacta a pasta atual, deixando de fora o que o [`squarecloud.ignore`](/pt-br/getting-started/squarecloud-ignore) lista, e faz o upload:

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

    Para enviar um zip que você mesmo criou, passe-o com `--file`:

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

  <Step title="Confirme que seu app está no ar">
    Seu primeiro deploy geralmente leva menos de um minuto. Verifique o status e os registros da sua aplicação diretamente pelo terminal:

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

    Se você fez deploy de um site ou API, abra `https://<seu-subdominio>.squareweb.app` no navegador: você deve ver sua aplicação respondendo. Se você fez deploy de um bot, envie um comando para confirmar que ele está online.
    <Tip>Seu app não está iniciando? Veja o [guia de solução de problemas](/pt-br/platform/troubleshooting/app-wont-start) para as causas e correções mais comuns.</Tip>
  </Step>
</Steps>

## Próximos passos

<CardGroup cols={3}>
  <Card title="Variáveis de ambiente" icon="key" href="/pt-br/platform/environment-variables">
    Mantenha segredos e configurações fora do código e leia-os em tempo de execução.
  </Card>

  <Card title="Domínio personalizado" icon="globe" href="https://help.squarecloud.app/pt-br/article/como-configurar-seu-proprio-dominio-cnamedns-j39hh2/">
    Sirva a sua aplicação no seu próprio domínio, a partir do plano Standard.
  </Card>

  <Card title="Solução de problemas" icon="wrench" href="/pt-br/platform/troubleshooting">
    Corrija uma aplicação que não inicia ou um site que não responde.
  </Card>
</CardGroup>

## Contate-nos

Se você continuar enfrentando **dificuldades técnicas**, nossa **equipe de suporte especializada** está disponível para auxiliá-lo. [**Entre em contato conosco**](https://squarecloud.app/pt-br/support) e teremos prazer em ajudá-lo a resolver qualquer questão: a qualidade do suporte é uma grande parte do motivo pelo qual desenvolvedores avaliam a Square Cloud com [**4,9/5 em 402 avaliações**](https://www.trustpilot.com/review/squarecloud.app) no Google e Trustpilot.


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