Hugging Face 的 LOGO

构建静态HTML空间

社区文章 发布于2024年7月30日
赞
6
Sylvain Lesage's avatar
Sylvain Lesage
severo

image/png

像Svelte、React或Observable Framework这样的前端库会生成静态网页应用，但需要一个构建步骤。

通常，你有以下选项来创建一个静态HTML空间。

  • 你可以将代码托管在GitHub上并通过GitHub action部署，或者从本地机器构建和部署。
  • 此外，你还可以将网站托管在Docker空间中，就像我为severo/followgraph所做的那样。Dockerfile会在每次推送到仓库时构建网站；然后，容器在运行时提供更新后的网站。但这并不是最优的，空间会在一段时间后自动停止，而静态HTML空间则不会。

这里，我们提出一种使用两个空间的方案：

  • 代码空间：一个Docker空间，用于托管应用程序源代码，进行构建和部署；
  • 站点空间：一个静态HTML空间，用于托管构建好的网站。

在本教程中，我们将部署默认的Svelte演示页面。

感谢@XciD提供这个想法并优化Dockerfile。感谢@Wauplin审阅和修正🙏。

站点空间

让我们首先创建将托管构建后网站的*站点空间*。请访问https://huggingface.co/new-space。我们将该空间命名为“svelte-demo”，并选择“Static”SDK和“Blank”静态模板。

image/png

该空间包含一个README.md以及默认的HTML和CSS文件。初始状态请参见：https://huggingface.co/spaces/severo/svelte-demo/tree/777cd50e4088a5deed54117d1ae6b561948db994

image/png

我们不需要再在这个空间上工作了。它将完全由*代码空间*控制。

代码空间

现在，让我们创建另一个空间，其中将包含网站的源代码和用于构建及部署的Dockerfile。

创建代码空间

我们访问https://huggingface.co/new-space，将空间命名为“build-svelte-demo”，选择“Docker”SDK，然后选择“Blank”Docker模板。

image/png

本地克隆仓库

我们通过将此空间克隆到我们的机器上进行本地工作。

$ git clone git@hf.co:spaces/severo/build-svelte-demo
$ cd build-svelte-demo

创建Svelte网站

举个例子，让我们创建Svelte演示页面。我们调用vite并选择Svelte作为框架，使用Typescript变体。

$ npm init vite
Need to install the following packages:
create-vite@5.4.0
Ok to proceed? (y) y


> npx
> create-vite

✔ Project name: … svelte-demo
✔ Select a framework: › Svelte
✔ Select a variant: › TypeScript

Scaffolding project in /home/slesage/hf/build-svelte-demo/svelte-demo...

Done. Now run:

  cd svelte-demo
  npm install
  npm run dev

你也可以使用Vite来构建项目，用于纯JavaScript、Vue或React等其他库，或者使用社区模板。

确保网站在本地正常运行

安装软件包并启动开发Web服务器

$ cd svelte-demo
$ npm install
$ npm run dev

在浏览器中打开https://:5173。您应该能看到默认的Svelte页面。

创建Dockerfile

将以下代码复制到仓库根目录下的新文件Dockerfile中。

FROM ubuntu:22.04

# Install Node.js 22 - https://github.com/nodesource/distributions?tab=readme-ov-file#installation-instructions-deb
# And python3
RUN apt update \
    && apt install -y curl python3 python3-pip \
    && rm -rf /var/lib/apt/lists/*

RUN curl -fsSL https://deb.nodesource.com/setup_22.x -o nodesource_setup.sh \
    && bash nodesource_setup.sh \
    && apt update \
    && apt install -y nodejs \
    && rm -rf /var/lib/apt/lists/* \
    && rm nodesource_setup.sh

RUN pip install --upgrade "huggingface_hub[cli]"

# Build the app
WORKDIR /tmp/app
COPY svelte-demo/ ./
RUN npm ci && npm rebuild && npm run build

# The site space name must be passed as an environment variable
# https://huggingface.co/docs/hub/spaces-sdks-docker#buildtime
ARG STATIC_SPACE
# The Hugging Face token must be passed as a secret (https://huggingface.co/docs/hub/spaces-sdks-docker#buildtime)
# 1. get README.md from the site space
RUN --mount=type=secret,id=HF_TOKEN,mode=0444,required=true \
    huggingface-cli download --token=$(cat /run/secrets/HF_TOKEN) --repo-type=space --local-dir=/tmp/app/dist $STATIC_SPACE README.md && rm -rf /tmp/app/dist/.cache
# 2. upload the new build to the site space, including README.md
RUN --mount=type=secret,id=HF_TOKEN,mode=0444,required=true \
    huggingface-cli upload --token=$(cat /run/secrets/HF_TOKEN) --repo-type=space $STATIC_SPACE /tmp/app/dist . --delete "*"

# Halt execution because the code space is not meant to run.
RUN exit 1

一些解释：

  • 我们使用通用镜像（Ubuntu）来安装我们需要的任何工具。在此例中，我们使用node和python，但如果你需要使用其他工具进行构建，可以轻松调整docker文件。
  • 第一个区块安装Node.js、Python 3和huggingface_hub CLI。
  • 下一个代码块安装npm包并将网站构建到/tmp/app/dist。
  • 然后我们声明需要`STATIC_SPACE`环境变量。它必须设置为*站点空间*的仓库名称。更多信息稍后介绍。
  • 最后一个区块将README.md文件下载到本地构建的应用程序，然后上传所有内容以替换当前内容。请注意，我们传递了一个名为`HF_TOKEN`的空间密钥（请参阅以下部分）。
  • 最后一行（RUN exit 1）是一个技巧：我们返回一个错误代码，以阻止*代码空间*运行。

准备STATIC_SPACE环境变量

进入代码空间设置，并将一个名为STATIC_SPACE的变量设置为*站点空间*的仓库名称：severo/svelte-demo

image/png

准备HF_TOKEN密钥

在您的设置中创建新令牌：https://huggingface.co/settings/tokens

  • 精细控制
  • 令牌名称：space-build-svelte-demo
  • 在“存储库权限”下找到*站点空间* svelte-demo，并勾选“对所选存储库的内容/设置具有写入权限”
  • 创建令牌

image/png

然后复制该值，并将其粘贴到*代码空间*仓库设置中名为HF_TOKEN的新密钥中。

image/png

我们现在有一个环境变量和一个密钥

image/png

提交并推送

最后一步是提交你的更改并将它们推送到Hugging Face上的*代码空间*

$ git add .
$ git commit -m "add Dockerfile and the app"
$ git push

查看构建日志

推送后，*代码空间*将自动构建。您可以在https://huggingface.co/spaces/severo/build-svelte-demo?logs=build查看日志

image/png

最后几行应该显示文件已上传到*站点空间*，然后构建失败，这是故意的，如上所述

--> RUN --mount=type=secret,id=HF_TOKEN,mode=0444,required=true huggingface-cli upload --token=$(cat /run/secrets/HF_TOKEN) --repo-type=space severo/svelte-demo /tmp/space . --delete "*"
Consider using `hf_********` for faster uploads. This solution comes with some limitations. See https://huggingface.co/docs/huggingface_hub/hf_******** for more details.
Removing 5 file(s) from commit that have not changed.
No files have been modified since last commit. Skipping to prevent empty commit.
https://huggingface.co/spaces/severo/svelte-demo/tree/main/.
DONE 1.1s

--> RUN exit 1

--> ERROR: process "/bin/sh -c exit 1" did not complete successfully: exit code: 1

结论

网站现已部署在*站点空间*上：https://huggingface.co/spaces/severo/svelte-demo

image/png

我们来回顾一下逻辑：

  • 创建一个空的静态HTML空间：*站点空间*
  • 在另一个Docker空间（*代码空间*）中托管你的Svelte/React/Vue应用
  • 在*代码空间*中添加一个Dockerfile，其中包含构建并部署到*站点空间*的命令
  • 任何推送到*代码空间*的更改都将上传到*站点空间*。

副作用：*代码空间*可以保持私有，而*站点空间*可以公开。

现在轮到你了。分享你的创作吧！

社区

注册 或 登录以发表评论

赞
6