Gatsby Starter Zenii

Gatsby Starter Zenii is a one-page Gatsby starter that pairs Tailwind CSS and PostCSS with Contentful CMS to generate a static, multi-section landing page through the Gatsby build pipeline.

What is Gatsby Starter Zenii?

Gatsby Starter Zenii is a starter repository for building a one-page Gatsby site where all page content comes from Contentful. It takes a Contentful space containing the starter's predefined content models — Layout, Menu, Menu Item, Contact Details, Featured Items, Testimonial, Pricing Plan, and Service Item — and outputs a static HTML site with sections for services, pricing, testimonials, and contact details. The project is maintained by thebakerdev and is available on GitHub, and it also integrates with Stackbit for one-click deployment.

Key Features

The starter bundles a focused toolchain: Tailwind CSS for styling, PostCSS for CSS processing, Contentful as the content backend, and Material Icons for iconography.

• Tailwind CSS styling — Colors and fonts are defined in tailwind.config.js, and all styles are compiled with Tailwind CSS.
• PostCSS processing — CSS is processed through PostCSS, making it easy to add vendor prefixing and other PostCSS plugins.
• Contentful integration — The starter includes a setup script (npm run setup) that imports the content models into your Contentful space and requires you to have a Contentful account.
• Material Icons — The theme uses Google's Material Icons for UI elements.
• Stackbit support — A Create with Stackbit button is included, letting you spin up a project with the Gatsby and Contentful stack without manual configuration.
• Modular sections — New page sections are created by defining a Layout content type (e.g., Layout > Portfolio), building a component in src/sections, importing it into section.js, and adding it to the layout's content modules array.
• Prebuilt content types — The repo specifies content models for Layout, Menu, Menu Item, Contact Details, Featured Items, Testimonial, Pricing Plan, and Service Item.
• Development commands — npm run develop, npm run build, and npm run serve handle local development, production builds, and previewing the built site.

Who is it for?

Developers who want a CMS-backed one-page Gatsby site without building content models from scratch can clone this starter, install dependencies, and run the Contentful setup script to import all the necessary types. Agencies delivering client-editable sites can hand the Contentful space to end clients while the codebase remains a Gatsby project. Freelancers building portfolio or service landing pages will find ready-made content types for testimonials, pricing plans, featured items, and contact details.

What can you do with Gatsby Starter Zenii?

• Freelancers and agencies: assemble a one-page landing page with a services section (Service Item), pricing plans (Pricing Plan), testimonials (Testimonial), and contact details (Contact Details) — all editable in Contentful.
• Portfolio owners: use the Featured Items content type and a Layout such as Layout > Portfolio to display project highlights in a dedicated section.
• Gatsby developers: use the starter as a reference for wiring Contentful layout entries to section components through static GraphQL queries and the contentModuleId prop.

How does the starter work?

Start by cloning the repository and running npm install, then run npm run setup, which prompts for your Contentful credentials and imports the starter's content models. Each section component in src/sections runs a static GraphQL query using useStaticQuery, fetching entries from Contentful and filtering by the contentModuleId prop. The Layout content type controls which sections appear and their order; changing the layout in Contentful affects the generated site at the next build.

FAQ

Here are answers to common questions about the starter's requirements and customization.

Does this starter work without Contentful?

No. The theme requires a Contentful account, and you must run npm run setup to import the content models before the site can fetch data. The repository explicitly states that a Contentful account is required.

How do I change the site's color scheme?

Edit the tailwind.config.js file to adjust colors and fonts. The theme also uses gatsby-plugin-google-fonts, so font families are loaded via gatsby-config.js and tailwind.config.js.

How do I add a new section?

Create a Layout content type in Contentful named like Layout > Portfolio, add your custom fields, then create a new component in src/sections, import it into section.js, and add it to the components array. The component should accept the contentModuleId prop.

Can I deploy it with Stackbit?

Yes. The repository includes a Create with Stackbit button that opens a Stackbit project preconfigured for Gatsby and Contentful.