🚀 CLI 部署實戰指南

如何使用 CLI 部署網頁到
Hugging Face Spaces

結合 Antigravity CLI 的自動化能力,只需拖曳專案並輸入指令,即可將您的靜態網頁或 App 快速上線至 Hugging Face!
💡 本範例以「陳達毅科長」提供的四份 PPT 重點整理大綱為主

陳達毅科長 PPT 重點整理大綱範例
📖 大綱範例:陳達毅科長提供的四份 PPT 重點整理
13 簡單步驟
Zero 複雜 Git 指令
100% 自動化部署

手把手圖文教學

請點擊任意圖片,即可放大查看圖片與該步驟的詳細說明文字

01

開啟 Antigravity CLI

在上次已經把 CLI 安裝在電腦上了,每次登入時搜尋 cmd (命令提示字元),輸入 "agy" 即可進入到頁面。

💡 提示:agy 是一個強大的終端輔助工具,能直接協助分析專案結構並與 Hugging Face API 對接。
開啟 Antigravity CLI
🔍 點擊放大閱讀
02

CLI 歡迎畫面

進入到頁面會長這個樣子。畫面上會顯示目前的專案路徑、系統環境,以及隨時待命的對話視窗。

💡 提示:確認畫面下方的輸入欄位是否能正常輸入文字,這是您與 CLI 互動的通道。
CLI 歡迎畫面
🔍 點擊放大閱讀
03

拖曳專案檔案與輸入指令

再來可以將您要整理的檔案或整個資料夾,直接從桌面拖曳到 CLI 視窗上面。拖曳後,輸入您的指示詞,當 CLI 提示需要權限許可時,按下 YES (或點 Enter) 確認執行。

💡 提示:拖曳後 CLI 會自動載入檔案路徑,您只需下達如「幫我打包並準備部署」的語意指令即可。
拖曳專案檔案與輸入指令
🔍 點擊放大閱讀
04

前往 Hugging Face Spaces 頁面

等待的同時,我們先來創一個 Hugging Face 的 Space。Hugging Face 註冊完帳號以後,進入到大廳頁面,看到上面一排會有 Models, Datasets, Spaces, Buckets 等,點擊 "Space" 進入。

💡 提示:若尚未註冊帳號,請先前往 huggingface.co/join 註冊。
前往 Hugging Face Spaces 頁面
🔍 點擊放大閱讀
05

建立新的 Space 空間

然後點擊右上角的 "Create new Space""New Space" 按鈕,開始配置新的專案空間。

💡 提示:新建立的 Space 就是您在雲端的網站伺服器。
建立新的 Space 空間
🔍 點擊放大閱讀
06

設定 Space 名稱

輸入名稱時以英文為主,如果有需要空格,要以 "_" (底線) 或 "-" (連字號) 來替代,不然系統會報錯而無法建立。

⚠️ 注意:Space 的名稱會成為您網址的一部分,請使用好記且有代表性的英文字母。
設定 Space 名稱
🔍 點擊放大閱讀
07

選擇 SDK 類型

下滑後點選 "Gradio",如果預設是這樣就不用動它。

💡 補充:雖然教學中選擇了 Gradio,但若您要部署純 HTML/CSS/JS 的網頁,亦可在後續將 SDK 改為 static,以靜態網頁方式託管!
選擇 SDK 類型
🔍 點擊放大閱讀
08

建立 Space 專案

下面的其他進階選項基本上不用特別去做設定,直接滑到最下方按下 "Create Space" 按鈕完成建立動作。

💡 提示:預設的硬體規格為免費版 CPU,這對於我們的展示網頁來說綽綽有餘。
建立 Space 專案
🔍 點擊放大閱讀
09

前往 Settings 準備取得 Access Token

再來 CLI 如果跑好以後,我們需要給 CLI 我們要部屬的網址以及 TOKEN。TOKEN 的部分點擊網頁右上的個人頭像,並且下拉選單看至 "Settings" 點擊進去後,選擇左側選單的 "Access Tokens"

💡 提示:Access Token 是我們對 Hugging Face 倉庫執行 git push 時必備的安全憑證。
前往 Settings 準備取得 Access Token
🔍 點擊放大閱讀
10

建立新的 Token

在 Access Tokens 頁面中,點擊 "Create new token" 鈕,開啟 Token 設定視窗。

💡 提示:每個專案都可以建立獨立的 Token,以便在不使用時隨時撤銷,確保帳戶安全。
建立新的 Token
🔍 點擊放大閱讀
11

設定 Token 權限並複製

然後可以隨便取一個名稱,在圖片呈現的地方(通常是 Write 寫入權限相關項目)打勾即可,其他的可以不用理。勾選完以後在最下方按下確認即可,然後就可以複製生成的 TOKEN 了。注意:TOKEN 絕對不要放出來讓別人看到!

⚠️ 安全警告:如果將 Token 洩漏給他人,他們將擁有您帳號下所有 Spaces 的修改權限。
設定 Token 權限並複製
🔍 點擊放大閱讀

最後衝刺與部署成果

透過 CLI 發送指令,一鍵完成部署

12

於 CLI 中輸入部署資訊

把網址跟 TOKEN 放入 CLI 裡面,並告訴她請幫我直接部屬到 Hugging face 上面即可。

Antigravity CLI
agy> 請幫我把當前網頁部署到 Hugging Face Space
agy> Space 網址是:https://huggingface.co/spaces/JinJia0618/CLI_Hugging_FACE
agy> Token 是:hf_aXcEaiiodRffIsCRJQwgyfXP... (安全隱藏)
正在為您初始化 git 儲存庫並配置 Space 憑證...
偵測到靜態網頁,自動將 SDK 配置調整為 static...
成功打包檔案並執行 Git 推送 (git push)...
✓ 部署完成!您的網站已於 Hugging Face Spaces 上線。
13

成果展示

恭喜!網頁已完美在 Hugging Face Spaces 上發布。現在,您正在看的這個教學網頁就是這個流程的完美示範!

🎉

部署大成功!

本教學頁面已成功部署至 Hugging Face Space。

造訪 PPT Hugging Face 成果