HugoReact作品集

portfolio-web — Hugo 作品集模板

作者 ZAYNINFINITY

基于 Hugo 与 Toha 主题构建的个人作品集站点，内容由 data/en/sections 下的 YAML 文件驱动，部署在 Netlify。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图
桌面端首页1 / 2
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-01查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

01

使用 Hugo 与 Toha 主题生成静态作品集站点

02

About、Skills、Experience、Projects、Education 等板块覆盖个人履历展示

03

内容集中在 data/en/sections 下的 about.yaml、skills.yaml、projects.yaml、experiences.yaml 等文件

04

Skills 为可筛选网格，每项技能可关联项目背景

05

推送 YAML 变更后由 Netlify 自动重新构建

06

仓库采用 MIT 许可，允许使用、修改、商用与分发该版本代码

模板详细介绍

这是一个个人作品集网站模板，使用 Hugo 静态站点生成器与 Toha 主题搭建，作者定位为 MERN 技术栈开发者、PAF-IAST 计算机专业学生。站点内容全部放在 data/en/sections/*.yaml 中，修改 YAML 并推送后由 Netlify 自动重新构建，无需改动代码。

页面包含 About（个人简介、社交链接、技能徽章）、Skills（可按条件筛选的技能网格，每项技能附带项目背景）、Experience（工作经历与教育经历）、Projects（带在线链接、仓库地址与描述的项目卡片）、Education（课程与课外活动）等板块。README 给出的本地运行方式为克隆仓库后执行 hugo mod install 与 hugo server，站点默认运行在 localhost:1313。

仓库以 MIT 许可发布，免费范围限于该版本代码；演示图片、字体、图标等第三方素材以及域名、托管等外部服务需另行核对各自许可与费用。资料未说明主题版本、具体依赖版本或性能表现。

HugoReact作品集

适合你的项目吗？

适用场景

  • 个人开发者整理并展示项目作品与技能栈
  • 学生或求职者集中呈现教育经历、工作经历与课程、课外活动
  • 以 YAML 维护内容、不希望频繁改动模板代码的静态站点
  • 部署到 Netlify 等静态托管平台并自动重建的个人主页

适合人群

  • 需要静态作品集站点并熟悉 Hugo 的开发者
  • 希望用 YAML 文件更新个人履历内容的用户
  • 计划将站点托管在 Netlify 的个人项目作者

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

  1. 1

    克隆仓库后依次执行 hugo mod install 与 hugo server，站点默认运行在 localhost:1313

  2. 2

    内容更新只需编辑 data/en/sections/*.yaml 并推送，Netlify 会自动重新构建

  3. 3

    MIT 许可仅覆盖该版本代码，分发时需保留版权声明与完整许可声明

  4. 4

    演示图片、字体、图标等第三方素材需按各自许可单独核对

  5. 5

    域名、托管等外部服务可能产生额外费用

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 站点依赖第三方 Toha 主题（通过 Hugo Go modules 引入），该主题的代码与素材受其自身许可约束，需单独核对，不属于本仓库 MIT 授权范围。
  • 部署依赖 Netlify 外部托管服务，可能需要注册账号并可能产生费用，属于外部服务要求而非代码许可限制。
  • 内容更新方式限定为编辑 data/en/sections 下的 YAML 文件，站点结构与板块由该目录约定驱动。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

built with [Hugo](https://gohugo.io/) and the [Toha](https://github.com/hugo-toha/toha) theme

README 原文

deployed on Netlify

README 原文

All content lives in `data/en/sections/*.yaml`. No code changes needed

README 原文
https://github.com/ZAYNINFINITY/portfolio-web/blob/main/LICENSEhttps://github.com/ZAYNINFINITY/portfolio-web/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-01。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料较完整 · 85 / 100
技术栈
Hugo · React
网站类型
作品集
这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2026-09-16
截图检查日期
2026-10-01

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Hugo。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: 7908cfe2cc08ec8ceab227b53b920585c2c6cbce1581690ab6e1bc306fe9a81b

2026-10-01T01:18:23.249Z

来源文件 / 仓库
# portfolio-web

My personal portfolio — built with [Hugo](https://gohugo.io/) and the [Toha](https://github.com/hugo-toha/toha) theme.

**Live site:** [zayninfinity.github.io](https://zayninfinity.github.io/)

### Stack

Hugo + Go modules, Tailwind CSS, deployed on Netlify.

### Sections

- **About** — bio, social links, skill badges
- **Skills** — filterable grid with project context per skill
- **Experience** — work history + education
- **Projects** — cards with live links, repos, and descriptions
- **Education** — coursework and extracurriculars

### Updating content

All content lives in `data/en/sections/*.yaml`. No code changes needed — edit the YAML, push, Netlify rebuilds automatically.

| File | Controls |
|------|----------|
| `about.yaml` | Bio, social links, resume |
| `skills.yaml` | Tech stack grid |
| `projects.yaml` | Project cards |
| `experiences.yaml` | Work + education history |

### Running locally

```bash
git clone https://github.com/ZAYNINFINITY/portfolio-web.git
cd portfolio-web
hugo mod install
hugo server
```

Site runs at `localhost:1313`.

### License

MIT
反馈内容错误

看看同类模板

对比同技术栈与用途的模板，找到更适合的视觉与内容结构。

hugo-PaperMod

hugo-PaperMod

PaperMod 是 Hugo 生态里知名度较高的主题之一，定位很明确：给博客和轻量作品集站点提供一套干净、响应式的阅读界面。

Hugo · 作品集

Congo

Congo

Congo 是一款为 Hugo 设计的现代内容主题，核心定位是让内容本身成为页面焦点。 它基于 Tailwind CSS 3.0 构建，整体布局完全响应式，视觉风格干净且克制，没有多余装饰。

Hugo · 博客

toha

toha

Toha 是一款面向个人作品集场景的 Hugo 主题，以极简设计和响应式布局为核心，适合用来搭建个人主页、作品展示或技术博客。

Hugo · 作品集

hugo-profile

hugo-profile

A highly customizable and mobile first Hugo template for personal portfolio and blog.

Hugo · 作品集

hugo-theme-introduction

hugo-theme-introduction

Minimal, single page, smooth-scrolling theme for Hugo static site generator.

Hugo · 作品集

hugo-theme-console

hugo-theme-console

hugo-theme-console 是一款以系统终端为灵感的极简 Hugo 主题，基于 Terminal CSS 构建，整体视觉干净利落，强调快速加载与响应式布局。

Hugo · 作品集