HugoHTMLBlogTool Site

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.

3 previews
Desktop homepage1 / 3
Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 3

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-02View source

What stands out

A quick read of the recorded project description.

01

Based on the NES.css framework, presenting an NES-style 8-bit pixel interface

02

Toggle the multilingual menu, breadcrumb current page, and pagination load button via config.yaml

03

Supports custom background images, and can enable parallax with adjustable speed for the article area

04

The contact page can be connected to a form action URL from services such as Formspree

05

Comments are provided by Disqus and analytics by Google Analytics, both of which can be disabled by leaving them empty

06

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.

HugoHTMLBlogTool Site

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. 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. 2

    Refer to exampleSite/config.yaml to configure parameters such as the multilingual menu, breadcrumbs, pagination loader, background, and social links

  3. 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. 4

    Comments and analytics are configured via disqusShortname and googleAnalytics respectively, and are disabled when left empty

  5. 5

    For local preview, enter exampleSite and run hugo server -t ../.., then visit http://localhost:1313/

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This 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

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.

Original README
https://github.com/miguelsimoni/hugo-8bits-theme/blob/main/LICENSE.mdhttps://github.com/miguelsimoni/hugo-8bits-theme/blob/main/README.md

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

![GitHub](https://img.shields.io/github/license/miguelsimoni/hugo-8bits-theme.svg?style=flat-square)
![GitHub top language](https://img.shields.io/github/languages/top/miguelsimoni/hugo-8bits-theme.svg?style=flat-square)
![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/miguelsimoni/hugo-8bits-theme.svg?style=flat-square)
![GitHub last commit (branch)](https://img.shields.io/github/last-commit/miguelsimoni/hugo-8bits-theme/main.svg?style=flat-square)
![GitHub closed issues](https://img.shields.io/github/issues-closed/miguelsimoni/hugo-8bits-theme.svg?style=flat-square)
![GitHub forks](https://img.shields.io/github/forks/miguelsimoni/hugo-8bits-theme.svg?style=flat-square)
![GitHub stars](https://img.shields.io/github/stars/miguelsimoni/hugo-8bits-theme.svg?style=flat-square)
![GitHub watchers](https://img.shields.io/github/watchers/miguelsimoni/hugo-8bits-theme.svg?style=flat-square)

[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).

![screenshot](https://raw.githubusercontent.com/miguelsimoni/hugo-8bits-theme/main/images/tn.png)

[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.
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.