Gatsby Noob is a portfolio website starter built with Gatsby, the React-based static site generator powered by GraphQL, created by developer Nilanjan Deb as a hands-on learning project for static site generation.
What is Gatsby Noob?
Gatsby Noob is a learning-oriented Gatsby starter that demonstrates how to build a static portfolio site using Gatsby's React architecture and GraphQL data layer. It takes content from Contentful, a headless CMS, and from markdown files, and outputs a static website that can be deployed to any static host; the author's live demo runs on Netlify at gatsby-noob.netlify.app. The project's GitHub description describes it as "Learning about GatsbyJS to generate Static Site." It is open source, currently has 2 stars, and was authored by Nilanjan Deb.
Key Features
- Gatsby static site generation — Uses Gatsby's build system to prerender React pages into static HTML, improving loading speed and SEO.
- GraphQL data layer — Content is queried at build time via GraphQL, pulling data from markdown and Contentful in one unified pipeline.
- Contentful headless CMS — Content editors can manage site content through Contentful's CMS; the starter includes the integration code.
- Markdown content support — Portfolio items and posts can be authored as markdown files, which Gatsby transforms into static pages.
- CSS Modules — Component-scoped styling via CSS Modules keeps styles isolated and avoids global selector clashes.
- Bootswatch theming — Bootswatch, a collection of free Bootstrap themes, is included for quick theme switching without custom CSS.
- Formspree contact forms — The starter can handle contact forms through Formspree, which processes submissions without a custom backend.
- React Helmet SEO — The React Helmet plugin manages document head tags, letting each page set its own title and meta description.
- React Hooks — The project demonstrates modern React with hooks for component state and side effects.
Who is it for?
- Developers new to Gatsby — Use this project to learn how a Gatsby site is structured: gatsby-config, page creation, GraphQL queries, and static deployment.
- Portfolio site builders — Fork the starter and replace the sample content with your own work; the author used it to build a live portfolio.
- Static site enthusiasts — Study a real example of combining a headless CMS, markdown, and a static host like Netlify in one project.
What can you do with Gatsby Noob?
- Learn Gatsby step by step: Trace how content flows from markdown and Contentful through GraphQL into React components, then to prerendered static pages.
- Launch a personal portfolio: Fork the repository, customize the pages and content, and deploy the output to Netlify or another static host in minutes.
- Create a markdown-powered blog: Use the markdown content pipeline to publish blog posts, with React Helmet adding per-page SEO metadata automatically.
FAQ
Is Gatsby Noob free to use?
Yes. The project is open source on GitHub, so you can freely fork, modify, and use it. No pricing or licensing fees are mentioned in the repository.
What content sources does Gatsby Noob support?
The starter integrates both markdown files and Contentful, a headless CMS. Gatsby's GraphQL layer pulls data from both sources, so you can write content in markdown or manage it through Contentful's editor.
Who created Gatsby Noob?
The project was created by Nilanjan Deb, who published it on GitHub and used it to build a live portfolio hosted at gatsby-noob.netlify.app. It's labeled as a learning project about GatsbyJS.
