Design Italia Gatsby Starterkit is a Gatsby starter that scaffolds a new React-based static website using the Bootstrap Italia design system and its Design React Kit, built for the Italian public administration ecosystem.
What is the Design Italia Gatsby Starterkit?
The Design Italia Gatsby Starterkit is a starting point for building static websites with Gatsby, the React-based static site generator. It input is a Gatsby project folder and its output is a working website on http://localhost:8000 with hot reload, preconfigured with Bootstrap Italia components. Maintained by the italia GitHub organization, it pairs the Design React Kit with Gatsby's standard project structure.
Key Features
- Gatsby framework — Uses Gatsby to produce a fast static site with React, including a development server with automatic reload at
http://localhost:8000and a GraphiQL interface athttp://localhost:8000/___graphqlfor querying site data. - Bootstrap Italia integration — Pages are based on the Design React Kit, so they follow the official Italian public administration design guidelines; the kit's Storybook documentation lives at
https://italia.github.io/design-react-kit/. - Standard Gatsby configuration files — Ships with
gatsby-config.jsfor site metadata and plugins,gatsby-node.jsfor Node API hooks,gatsby-browser.jsfor browser APIs, andgatsby-ssr.jsfor server-side rendering extensions. - Prettier code formatting — A
.prettierrcfile is included to keep code style consistent. - MIT license — The project is licensed under MIT, permitting free use and modification.
- One-click Netlify deploy — The README provides a Deploy to Netlify button that connects directly to the GitHub repository.
- Bilingual README — Documentation is available in Italian (
README.md) and English (README.en.md).
Who is it for?
- Developers building Italian public administration sites — They can start from this starter to create standards-compliant, accessible web services with the official Bootstrap Italia design system.
- Front-end developers learning Gatsby — The quick start guide shows how to create a site with
gatsby new, rungatsby develop, and editsrc/pages/index.jswith browser hot reload. - Teams working with the Design React Kit — They can use the Storybook component documentation and the page templates from
design-comuni-prototipito scaffold layouts quickly. - Open-source contributors — Developers interested in the italia design system can reuse this starter as a base for experiments, custom components, or contributions.
What can you do with the Design Italia Gatsby Starterkit?
- Public administration developers: Scaffold a static website preconfigured with Bootstrap Italia components and customize the default page for services such as municipal portals or citizen information pages.
- Front-end designers: Use the page templates linked in the README to build layouts that match Italian public sector design standards.
- Gatsby learners: Follow the full Gatsby tutorial referenced in the starter and use GraphiQL at
http://localhost:8000/___graphqlto understand data queries in a real project.
How does the Design Italia Gatsby Starterkit work?
The starter works via the Gatsby CLI: run gatsby new my-new-website with the repository URL, then gatsby develop to launch a local server. Edit src/pages/index.js and the browser updates automatically. A secondary GraphiQL tool allows experimenting with data queries.
FAQ
How do I create a new site from this starter?
Use the command gatsby new my-new-website https://github.com/italia/design-italia-gatsby-starterkit, then navigate into my-new-website and run gatsby develop.
Is this starter free?
Yes, the starter is open source under the MIT license, so you can use, modify, and distribute it without restrictions.
What is inside the starter?
It includes Gatsby's standard files: gatsby-config.js, gatsby-node.js, gatsby-browser.js, gatsby-ssr.js, a src folder for front-end code, .prettierrc, package.json, package-lock.json, and README.md plus README.en.md.
Does the starter work with Bootstrap Italia?
Yes, it is built specifically for the Design React Kit of Bootstrap Italia, providing the official Italian public administration design system as React components for Gatsby sites.
How can I deploy the site?
The README includes a Deploy to Netlify button that points to the repository, letting you push a live site to Netlify with one click.
