Hugo Lodi Theme

Hugo Lodi Theme is a free Hugo portfolio theme that recreates Alexis Collado's personal portfolio site, providing structured sections for self-introduction, design process, and detailed case studies.

What is Hugo Lodi Theme?

Hugo Lodi Theme is a Hugo port of Alexis Collado's portfolio website, built as a static-site theme for designers and creatives. It takes Markdown content files with YAML front matter as input and generates a portfolio site with a homepage, process section, and individual case study pages. The theme is available on GitHub from the xaviablaza repository and ships with an example site to help new users get started. Credits on the README go fully to Alexis Collado, the original portfolio designer.

What makes the theme stand out?

The theme stands out for its case-study-first structure: every project page supports 19 front matter fields that control ordering, navigation headings, thumbnails, featured images, team membership, roles, methods, and even client testimonials with photos. Each case study can include custom button links that use built-in eyeball and download SVG icons or any custom SVG you add to the static/svg folder. The theme also presents a testimonial block per project, so client feedback appears directly on the case study page rather than on a separate page. Additionally, the exampleSite provides a complete starting point that can be copied into a new Hugo site to see the layout in action.

Who should use Hugo Lodi Theme?

Designers, UX professionals, and creative agencies who need a portfolio layout that foregrounds case studies will find this theme useful. It is especially suited for anyone who wants to document the process behind their work, including team member roles, methods, and client testimonials. Freelancers and design students can also use the included example site as a quick template for launching a personal portfolio.

Use cases for the theme

• UX/UI designers: Showcase end-to-end project stories by filling out the team, roles, and methods fields and linking to interactive prototypes in the button links.
• Creative agencies: Present each project with client testimonials and downloadable assets, such as a feature-set PDF, using the built-in button link functionality.
• Personal branding: Use the example site as a starting point to publish a portfolio quickly and cleanly.

How does the theme work?

1. Clone the theme into your Hugo themes directory.
2. Copy everything from the exampleSite folder to your site root.
3. Set theme = "hugo-lodi-theme" in your config.toml file, or run hugo server -t hugo-lodi-theme.
4. Generate a new case study with hugo new mypost.md, then edit the front matter and write the body in Markdown.

Pricing

The theme is free to use. It is publicly available on GitHub under the xaviablaza repository, with no mention of paid tiers, subscriptions, or licensing costs. Users only need a Hugo installation to run it.

FAQ

Is Hugo Lodi Theme free?

Yes, the theme is freely available on GitHub and can be cloned and used for any project. No pricing or premium tiers are mentioned in the repository documentation.

How do I install Hugo Lodi Theme?

Clone the theme into your Hugo themes directory, copy the exampleSite contents into the root of your Hugo site, and add theme = "hugo-lodi-theme" to your config.toml file. You can then run hugo server to preview it.

How do I create a new case study?

Run hugo new mypost.md at the root of your Hugo site. The generated file contains a front matter block where you set fields like weight, title, thumbnail, team, roles, methods, and testimonial details, plus a Markdown body for the full case study.

Can I customize the button links and images?

Yes. Each case study can have button links with an image (such as eyeball.svg or download.svg) and text. You can place custom SVG files in the static/svg folder. Thumbnails go in static/img, and featured images go in a folder named after your post (e.g., /mypost/img).