Forty is a Hugo theme ported from HTML5 UP's Forty design that turns a grid of image tiles into a multi-page website for blogs, businesses, and freelancers.
What is Forty?
Forty is a Hugo theme ported from HTML5 UP's Forty template, repackaged as a multi-page site with an image-tile grid that expands into individual content pages. It runs on Hugo, the static site generator, and takes Markdown content as input to produce a static website. The theme was created by AJ from HTML5 UP and ported to Hugo by the repository owner MarcusVirg.
Key Features
- Multi-page image grid — the homepage lays content out as a grid of image tiles that transition into the corresponding content pages.
- Styled elements and contact form — includes a set of styled UI components and a working contact form that integrates with Formspree.
- Formspree integration — the static contact form forwards messages to your email with a free allowance of up to 1,000 emails per month; the recipient email is set in config.toml.
- Hugo archetype support — new blog posts are created with
hugo new blogs/myBlog.md, leveraging Hugo's archetype system. - Customizable background — replace a single banner.jpg file inside the forty/static/img folder (jpg only, exact filename required) to change the site's banner.
- Example site configuration — ships with an exampleSite folder containing a config.toml that you can copy to your project root and customize.
- Netlify-ready — designed to be added as a git submodule so Netlify's autopublish build works without errors.
- Draft-ready content workflow — Hugo's draft frontmatter controls whether a page appears during development with
hugo server -D.
Who should use Forty?
- Bloggers — create a multi-page blog with a visual image-tile index that links to individual posts.
- Freelancers — showcase services and portfolio pieces on a standalone site with a contact form to receive client inquiries.
- Small businesses — build a simple marketing site with a styled home page, content pages, and a way for visitors to reach out.
Use cases
- Portfolio showcase: present projects as a grid of image tiles, each tile expanding into a full project page.
- Blog publishing: generate blog posts with Hugo's
hugo new blogs/command and publish them to a static site with minimal setup. - Business site: create a multi-page corporate or studio site with contact-form integration for lead capture.
How does Forty work?
After installing Hugo, you create a new site, clone the theme into the themes folder, and copy the example config.toml to your site root. Set the BaseURL to match your publish URL, replace banner.jpg to customize the background, and write content as Markdown files in the content/blogs directory. Preview the site locally with hugo server -D, then commit and push to trigger a Netlify build.
Pros and cons
- Free and open-source — released under the Creative Commons Attribution 3.0 license, so it can be used in personal and commercial projects with attribution.
- Static and fast — Hugo generates plain HTML, so the site loads quickly and can be hosted on any static host.
- Limited to Hugo — you need Hugo installed and comfortable with its content organization to use this theme.
- Background image constraints — the banner must be a jpg file named banner.jpg; other formats or names won't work.
- Contact form quota — Formspree's free tier allows up to 1,000 emails per month, after which you'd need to handle it differently.
Pricing
The theme itself is free under the Creative Commons Attribution 3.0 license. The only recurring cost listed is Formspree for the contact form, which offers a free allowance of up to 1,000 emails per month.
FAQ
Is Forty free?
Yes. The theme is released under the Creative Commons Attribution 3.0 license, which means you can use it for free in personal or commercial projects as long as you give credit.
How do I change the background image on Forty?
Replace the banner.jpg file in the forty/static/img folder with your own image. The image must be in jpg format and must be named banner.jpg, otherwise it won't be picked up.
How does the contact form work?
The contact form is static and posts to Formspree, which forwards the message to the email address you set in config.toml. After configuring the email, you must confirm it with Formspree before receiving messages.
Why do I need to add Forty as a submodule on Netlify?
Netlify uses the hugo build command when autopublish is enabled, and if the theme is not a submodule, it can produce an error. Adding the theme as a submodule ensures Netlify's build process works correctly.
