Gatsby Nes screenshot

Gatsby Nes

Author Avatar Theme by Jmau111
Updated: 21 Feb 2023
22 Stars

A theme built with Typescript, Gatsby, and NES.css

Categories

Overview

The Gatsby NESA theme is a one-page layout theme built with Typescript, Gatsby, and NES.css. It is designed as a nostalgic tribute to Nintendo and has a lightweight feature set. The theme uses Preact, a lighter alternative to React. It is easy to customize and comes with basic SEO and a styled 404 page.

Features

  • One-page layout
  • Basic SEO
  • Styled 404 page

Installation

  1. Start by cloning the Gatsby NESA theme repository.
  2. Customize the favicon by modifying the image file in the “./images/” directory.
  3. Check the types in the theme by running the command gatsby develop.
  4. Customize the styles by tweaking the SASS files in the “./src/styles” directory.
  5. Do not remove the import statement import "nes.css/css/nes.min.css" in the main Layout file “./src/components/Layout/index.tsx” to retain the import of NES.css.
  6. Open the “./gatsby-config.ts” file and modify the site URL.
  7. If you need to integrate Google Analytics, add the plugin and the entry in the “./gatsby-config.js” file. Alternatively, consider using Gatsby Matomo as an alternative.
  8. Modify the “./static/humans.txt” file with your team information as a tribute to the contributors.
  9. If you encounter issues with static images and queries, use the custom yarn command yarn fix to clean the cache folder and ensure there are no outdated files.

Summary

The Gatsby NESA theme is a lightweight theme with a one-page layout, basic SEO, and a styled 404 page. It is designed as a nostalgic tribute to Nintendo and is easy to customize. The theme uses Preact as a lightweight alternative to React. It is recommended for one-page layouts and not for complex hierarchies or blogs.