背景說明,我是一位視覺設計師,看到不少人用 AI 寫程式寫出很多酷東西,所以才加入一起。
這篇想分享的是把程式上架成網站最簡單的方法,這個方法「免費」且可以分享給其他人使用,當然離一個成熟的產品很遠,但至少方便能用。
我使用的上架平台是「Hugging Face」,其實在一開始我有嘗試詢問 AI 有哪些方法,他給了我 Github Page、Netlify 等平台,但我這個程式菜鳥來說,這些平台很陌生,串接常常失敗,也不太確定原因。
後來看到有人把工具上架 Hugging Face,就想說來試試看,這邊我也是詢問 AI,下面就詳細說一下我是如何做的。
詢問 AI 如何上架內容到 Hugging Face
AI 給了我非常詳盡的回覆,其實像是上傳 Hugging Face 這樣的流程應該也蠻好找教學的,只是我想在遇到問題時能追問如何處理,所以從開始就讓他教我。
這邊其實可以看到,雖然 Hugging Face 有免費方案,但還是有一些限制,像是只適合小項目,但對我來說製作一些小工具很好用了。
上架說明
1.先註冊 Hugging Face 帳號
2.選擇上方「Spaces」,來到 Spaces 頁面,這邊就可以建立我們的網站,也可以看到其他人上傳的工具
3.點選「Create new Space」
4.進來後,我們先填寫 Space name,這個就是你的工具/網站名稱,然後 Space SDK 我依照 AI 給我的建議選擇 Static (靜態網站),這是因為我前面有跟他說我的工具是什麼,所以他能夠依據我的狀況給出適合的建議。
最後選擇 Public,因為我的這個工具希望分享出去給大家使用。
5.創建好就會看到這頁面,這其實就是你最終工具與網站的展示頁面,複製連結給別人,他們就能看到這頁面,現在沒東西是因為我們的程式碼是空的。
6.這邊點選右上「Files」,進去會看到這畫面,你能做的事情就是把你請 AI 寫的程式碼放上來,依照檔案格式來放,像是 index.html、style.css 這些已經有的就能直接編輯修改,如果沒有的就自己上傳,上傳方式請點擊右上「Add file」
如果你不知道自己的程式要放那個檔案或對於這些檔案有疑問,都可以問 AI,以 GPT 來說 4o、Claude、Gemini 都有圖片辨識功能,你可以直接截圖詢問。
7.這邊分享我上傳的一個工具,這是一個「多重倒數計時器」,可以設定多個倒數計時,當第一個結束時會響聲,然後就自動接下一個設定的倒數計時,歡迎大家玩看看。
以上就是這次的分享,這是我目前試過上傳最簡單的方式,無關免費或付費,很推薦新手用,看到自己請 AI 寫的工具能放上去使用,還能分享出去,成就感超滿。
👀 關於創作邦
我是凱文設計的 Kevin,建立創作邦是希望幫助更多跟我一樣的創作者可以更輕鬆有效的完成各式創作,創作邦會持續分享更多實用資源、應用心得文,來幫助大家更好的創作。
⬇️ 我的社群
✊ 支持創作邦與凱文設計
小額贊助 │ 幫助網站更好的營運下去
數位商品 │ 創作者排版心法
訂閱電子報,每週給你充實內容!
一起加入 4,500+ 人的學習行列,讓我們高效學習,有效成長!
電子報更新內容(每週三早上 7 點):
- 每週社群更新內容
- 創作邦最新文章
- 創作邦 YT 更新內容
- 創作邦每週更新資源
- 每週觀察與好康推薦
訂閱設計週報:與你每週分享設計大小事
訂閱會收到什麼?
- 每週的設計新聞
- 我精選的設計相關資源
- 設計洞察與時事分享