Roxo Hugo

Roxo Hugo is a digital agency static-site theme for the Hugo generator, built with Tailwind CSS, that turns Markdown content and a hugo.toml configuration into a fast, pre-rendered agency or portfolio website. The theme is published on GitHub at furioustheme/roxo-hugo and has 231 stars.

What is Roxo Hugo?

Roxo Hugo is a theme for the Hugo static site generator, styled entirely with Tailwind CSS, that produces static websites for digital agencies, freelancers, graphic designers, and photographers. As input it takes Markdown content and site settings defined in hugo.toml; as output it generates a complete pre-built website with no database or server-side runtime. The theme is maintained by the furioustheme GitHub organization.

Key Features

• Tailwind CSS styling — the entire theme uses Tailwind utility classes, so no separate CSS framework is needed and you can restyle components by editing Tailwind classes directly.
• Hugo Extended required — requires Hugo Extended v0.161 or newer, which bundles the SCSS/SASS compiler used by the theme.
• Agency-focused project structure — includes layouts tailored for agency websites that offer Design, Digital Products, Development, Campaign & Content, and Employer Branding services.
• Yarn command workflow — provides yarn install, yarn project-setup, yarn dev, and yarn preview to install dependencies, initialize the project, run a development server, and preview a production build.
• Git submodule installation — installs as a theme via git submodule add https://github.com/furioustheme/roxo-hugo.git themes/roxo-hugo, keeping the theme updatable from its source repository.
• Example site included — ships with an exampleSite directory whose hugo.toml can be copied as a starting point for new projects.

Who is it for?

• Creative agencies — build a corporate website that presents a full range of digital services such as design, digital products, and campaign and content work.
• Freelancers and graphic designers — create a portfolio website that showcases their work and service offerings without needing a backend.
• Photographers — publish a visual portfolio site using the theme's Tailwind-based layouts, suited to image-focused content.

What can you do with it?

• Launch a professional agency site — create a new Hugo site, add the theme as a submodule, copy the example hugo.toml, and generate a complete agency website from Markdown.
• Build a portfolio for design work — use the service and portfolio layouts to display past projects and the specific expertise you offer.
• Develop and preview locally — use yarn dev to run a development server and yarn preview to start the production server and verify functionality before deploying.

How does the theme work?

1. Create a new Hugo site with hugo new site mysite.
2. Add the theme as a Git submodule from the GitHub repository.
3. Copy themes/roxo-hugo/exampleSite/hugo.toml to the site root and set theme = "roxo-hugo".
4. Run yarn install, then yarn project-setup, and finally yarn dev to start developing.

FAQ

What configuration file does Roxo Hugo expect?

The theme requires hugo.toml at the root of the site. If you name the config file config.toml, the site will return a 404 / "page not found" error.

Does Roxo Hugo require a specific Hugo version?

Yes, Hugo Extended v0.161 or newer is required because the theme depends on the extended build's SCSS/SASS compilation support.

What Node and Go versions are needed?

Node v18 or newer and Go v1.22 or newer are listed as prerequisites for running the theme's Yarn commands and build tooling.

How do I install Roxo Hugo?

Add the theme as a git submodule with git submodule add https://github.com/furioustheme/roxo-hugo.git themes/roxo-hugo, copy the example config, then set the theme variable to "roxo-hugo" in hugo.toml.