📢 转载信息
原文链接：https://www.kdnuggets.com/how-to-use-hugging-face-spaces-to-host-your-portfolio-for-free
原文作者：Kanwal Mehreen
Hugging Face Spaces 是一个常被人们忽略的工具。它免费、易于部署，并且足以托管一个干净的个人网站，并带有实时演示功能。 如果这符合您的工作需求，您可以保持简单，也可以添加交互式组件。在本文中，我们将介绍 Hugging Face Spaces 是什么，它为何是作品集的绝佳选择，以及您如何一步步部署自己的作品集。
# Hugging Face Spaces 是什么？
Hugging Face Spaces 是一个允许您直接从 GitHub 仓库托管 Web 应用程序的平台，使部署变得简单，即使对于初学者也十分便捷。虽然它最初设计用于展示机器学习演示，但该平台已经取得了显著发展，现在支持广泛的用例，包括静态网站、基于 Python 的应用程序、交互式用户界面和功能齐全的 AI 驱动演示。您可以使用以下技术构建 Spaces：
- 静态 HTML/CSS/JS
- Gradio（Python UI 框架）
- Streamlit
对于作品集而言，这种灵活性是一个巨大的优势。让我们一步步看看如何在 Hugging Face Spaces 上免费托管您的作品集。
# 第 1 步：创建 Hugging Face 账户
访问 Hugging Face 并 注册。
# 第 2 步：准备您的作品集
您可以选择以下方法之一：
// 选项 A：静态网站（HTML/CSS/JS）
您的文件夹结构可能如下所示：
portfolio/ └── index.html │── style.css │── script.js// 选项 B：基于 Python 的作品集（Gradio / Streamlit）
这包括如下文件：
app.py
requirements.txt# 第 3 步：创建新的 Space
- 点击 New Space
这会打开以下页面
- 选择：
- Owner: 您的用户名
- Space name: 例如 my-portfolio
- License: MIT（推荐）
- 选择 SDK：
- Static（适用于 HTML、CSS 和 JS 作品集）
- Gradio（适用于基于 Python 的交互式作品集）
- Streamlit（适用于数据仪表板）
- 填写完毕后，点击 Create Space。
# 第 4 步：上传或连接您的代码
您可以直接上传文件，或连接到 GitHub 仓库。
- 对于静态 SDK，只需上传 index.html 和相关资源文件。
- 对于 Gradio 或 Streamlit，请确保：
- 存在 app.py 文件
- requirements.txt 列出了所有依赖项
Hugging Face 会自动构建和部署您的 Space。例如，由于我选择了 Gradio，我将点击创建 app.py 文件：
完成此操作后，将打开以下页面：
我将按如下方式编辑 app.py 文件：
import gradio as gr
def contact_message(name, message):
return f"Thanks {name}! Your message has been received ☺️"
with gr.Blocks(title="Eisha's Portfolio") as demo:
gr.Markdown("""
# 👋 Hi, I'm Kanwal
### AI / ML Enthusiast | Python Developer
Welcome to my portfolio! I enjoy building AI-powered applications and clean backend systems.
""")
gr.Markdown("## 🚀 Projects")
gr.Markdown( """
**🔻️ PDF Parser with LangChain**
Custom PDF parsing with header/footer removal and LLM integration.
**🔻️ Case Similarity Finder (FYP)**
Finds similar medical/legal cases using LLaMA-based embeddings.
**🔻️ AI Chatbot Demo**
Conversational AI built using Hugging Face models.
""")
gr.Markdown("## Resume")
gr.Markdown( "[Download my resume](https://example.com/resume.pdf)" )
gr.Markdown("## Contact Me")
name = gr.Textbox(label="Your Name")
message = gr.Textbox(label="Your Message", lines=3)
output = gr.Textbox(label="Response")
submit = gr.Button("Send Message")
submit.click(contact_message, inputs=[name, message], outputs=output)
gr.Markdown( """
---
🔗 **GitHub:** https://github.com/yourusername
🔗 **LinkedIn:** https://linkedin.com/in/yourprofile
""")
demo.launch()
编辑完 app.py 文件后，点击 Commit new file 到 main：
# 第 5 步：您的作品集已上线
现在，在同一页面上，点击 App 查看您的作品集：
点击后，您将看到您的作品集：
或者，您也可以访问 https://<your-username>-<space-name>.hf.space 来查看您的作品集。这是您的实时、可分享的作品集链接。作品集不必是静态的。您可以包含：
- 关于我（About Me）部分
- 带有实时演示的项目
- 简历下载
- 联系链接
- GitHub 和 LinkedIn 链接
使用 Gradio，您可以将此转变为交互式体验。
# 让您的作品集脱颖而出的技巧
- 添加实时演示：
- ML 模型
- 聊天机器人
- NLP 工具
- 数据可视化
- 保持轻量级： 免费 Spaces 有资源限制，因此请优化资源文件
- 使用简洁的用户界面： 极简设计优于花哨的动画
- 添加 README.md： 您的 Space 页面会显示 README 内容，请明智使用
# 最后的思考
Hugging Face Spaces 不仅仅是一个演示平台。它是作品集的免费、现代且强大的托管解决方案。如果您的工作涉及代码、数据或 AI，将您的作品集托管在 Spaces 上，能立即让您区别于传统的静态网站。您的作品集不应只说明您能做什么，而应该实时展示它。
Kanwal Mehreen 是一名机器学习工程师和技术作家，对数据科学以及人工智能与医学的交叉领域抱有深厚的兴趣。她是电子书《Maximizing Productivity with ChatGPT》的合著者。作为 2022 年亚太区谷歌一代学者，她倡导多元化和学术卓越。她还被认定为 Teradata 技术多元化学者、Mitacs 全球研究学者和哈佛 WeCode 学者。Kanwal 是变革的坚定倡导者，她创立了 FEMCodes，旨在赋能 STEM 领域的女性。
🚀 想要体验更好更全面的AI调用？
欢迎使用青云聚合API，约为官网价格的十分之一，支持300+全球最新模型，以及全球各种生图生视频模型，无需翻墙高速稳定，文档丰富，小白也可以简单操作。
评论区