# Static HTML Spaces

Spaces cũng hỗ trợ HTML tùy chỉnh cho ứng dụng của bạn thay vì sử dụng Streamlit hoặc Gradio. Đặt `sdk: static` bên trong khối `YAML` ở đầu tệp **README.md** của Spaces. Sau đó, bạn có thể đặt mã HTML của mình trong tệp **index.html**.

Static Spaces miễn phí cho tất cả mọi người: chúng được phục vụ trực tiếp mà không chạy trên compute, vì vậy khác với Spaces [Gradio](./spaces-sdks-gradio) và [Docker](./spaces-sdks-docker), việc tạo chúng không bao giờ yêu cầu gói trả phí.

Dưới đây là một số ví dụ về Spaces sử dụng HTML tùy chỉnh:

* [NPC thông minh hơn](https://huggingface.co/spaces/mishig/smarter_npc): Hiển thị một dự án PlayCanvas bằng iframe trong Spaces.
* [Huggingfab](https://huggingface.co/spaces/pierreant-p/huggingfab): Hiển thị mô hình Sketchfab trong Spaces.
* [Khuếch tán phần còn lại](https://huggingface.co/spaces/huggingface-projects/diffuse-the-rest): Vẽ và khuếch tán phần còn lại

## Thêm bước build trước khi phục vụ

Static Spaces hỗ trợ thêm một bước build tùy chỉnh trước khi phục vụ các tài sản tĩnh của bạn. Điều này hữu ích cho các framework frontend như React, Svelte và Vue, vốn yêu cầu một quy trình build trước khi phục vụ ứng dụng. Lệnh build sẽ chạy tự động khi Space của bạn được cập nhật.

Thêm `app_build_command` vào khối `YAML` ở đầu tệp **README.md** của Spaces và `app_file`.

Ví dụ:
- `app_build_command: npm run build`
- `app_file: dist/index.html`

Các không gian ví dụ:

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

Bên trong, nó sẽ [khởi chạy một quy trình build](https://huggingface.co/spaces/huggingface/space-build), lưu các tệp được tạo vào ref đặc biệt `refs/convert/build`.

## Biến không gian

Các [biến môi trường](./spaces-overview#managing-secrets) tùy chỉnh có thể được truyền vào Space của bạn. Thông tin OAuth như client ID và scope cũng có sẵn dưới dạng biến môi trường, nếu bạn đã [bật OAuth](./spaces-oauth) cho Space của mình.

Để sử dụng các biến này trong JavaScript, bạn có thể dùng đối tượng `window.huggingface.variables`. Ví dụ, để truy cập biến `OAUTH_CLIENT_ID`, bạn có thể dùng `window.huggingface.variables.OAUTH_CLIENT_ID`.

Dưới đây là một ví dụ về Space sử dụng các biến môi trường tùy chỉnh và bật oauth, hiển thị các biến trong HTML:

* [Biến tĩnh](https://huggingface.co/spaces/huggingfacejs/static-variables)