hugo-porto is a portfolio theme for Hugo, the Go-based static site generator, that assembles a personal portfolio website from TOML configuration files and a projects-focused homepage. Built with Tailwind CSS, it is distributed under the MIT License and maintained by Andrew Molyuk as an open-source project with a live demo at hugo-porto.netlify.app.
What is hugo-porto?
hugo-porto is a personal portfolio theme for Hugo that produces a static portfolio website from configuration files placed in the data folder of a Hugo project. It takes inputs like a site title, logo, menu items, social links, and homepage section settings, and outputs a responsive site with hero, skills, experience, testimonials, and posts sections. The theme requires Hugo version 0.116.0 or higher and is under active development, with feature requests tracked through GitHub issues.
Key Features
hugo-porto packs the following capabilities into a single Hugo theme:
- Tailwind CSS styling — the theme uses Tailwind CSS for all styling, so visual customization is done through Tailwind utilities and the build pipeline.
- Configurable homepage sections — the data/home.toml file lets you enable, disable, and reorder sections using id, enabled, and weight properties; built-in sections include hero, skills, experience, testimonials, and posts.
- Navbar and button configuration — data/navbar.toml controls menu items, site title, logo path (local or external URL), and an optional call-to-action button with its own link and target.
- Social media integration — data/footer.toml supports ten platforms: Facebook, LinkedIn, GitHub, Instagram, YouTube, Dribbble, Behance, Medium, Telegram, and WhatsApp.
- Theme toggle — an optional built-in 3-state toggle (system, dark, light) persists the choice to localStorage under the key "theme" and exposes helper functions such as __getPreferredTheme() and __setPreferredTheme(mode).
- Google Analytics integration — built-in support for tracking visitors without extra configuration beyond adding your tracking ID.
- SEO friendly — the theme ships with meta tags and structured data intended to help search engines index portfolio pages.
- Syntax highlighting — code snippets in posts and projects are highlighted to make technical content easier to showcase.
Who is it for?
hugo-porto suits anyone who wants a clean, content-first portfolio site:
- Software developers — build a portfolio that highlights GitHub repositories, technical skills, and code samples with syntax highlighting.
- Designers and creatives — present visual work using the minimalist hero, skills, and experience sections without visual clutter.
- Job seekers and freelancers — create a professional landing page with a downloadable CV button in the navbar and testimonials to build credibility.
What can you do with hugo-porto?
With hugo-porto you can set up a portfolio site and then customize it entirely through TOML files:
- Showcase your projects — organize skills, experience, and testimonials into ordered homepage sections and add a posts section for writings or case studies.
- Add a theme toggle — enable the 3-state system/dark/light switch in the navbar to let visitors choose their preferred appearance.
- Drive traffic with SEO — use the built-in meta tags and structured data so search engines index your portfolio and blog posts more effectively.
How does hugo-porto work?
After installing Hugo 0.116.0+, you either fork the hugo-porto web sample repository or add the theme as a Hugo module via the path github.com/hugo-porto/theme. Run hugo mod tidy, then hugo server, and a site appears at localhost:1313. From there you customize the site by editing the TOML files in the data folder: home.toml for section order, navbar.toml for navigation, and footer.toml for social links.
FAQ
Is hugo-porto free?
Yes, hugo-porto is open source and distributed under the MIT License, so you can use it for personal and commercial projects without paying licensing fees.
Which Hugo version do I need to use hugo-porto?
The installation instructions require Hugo version 0.116.0 or higher. Older Hugo versions may not support the module-based installation or theme features.
How do I add a logo?
Set the logo property in data/navbar.toml to either a local asset path like "img/logo.svg" or an external URL. Setting it to an empty string falls back to the default logo, and the theme includes error handling to avoid rendering failures.
Can I reorder homepage sections?
Yes, edit data/home.toml and adjust the weight value of each section block. Sections with lower weight values appear higher on the page, and you can disable any section by setting enabled to false.
