Gatsby Nagui is a Gatsby.js blog starter that scaffolds a static blog with tags, categories, and pagination included, built by kimnagui and available for anyone to reuse.
What is Gatsby Nagui?
Gatsby Nagui is a blog starter template for Gatsby.js, the React-based static site generator. It takes a fresh Gatsby project and sets up a structured blog layout with components organized by atomic design principles (atoms, molecules, organisms, templates). The starter outputs a static blog with support for tags and categories, pagination, emoji rendering, and PrismJS code highlighting, and it is configured to deploy to AWS S3.
Key Features
- Tags & Categories — Group blog posts into multiple tags and categories with dedicated index pages.
- Pagination — Automatically split the post list across multiple pages for easier navigation.
- Styled-Components — All UI styles are written with the CSS-in-JS library styled-components.
- Atomic Design Components — The
src/componentsfolder is split intoatoms,molecules,organisms, andtemplatesto keep the codebase modular. - Mobile-First CSS — Styles target small screens first and scale up to larger viewports.
- PrismJS Syntax Highlighting — Code blocks are highlighted with PrismJS using the Dracula color theme.
- Google Analytics — The starter has built-in integration for tracking site analytics.
- AWS S3 Deployment — Configuration is included for deploying the static site to AWS S3.
Who is it for?
Gatsby Nagui is aimed at developers who want a component-driven blog starter with structured, reusable code.
- Frontend developers who want to scaffold a Gatsby blog with organized, reusable components.
- Technical writers who need a static blog with code highlighting for tutorials.
- Open-source maintainers who want a project blog with tags and categories to organize release notes.
What can you do with Gatsby Nagui?
- Start a personal blog — Create a new Gatsby project from the starter, then customize the layout and publish articles.
- Deploy to AWS S3 — Use the included S3 deployment setup to host the blog on AWS S3.
- Write code-heavy posts — With PrismJS Dracula highlighting, you can present code snippets with syntax highlighting.
How does Gatsby Nagui work?
The starter uses the standard Gatsby workflow. First, install the Gatsby CLI globally with npm install -g gatsby-cli. Then create a new project with gatsby new my-blog-starter https://github.com/kimnagui/gatsby-starter-nagui. Run gatsbyjs develop to start a development server at http://localhost:8000. The production build generates static HTML files ready for hosting.
FAQ
Is Gatsby Nagui free?
Yes, the starter is open source and free to use. You can clone or fork it from the GitHub repository link in the quick start section.
What is the tech stack?
Gatsby is built on React. The starter uses styled-components for CSS-in-JS, PrismJS with the Dracula theme for syntax highlighting, and includes configuration for Google Analytics and AWS S3 deployment.
Can I add comments and search?
Not yet. The README lists comments, search, bio in post, a tag/category index design, and dark mode as future todos.
