Hugo作品集

port-hugo — Hugo 作品集模板

作者 tylersayshi

port-hugo 是一个基于 Hugo 的简洁作品集主题，面向设计师和 Web 开发者，提供响应式布局、可配置的内容区块和基于 Hugrid 的作品展示网格。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

1 个预览视图

作者提供的预览

查看源码在新标签页打开

作者提供的预览首屏预览

来自项目 README 的原始预览。

目前有 1 张原始预览，可打开完整图片查看设计细节。

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

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

值得关注的模板亮点

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

响应式作品集布局，适配不同屏幕尺寸

提供易于使用的页面区块结构

使用 Hugo 图像处理进行图片优化

作品展示区基于 Hugrid 实现

整体设计参考 Somrat 并做了功能精简

支持 logo.svg 与 logo-dark.svg 双 Logo

模板详细介绍

port-hugo 是一个用 Hugo 构建的简洁作品集主题，作者定位为面向设计师或 Web 开发者的可定制作品集。主题提供响应式作品集页面、便于使用的区块结构，并利用 Hugo 的图像处理能力对图片进行优化。作品展示部分基于 Hugrid 实现，整体设计参考了 Somrat 主题，但作者对功能做了精简，只保留简单主题所需的部分。

使用方式上，主题通过 Hugo 常规的主题目录方式安装，需要在站点 config.toml 中设置 theme = "port-hugo"，并参照 exampleSite/data/content.yaml 填写作品集内容字段，exampleSite/config.toml 则提供更通用的站点配置示例。Logo 支持 logo.svg 与 logo-dark.svg，默认放在 static/images 下，相关控制代码位于 assets/js/script.js。

限制方面，README 仅说明当前在 Hugo v0.141.0 下测试过，未声明其他版本的兼容性；主题功能相对精简，不包含博客、评论等超出作品集范围的模块。演示图片、字体、图标等第三方素材需按各自许可单独核对，代码本身采用 MIT 许可。

Hugo作品集

适合你的项目吗？

适用场景

设计师搭建个人作品展示页面
Web 开发者整理项目案例并对外展示
需要轻量作品集站点、不引入博客等额外模块的场景
以 YAML 数据文件集中维护作品集内容的站点

适合人群

使用 Hugo 构建静态站点的设计师
希望快速搭建简洁作品集的 Web 开发者
偏好通过数据文件而非大量模板改动来更新内容的用户
需要 MIT 许可下可自由修改作品集主题的开发者

上手与定制指南

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

1
在 Hugo 站点目录下进入 themes 并 git clone 该仓库，然后在 config.toml 中设置 theme = "port-hugo"
2
参照 exampleSite/data/content.yaml 填写作品集所需字段
3
参照 exampleSite/config.toml 配置站点通用选项
4
Logo 文件命名为 logo.svg 和 logo-dark.svg 并放入 static/images，如需调整可修改 assets/js/script.js
5
README 说明当前在 Hugo v0.141.0 下测试，其他版本兼容性需自行验证

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

README 仅说明当前在 Hugo v0.141.0 下测试过，未声明对其他 Hugo 版本的兼容性；使用其他版本需自行验证。
作品展示区基于第三方项目 Hugrid 实现，该部分代码可能受 Hugrid 自身许可约束，需单独核对其许可条款。
整体设计参考第三方主题 Somrat，相关设计/代码可能受 Somrat 自身许可约束，需单独核对其许可条款。
演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

currently tested with hugo v0.141.0
README 原文

[Hugrid](https://github.com/aerohub/hugrid) based portfolio section
README 原文

[Somrat](https://github.com/somratpro/somrat) based design
README 原文

https://github.com/tylersayshi/port-hugo/blob/main/LICENSE https://github.com/tylersayshi/port-hugo/blob/main/README.md

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

项目核对记录与介绍依据

模板资料

来源平台: Hugo Themes
资料与维护参考分: 资料一般 · 67 / 100
技术栈: Hugo
网站类型: 作品集

这个分数如何计算

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

这个项目需要核对什么

记录的仓库更新时间: 2025-11-14
截图检查日期: 2026-10-03

目前没有记录演示链接。请依据仓库说明在本地评估；仅凭截图无法确认交互行为。

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

查看具体选型方法 →

介绍的制作与核对状态

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

审核声明: [email protected] · 2026-10-04

查看当时使用的来源资料

SHA-256: 3b8ceef818d4b6997074aea54d245a4da0105c71ae5c30337c3713388edd39ad

2026-10-03T19:23:53.681Z

来源文件 / 仓库

# Port-Hugo (A simple portfolio)

currently tested with hugo v0.141.0

This theme is a simple, customizable portfolio for designers or web developers.

![Thumbnail](https://raw.githubusercontent.com/tylersayshi/port-hugo/master/images/tn.png)

![Screenshot](https://raw.githubusercontent.com/tylersayshi/port-hugo/master/images/screenshot.png)

## Features

- Responsive portfolio
- Easy sections to use
- Hugo image processing for optimization
- [Hugrid](https://github.com/aerohub/hugrid) based portfolio section
- [Somrat](https://github.com/somratpro/somrat) based design

## Install theme on your hugo site

```
hugo new site your-site-name # if you already have a site ignore this line and the next
cd your-site-name
cd themes
git clone https://github.com/tylersayshi/port-hugo.git
cd ..
hugo serve
```

Once you have done this, you may use the `exampleSite` folder as an example for how to set your project up. The two main things to pay attention to is to first set this in your `config.toml` file:

```toml
theme = "port-hugo"
```

Then you will need to replicate the data used in the `exampleSite/data/content.yaml` file to fill in the fields for your portfolio. Please also see the `exampleSite/config.toml` for guidance on setting up the more general site configurations.

### Logo support

Images named `logo.svg` and `logo-dark.svg` are meant to be used for the logos. They should be stored in `static/images` as seen in [./exampleSite/static/images](./exampleSite/static/images). If you wish to change this, the code to control the images is in `assets/js/script.js`.

## Credits

I'd like to express gratitude to [somrat](https://github.com/somratpro/somrat) and [hugrid](https://github.com/aerohub/hugrid) for creating wonderful themes that I have used as a jumping off point. You may notice this theme is very similar in design to somrat, however it has distinct differences by using a manipulated version of hugrid for the portfolio section. I have also trimmed down the features of somrat, to only include what I wanted for a simple theme.

## Contributing

Please feel free to post issues or make pull requests at any time. I am always open to collaboration.

反馈内容错误