Hugo 8-bits Theme is a retro-styled blog theme for Hugo, the static site generator, that recreates an NES console interface using the NES.css framework.
What is the Hugo 8-bits Theme?
Hugo 8-bits Theme is an open-source Hugo theme that gives static sites a pixel-art, NES-game aesthetic via NES.css version 2.3.0, released on December 17, 2019. It consumes standard Hugo markdown content from sections like /post/ and renders a styled blog with an about page, a contact page, and optional multilingual navigation. The theme is developed by miguelsimoni and distributed on GitHub under the MIT License.
Key Features
- NES.css styling — Built on the NES-style CSS Framework by BcRikko, providing 8-bit buttons, containers, and icons that mimic classic game consoles.
- Multilingual support — A language dropdown can be shown or hidden through the languagesMenuEnabled setting in config.yaml.
- Breadcrumb navigation — Breadcrumbs display the current page optionally, controlled by the breadcrumb.showCurrent parameter.
- Pagination loader — A "Load More" button on list pages is toggled by the pagination.loader setting; disabling it shows a standard pagination widget.
- Custom background with parallax — Place an image in static/images/ and reference it via the background.image parameter; enable parallax scrolling and adjust its speed.
- Contact form integration — Set the contact.formAction parameter to a Formspree endpoint to allow visitors to send messages.
- Social network links — Usernames for supported networks like Twitter, Facebook, and Instagram can be added in config.yaml to display social icons.
- Comments and analytics — Set the disqusShortname for Disqus comments and the googleAnalytics parameter for Google Analytics; leave either empty to disable.
Who is it for?
This theme suits retro-game enthusiasts and indie bloggers who want a distinctive pixel-art look for a Hugo personal site or blog. It's aimed at developers comfortable editing YAML config files to adjust settings like background, comments, and analytics. The bundled example site provides a ready-made structure with a /post/ section, about.md, and contact.md, so content authors can start publishing quickly.
What can you do with it?
- Retro-themed bloggers: Publish markdown posts and have them rendered with NES-style typography and containers for a nostalgic reading experience.
- Multilingual site owners: Enable the language dropdown to offer content in multiple languages without writing extra theme code.
- Personal portfolio owners: Customize the background and parallax speed to create a unique pixel-art look for an about or resume page.
- Community builders: Add a Formspree contact form and Disqus comments to turn a static blog into an interactive site.
How do you install it?
Install the theme as a git submodule from the hugo-8bits-theme repository, then customize the configuration using the exampleSite's config.yaml. Run the Hugo built-in server from the exampleSite folder with hugo server -t ../.. and open http://localhost:1313/ in a browser. The repository also links to Hugo's official hosting guides for deployment on GitHub Pages or other static hosts.
FAQ
Is the Hugo 8-bits Theme free?
Yes, the theme is released under the MIT License, as is the underlying NES.css framework. You can use, modify, and redistribute it freely, with attribution.
Does the theme support multiple languages?
Yes, it has a built-in languages dropdown that you can enable or disable with the languagesMenuEnabled parameter in config.yaml. This works with Hugo's multilingual configuration.
Can I add a contact form?
Yes, you can embed a contact form that submits to Formspree by setting the contact.formAction parameter to your Formspree endpoint. The theme includes a contact.md example page to base yours on.
Does the theme include analytics?
Yes, it supports Google Analytics. Add your tracking ID to the googleAnalytics parameter in config.yaml, and leave it empty to disable tracking.
What static hosts can it be deployed to?
Because it's a Hugo theme, it can be deployed to any static hosting service that supports Hugo, including GitHub Pages, Netlify, and others. The theme's README links to Hugo's hosting documentation for step-by-step guides.
