Fiction is a Hugo agency template, adapted from the MIT-licensed Fiction Bootstrap theme by Themefisher and converted for CloudCannon, that generates a pre-built marketing site with a blog, contact form, and three hero styles.
What is Fiction?
Fiction is a Hugo template for agency and business websites, originally created by Themefisher and converted to Hugo by CloudCannon. It takes content edited in CloudCannon data files and Markdown pages and produces a static site with pre-built pages, a blog with pagination and category pages, and a contact form. The template runs on Hugo version 0.128.0 or higher and requires Go and npm for local development. It is adapted from the MIT-licensed Fiction Bootstrap template, so it inherits the Bootstrap CSS framework for styling.
Key Features
- Pre-built pages — The template includes index, blog, portfolio, and other standard agency pages ready to edit.
- Three hero components — A single-image hero, a slider hero that accepts any number of images, and a video hero; the video hero uses the jQuery Vide plugin on desktop Chrome and an HTML5 video element on Safari, iOS, and mobile.
- Blog with pagination and category pages — Posts can be organized into categories and are displayed with pagination.
- Configurable navigation and footer — Nav and footer details live in the Data section, so they are reused across the site and edited in one place.
- Contact form — A built-in form component for visitor inquiries.
- Pagefind search — Site search is powered by Pagefind, a static search tool, with no external search service required.
- Configurable SEO — Search engine optimization settings can be configured per page.
- CloudCannon optimization — Company details, map settings, and hero components can be edited with CloudCannon live editing; the repository includes a Deploy to CloudCannon button.
Who is it for?
- Agencies — Use the pre-built portfolio and services pages to showcase work and win clients.
- Small businesses — Quickly launch a professional marketing site with a blog, search, and contact form.
- CloudCannon teams — Non-developers can update company info, navigation, and heroes through CloudCannon's data-driven editing.
- Hugo learners — Developers can study a real Bootstrap-to-Hugo conversion that shows how components and data files are structured.
What can you do with Fiction?
- Agencies: Publish a portfolio of projects and services using the pre-built pages and reusable hero components.
- Bloggers: Maintain a categorized blog with pagination and add Pagefind search so readers can find posts quickly.
- Marketing teams: Update company details, navigation, and footer in one Data section so changes propagate across the entire site.
- Site owners: Embed a Google Map on the contact page by adding a Google Maps API key in the company data file.
How does Fiction work?
To run locally, install Hugo version 0.128.0 or higher and Go, then run npm i at the root and start the development server with npm run start. For production, connect the repository to CloudCannon using the Deploy to CloudCannon button, which registers the site and lets you edit pages, posts, portfolio items, company details, and footer elements live.
Pros and cons
- Pros: Data-driven reusable components, three hero options, Pagefind search, blog with categories, contact form, and a Google Maps section.
- Cons: CloudCannon states the template is no longer actively maintained and recommends its modern templates for production sites; the video hero depends on jQuery on some browsers; the map requires a Google Maps API key.
FAQ
Is Fiction still maintained?
CloudCannon states that this template is no longer actively maintained but remains available for reference and learning. For production sites, CloudCannon recommends its modern templates instead.
What Hugo version does Fiction require?
Fiction requires Hugo version 0.128.0 or higher, and Go must be installed to build the site. The setup also requires Node dependencies installed via npm i.
Does the Google Map work without setup?
No. To use the Google Maps functionality, you must add a Google Maps API key to the Data/Company section under the google_maps_api_key variable, following Google's API key documentation.
What hero styles are available?
Fiction offers three heroes: a single-image hero, a slider hero that supports any number of images, and a video hero. The video hero uses the jQuery Vide plugin on desktop Chrome and an HTML5 video element on Safari, iOS, and mobile.
