Roxo Hugo

Roxo Hugo is a digital agency Hugo theme that produces static corporate websites with Tailwind CSS, built for creative agencies, freelancers, graphic designers, and photographers.

What is Roxo Hugo?

Roxo Hugo is an open-source theme designed for the Hugo static site generator, styled with Tailwind CSS. It takes content written in Hugo's markdown and configuration files and outputs a fast, static website. The theme is distributed through GitHub under the furioustheme/roxo-hugo repository and is installed as a git submodule into a new Hugo site. It targets agencies and freelancers who need a corporate or portfolio presence with minimal maintenance.

Key Features

• Tailwind CSS styling — The theme uses Tailwind CSS for its design system, giving you utility-first styling and a modern look without writing custom CSS.
• Hugo Extended requirement — Requires Hugo Extended v0.161 or newer to build, along with Node v18+ and Go v1.22+ for the asset pipeline.
• Example site included — The theme's exampleSite folder contains a ready-to-copy hugo.toml configuration that you can use as the starting point for your own site.
• Specific config file naming — The theme expects your Hugo config file to be named hugo.toml; using config.toml will result in a 404 "page not found" error.
• Yarn-based workflow — After installing dependencies with yarn install, you run yarn project-setup for initial configuration, and yarn dev or yarn preview to serve the site locally or in production mode.
• Agency-focused layout — The structure supports showcasing services such as Design, Digital Products, Development, Campaign & Content, and Employer Branding.

Who is it for?

Roxo Hugo is aimed at creative agencies, freelancers, graphic designers, and photographers who need an online presence. An agency can use it to present its services and case studies; a freelancer can use it to display a portfolio of work; a designer or photographer can rely on its visual layout to showcase images and projects.

Use cases

• Creative agencies: Build a corporate website that lists their expertise areas like Design, Digital Products, Development, Campaign & Content, and Employer Branding.
• Freelancers: Create a professional portfolio site to display past projects and attract clients.
• Photographers: Showcase a visual portfolio with a clean, Tailwind-based design that keeps images prominent.
• Consulting businesses: Launch a lightweight corporate presence with multiple service pages and no backend to maintain.

How does Roxo Hugo work?

To set it up, create a new Hugo site with hugo new site mysite, then add the theme as a git submodule into themes/roxo-hugo. Copy the exampleSite/hugo.toml file to your site root, set theme = "roxo-hugo", and run yarn install followed by yarn project-setup. You can then start the development server with yarn dev or preview the production build with yarn preview.

FAQ

Does Roxo Hugo work with config.toml?

No. The theme explicitly expects the config file to be named hugo.toml. If you use config.toml, you will see a 404 / "page not found" error, so rename or create your configuration accordingly.

What prerequisites are needed?

You need Hugo Extended v0.161 or newer, Node v18 or newer, and Go v1.22 or newer. These versions are required for the theme's build process and asset handling.

Is Roxo Hugo suitable for a photographer's portfolio?

Yes. The theme is positioned for photographers and includes a visual layout that can present portfolio images while keeping the site fast and static.