Hugo 8-bits Theme

Hugo 8-bits Theme is based on the NES-style CSS Framework developed by @bc_rikko.

Live Demo

NES.css Framework Info

Name	NES.css
Description	NES-style CSS Framework
Designer	BcRikko
Version	2.3.0
Released	Dec 17, 2019
License	Licensing information

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

Configuration

config.yaml

Multilingual

You can show or hide the Languages dropdown menu from config.yaml:

languagesMenuEnabled: true

Breadcrumb

You can show or hide the current page in the breadcrumb from config.yaml:

breadcrumb:
  showCurrent: true

Pagination Loader

You can enable or disable the pagination loader (Load More button) in the list pages from config.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.

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 just adding your contact form action URL in config.yaml:

contact:
  formAction: https://formspree.io/f/yourformcode

Social Networks

You can add the usernames for the current supported social networks in config.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 for more examples on social networks parameterization.

Comments

Powered by Disqus

disqusShortname: "yourdiscussshortname"

Disable the comments system by leaving params.disqusShortname empty.

Google Analytics

googleAnalytics: "UA-123-45"

Disable the Google Analytics by leaving params.googleAnalytics empty.

More Settings!

See the whole configuration in the config.yaml file.

Example Site

The exampleSite folder is based on Hugo Basic Example 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.

$ cd exampleSite
$ hugo server -t ../..

Now enter http://localhost:1313/ in the address bar of your browser.

Deployment

• Hosting on GitHub
• More hosting and deployment options

Contributing

• Found a bug?
• Got an idea for a new feature?

Let me know it using the issue tracker or make it directly with a pull request.

License

This theme and the framework that made it possible are released under the MIT License. Check the original framework license for additional licensing information.

Thanks

Thanks to Steve Francia for creating Hugo and the awesome community around the project. And also thanks to BcRikko for creating this awesome nostalgic framework.