Port-Hugo

Port-Hugo is an open-source Hugo theme that creates a simple, responsive portfolio website for designers and web developers, tested with Hugo v0.141.0.

What is Port-Hugo?

Port-Hugo is a Hugo theme that generates a static portfolio site from a YAML data file and images. It takes content structured in exampleSite/data/content.yaml and produces a responsive HTML site with a project grid, about section, and contact area. The theme is built by GitHub user tylersayshi and draws its design from the Somrat theme and its portfolio grid from Hugrid.

Key Features

• Responsive layout — The theme adapts to mobile, tablet, and desktop widths without extra configuration.
• Hugo image processing — Images are optimized automatically through Hugo's built-in image pipeline, reducing page load time.
• Hugrid-based project grid — The portfolio section uses a manipulated version of the Hugrid theme to display work in a clean grid.
• Somrat-based design — The overall look is derived from the Somrat theme, trimmed to keep only essential sections for a simple portfolio.
• YAML-driven content — You fill in data/content.yaml with project details, about text, and social links; no HTML editing needed for typical changes.
• Logo support — Drop logo.svg and logo-dark.svg into static/images to set light and dark variants; switching logic lives in assets/js/script.js.
• Example site — The repository includes an exampleSite folder with a working config.toml and sample content to copy.

Who is it for?

• Freelance designers — who need a clean online portfolio to present projects to potential clients.
• Web developers — who want a minimal, code-replaceable portfolio they can extend with Hugo's template system.
• Hugo learners — who can study the exampleSite to understand how data-driven themes work.

What can you do with Port-Hugo?

• Designers: Populate the YAML file with your projects and images; the Hugrid-based grid will render them responsively.
• Developers: Modify the Hugo templates and the logo-switching JavaScript in assets/js/script.js to customize behavior.
• Portfolio starters: Clone the exampleSite, adjust the config, and replace sample content with your own in minutes.

How does Port-Hugo work?

1. Install Hugo and run hugo new site your-site-name if starting fresh.
2. Clone the theme into themes/: git clone https://github.com/tylersayshi/port-hugo.git.
3. In config.toml, set theme = "port-hugo".
4. Use the exampleSite files as a guide and edit data/content.yaml with your portfolio entries.
5. Run hugo serve to preview locally, then build static files with hugo.

FAQ

Is Port-Hugo free?

Yes, Port-Hugo is an open-source theme available on GitHub. You can download, use, and modify it without charge.

What Hugo version is required?

The theme is currently tested with Hugo v0.141.0. Newer versions may work but aren't guaranteed.

How do I change the logo?

Place logo.svg and logo-dark.svg in the static/images folder of your Hugo site. The code that loads these files is in assets/js/script.js.

Can I use Port-Hugo for a personal site other than a portfolio?

The theme is designed specifically as a portfolio, but because sections are data-driven, you can repurpose them for other content.

How do I install Port-Hugo?

Clone the repository into your site's themes directory, set theme = "port-hugo" in config.toml, and copy the example content from exampleSite.