Based on the NES.css framework, presenting an NES-style 8-bit pixel interface
hugo-8bits-theme — Hugo Blog Template
By miguelsimoni
A Hugo blog theme built on NES.css that presents articles, an about page, and a contact form in an 8-bit pixel style.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Actual screenshot captured by the server browser.
All pages & views 3
Screenshots show visual appearance; interactive behavior may differ.
What stands out
A quick read of the recorded project description.
Toggle the multilingual menu, breadcrumb current page, and pagination load button via config.yaml
Supports custom background images, and can enable parallax with adjustable speed for the article area
The contact page can be connected to a form action URL from services such as Formspree
Comments are provided by Disqus and analytics by Google Analytics, both of which can be disabled by leaving them empty
exampleSite provides post article examples as well as about and contact page content
Template Details
hugo-8bits-theme is a Hugo theme whose visual style is built on the NES-style CSS framework NES.css, giving the overall feel of an 8-bit pixel game interface. It is suited to building blogs centered on article lists, and the repository also includes example content in about.md and contact.md, corresponding to an about page and a contact page.
The theme is configured centrally through exampleSite/config.yaml. Features that can be toggled include: a multilingual dropdown menu (languagesMenuEnabled), whether the breadcrumb shows the current page (breadcrumb.showCurrent), and a pagination load button on list pages (pagination.loader, which switches to standard pagination controls when disabled). Backgrounds support placing an image in static/images/ and specifying it via params.background.image, and parallax can be enabled for the article area with an adjustable speed.
The contact form itself does not provide a backend; a form action URL from a service such as Formspree must be filled in to actually receive submissions. Comments use Disqus, configured via disqusShortname, and are disabled when left empty; analytics use Google Analytics, configured via googleAnalytics, and are disabled when left empty. Social links are entered in the social list in config.yaml by network and link.
Installation is done by adding the repository as a git submodule to the themes/hugo-8bits-theme directory of a Hugo site. The repository's exampleSite is based on Hugo Basic Example, and it can be previewed locally with hugo server -t ../.. . The theme code uses the MIT license; the licensing and costs of third-party assets such as demo images, fonts, and icons, as well as external services such as Formspree and Disqus, must be checked separately.
Is it right for your project?
Use Cases
- Building a personal blog centered on article lists and article pages
- Creating a site with an about page and a contact form
- Content sites that need a multilingual dropdown menu and breadcrumb navigation
- Hugo projects that want a unified pixel game-style visual
Suitable For
- Developers who use Hugo and are familiar with config.yaml configuration
- Personal blog authors who prefer an 8-bit pixel visual style
- Sites that need Disqus comments and Google Analytics
- Users who accept that the contact form depends on external services such as Formspree
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Install by running git submodule add https://github.com/miguelsimoni/hugo-8bits-theme.git themes/hugo-8bits-theme in the Hugo site directory
- 2
Refer to exampleSite/config.yaml to configure parameters such as the multilingual menu, breadcrumbs, pagination loader, background, and social links
- 3
The contact form requires filling in a form URL from a service such as Formspree in contact.formAction in config.yaml to receive submissions
- 4
Comments and analytics are configured via disqusShortname and googleAnalytics respectively, and are disabled when left empty
- 5
For local preview, enter exampleSite and run hugo server -t ../.., then visit http://localhost:1313/
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version under the MIT license in the public repository; the free scope is the code of this version and does not mean that external services or third-party assets are free.
Must comply with when using
- The code of this version may be used, modified, used commercially, and distributed free of charge.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
- The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- The contact form itself does not provide a backend; you must register a third-party messaging service such as Formspree and fill in the form action URL to actually receive visitor submissions, which may involve that external service's account, quotas, or fees.
- The comment feature depends on the third-party Disqus service, requires configuring disqusShortname, and is subject to Disqus's own terms; leaving it empty disables comments.
- The analytics feature depends on the external Google Analytics service and requires you to provide a tracking ID yourself; leaving it empty disables analytics.
- The theme code uses the MIT license, but the licenses of the NES.css framework it depends on and of third-party assets such as demo images, fonts, and icons must be checked separately and are not covered by this repository's MIT authorization.
- The README mentions the Formspree form service; actual submissions require configuring a service endpoint, and its usage quotas and fees must be checked separately.
- Demo images, fonts, icons, and other third-party assets must be checked under their respective licenses and cannot be judged solely by the code's MIT license.
- External services such as domains, hosting, databases, payments, or AI may incur additional charges.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
You can enable de Contact form to let visitors send you messages using a message service like [Formspree](https://formspree.io/) just adding your contact form action URL in `config.yaml`
Original README
Powered by [Disqus](https://disqus.com)
Original README
googleAnalytics: "UA-123-45"
Original README
https://github.com/miguelsimoni/hugo-8bits-theme/blob/main/LICENSE.mdhttps://github.com/miguelsimoni/hugo-8bits-theme/blob/main/README.mdThis theme and the framework that made it possible are released under the MIT License. Check the [original framework license](https://github.com/nostalgic-css/NES.css#copyright-and-license) for additional licensing information.
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-02. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- GitHub
- Documentation and maintenance reference score
- Partly documented · 69 / 100
- Technologies
- Hugo · HTML
- Website type
- Blog · Tool Site
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2021-07-29
- Screenshot last checked
- 2026-10-02
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies Hugo as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Automatically checked against source and license rules; no manual editorial review.
Inspect the recorded source material
SHA-256: a054ee68686f6ece449dbf764d96d2456344b8ba070554ab866069d8f2ef3404
2026-10-02T10:18:41.548Z
Source file / repository# Hugo 8-bits Theme








[Hugo 8-bits Theme](https://miguelsimoni.github.io/hugo-8bits-site/) is based on the [NES-style CSS Framework](https://nostalgic-css.github.io/NES.css/) developed by [@bc_rikko](https://twitter.com/bc_rikko).

[Live Demo](https://miguelsimoni.github.io/hugo-8bits-site/)
### NES.css Framework Info
|||
|-|-|
|**Name** | NES.css |
|**Description** | NES-style CSS Framework |
|**Designer** | [BcRikko](https://github.com/BcRikko) |
|**Version** | 2.3.0 |
|**Released** | Dec 17, 2019 |
|**License** | [Licensing information](https://github.com/nostalgic-css/NES.css#copyright-and-license) |
## Installation
```
$ cd /<your-hugo-site-directory>
$ git submodule add https://github.com/miguelsimoni/hugo-8bits-theme.git themes/hugo-8bits-theme
```
More info: [hugo setup guide](https://gohugo.io/overview/installing/)
## Configuration
[config.yaml](https://github.com/miguelsimoni/hugo-8bits-theme/blob/main/exampleSite/config.yaml)
### Multilingual
You can show or hide the Languages dropdown menu from `config.yaml`:
```yaml
languagesMenuEnabled: true
```
### Breadcrumb
You can show or hide the current page in the breadcrumb from `config.yaml`:
```yaml
breadcrumb:
showCurrent: true
```
### Pagination Loader
You can enable or disable the pagination loader (Load More button) in the list pages from `config.yaml`:
```yaml
pagination:
loader: true
```
Disabling it will show the standard pagination widget.
### Background
You can set a theme background just dropping an image on the `static/images/` folder and typing its name on the `params.background.image` parameter. Also you can set a parallax effect and its speed for the posts section.
```yaml
background:
image: "../images/background.png"
parallax: true
speed: 10
```
### Contact
You can enable de Contact form to let visitors send you messages using a message service like [Formspree](https://formspree.io/) just adding your contact form action URL in `config.yaml`:
```yaml
contact:
formAction: https://formspree.io/f/yourformcode
```
### Social Networks
You can add the usernames for the current supported social networks in `config.yaml`:
```yaml
social:
- network: twitter
link: "https://www.twitter.com/8bits"
- network: facebook
link: "https://www.facebook.com/8bits"
- network: instagram
link: "https://www.instagram.com/8bits"
```
See [config.yaml](https://github.com/miguelsimoni/hugo-8bits-theme/blob/main/exampleSite/config.yaml) for more examples on social networks parameterization.
### Comments
Powered by [Disqus](https://disqus.com)
```yaml
disqusShortname: "yourdiscussshortname"
```
Disable the comments system by leaving `params.disqusShortname` empty.
### Google Analytics
```yaml
googleAnalytics: "UA-123-45"
```
Disable the Google Analytics by leaving `params.googleAnalytics` empty.
### More Settings!
See the whole configuration in the [config.yaml](https://github.com/miguelsimoni/hugo-8bits-theme/blob/main/exampleSite/config.yaml) file.
## Example Site
The [`exampleSite`](https://github.com/miguelsimoni/hugo-8bits-theme/tree/main/exampleSite) folder is based on [Hugo Basic Example](https://github.com/gohugoio/hugoBasicExample) and offers an example site for this theme.
The `exampleSite/content/` folder contains the following:
- A section called `/post/` with sample markdown content.
- An `about.md` that is intended to provide the `/about/` page for a theme demo.
- A `contact.md` that is intended to provide the `/contact/` page for a contact form.
## Almost there...
In order to see your site in action, you can run Hugo's built-in local server.
```bash
$ cd exampleSite
$ hugo server -t ../..
```
Now enter [`http://localhost:1313/`](http://localhost:1313/) in the address bar of your browser.
## Deployment
- [Hosting on GitHub](https://gohugo.io/hosting-and-deployment/hosting-on-github/)
- [More hosting and deployment options](https://gohugo.io/hosting-and-deployment/)
## Contributing
- Found a bug?
- Got an idea for a new feature?
Let me know it using the [issue tracker](https://github.com/miguelsimoni/hugo-8bits-theme/issues) or make it directly with a [pull request](https://github.com/miguelsimoni/hugo-8bits-theme/pulls).
## License
This theme and the framework that made it possible are released under the MIT License. Check the [original framework license](https://github.com/nostalgic-css/NES.css#copyright-and-license) for additional licensing information.
## Thanks
Thanks to [Steve Francia](https://github.com/spf13) for creating Hugo and the awesome community around the project. And also thanks to [BcRikko](https://github.com/BcRikko) for creating this awesome nostalgic framework.
Explore similar templates
Compare previews and descriptions within the same stack and category.

hugo-PaperMod
A fast, clean, responsive Hugo theme for blogs and lightweight portfolios, with three layout modes (Regular, Home-Info, Profile), automatic and manual light/dark themes, Fuse.js client-side search, multilingual support, and built-in Open Graph, Twitter Cards, and Schema.org data.
Hugo · Portfolio

LoveIt
LoveIt is a clean, elegant, and feature-rich Hugo blog theme derived from LeaveIt and KeepIt, MIT-licensed. It offers light/dark modes, responsive layout, multilingual support, and search via Lunr.js or Algolia.
Hugo · Blog

hugo-coder
hugo-coder is a minimalist Hugo blog theme maintained by luizdepra under the MIT license. It provides a clean, text-focused blog appearance, configuration documentation in the docs directory, and a complete exampleSite with hugo.toml.
Hugo · Blog

blowfish
Blowfish is a Hugo personal website and blog theme built with Tailwind CSS 4, focused on lightness, simplicity, and content-first presentation.
Hugo · Blog

hugo-paper
hugo-paper is a simple, clean, and customizable Hugo blog theme configured through config.toml or hugo.toml.
Hugo · Blog

hextra
Hextra is a Hugo theme for documentation and blog sites, built on Hugo and Tailwind CSS with design referencing Nextra.
Hugo · Documentation
