Gatsby Contentful Blog and Portfolio is a Gatsby starter that creates a portfolio website with a blog, using Contentful as a headless CMS and designed for deployment on Netlify.
What is Gatsby Contentful Blog and Portfolio?
Gatsby Contentful Blog and Portfolio is a starter project built with Gatsby that produces a static portfolio site with an integrated blog. It takes content authored in Contentful — text, images, and blog posts — and outputs a fast static website. The project was created for a local architect and is available on GitHub under the MIT license. A live demo is at https://gatsby-contentful-portfolio-blog.netlify.com/.
Key Features
- Gatsby — The site is generated with Gatsby, a React-based static site generator that pre-renders pages for speed.
- Contentful integration — Content is stored in Contentful; running
npm run setupcreates the required content types in your Contentful space. - GraphQL — Page data is queried through GraphQL, Gatsby's standard data layer.
- Styled Components — Styling uses Styled Components for scoped, component-level CSS.
- PWA support — The starter includes Progressive Web App features for offline capability.
- Cypress E2E tests — A
cypressfolder contains end-to-end tests, runnable withnpm run test:open:e2e. - Netlify deployment — The repository includes a Netlify status badge and deployment instructions using environment variables.
Who is it for?
- Architects and creative professionals — They can use it to present their portfolio and share project updates through blog posts without touching code.
- Developers — They can use it as a boilerplate for building a Gatsby site with Contentful as CMS; the setup script automates content type creation.
- Small businesses — A simple way to have a portfolio and blog with a modern static site stack and easy hosting on Netlify.
What can you do with it?
- Architects: Showcase building and design projects in a dedicated portfolio section.
- Bloggers: Write and publish posts through Contentful's editing interface; the Gatsby build pulls them into the site.
- Developers: Extend the starter with additional Gatsby plugins or custom components; the codebase is intentionally minimal.
How does it work?
After cloning the repository, run npm install and then npm run setup to connect your Contentful space. Add your Contentful space ID and Content Delivery Token as environment variables (the setup script writes them to a .env file for local use, but they must be added manually in Netlify). Finally, gatsby develop runs the site locally at http://localhost:8000.
FAQ
Is this starter free to use?
Yes, the repository is released under the MIT license, so you can use it freely for personal or commercial projects.
Do I need a Contentful account?
Yes, the template is built around Contentful as its content management system. You need a free or paid Contentful space and you must run npm run setup to create the required content types.
How do I deploy to Netlify?
The README includes Netlify deployment instructions. You must set the environment variables for your Contentful space ID and Content Delivery Token in the Netlify dashboard before deploying.
