# Espaços HTML estáticos

Os Spaces também acomodam HTML personalizado para o seu aplicativo, em vez de usar Streamlit ou Gradio. Defina `sdk: static` dentro do bloco `YAML` no topo do arquivo **README.md** dos seus Spaces. Em seguida, você pode colocar seu código HTML dentro de um arquivo **index.html**.

Os Spaces estáticos são gratuitos para todos: eles são servidos diretamente, sem necessidade de execução em recursos de computação, portanto, diferentemente dos Spaces [Gradio](./spaces-sdks-gradio) e [Docker](./spaces-sdks-docker), sua criação nunca exige um plano pago.

Aqui estão alguns exemplos de Spaces usando HTML personalizado:

* [NPC mais inteligente](https://huggingface.co/spaces/mishig/smarter_npc): Exiba um projeto do PlayCanvas com um iframe em Spaces.
* [Huggingfab](https://huggingface.co/spaces/pierreant-p/huggingfab): Exibir um modelo do Sketchfab em Spaces.
* [Diffuse the rest](https://huggingface.co/spaces/huggingface-projects/diffuse-the-rest): Desenhe e difunda o restante

## Adicionando uma etapa de compilação antes da execução

Os Spaces estáticos suportam a adição de uma etapa de build personalizada antes de servir seus assets estáticos. Isso é útil para frameworks de frontend como React, Svelte e Vue que exigem um processo de build antes de servir a aplicação. O comando de build é executado automaticamente quando seu Space é atualizado.

Adicione `app_build_command` dentro do bloco `YAML` no topo do arquivo **README.md** do seu Spaces, e `app_file`.

Por exemplo:
- `app_build_command: npm run build`
- `app_file: dist/index.html`

Espaços de exemplo:

- [Aplicativo Svelte](https://huggingface.co/spaces/julien-c/vite-svelte)
- [Aplicativo React](https://huggingface.co/spaces/coyotte508/static-vite)

Por baixo dos panos, ele vai [iniciar uma compilação](https://huggingface.co/spaces/huggingface/space-build), armazenando os arquivos gerados em uma ref especial `refs/convert/build`.

## Variáveis de espaço

Variáveis de ambiente [personalizadas](./spaces-overview#managing-secrets) podem ser passadas para o seu Space. Informações de OAuth, como o client ID e o scope, também estão disponíveis como variáveis de ambiente, se você tiver [ativado o OAuth](./spaces-oauth) para o seu Space.

Para usar essas variáveis em JavaScript, você pode usar o objeto `window.huggingface.variables`. Por exemplo, para acessar a variável `OAUTH_CLIENT_ID`, você pode usar `window.huggingface.variables.OAUTH_CLIENT_ID`.

Aqui está um exemplo de um Space que usa variáveis de ambiente personalizadas e oauth habilitado, exibindo as variáveis no HTML:

* [Variáveis Estáticas](https://huggingface.co/spaces/huggingfacejs/static-variables)