Gatsby Dev Portfolio

gatsby-dev-portfolio is a developer portfolio starter built with Gatsby and Strapi, where the frontend is a static React site and the backend is a headless CMS. This starter is designed to launch a portfolio quickly by pairing a Gatsby frontend with a separate Strapi backend, then deploying the result to Netlify.

What is gatsby-dev-portfolio?

gatsby-dev-portfolio is a Gatsby starter that generates a static developer portfolio site from content managed in Strapi, a headless CMS. The template lives in the repository gatsby-dev-portfolio (created by GitHub user eneax) and relies on a companion API repository, gatsby-dev-portfolio-api, for the backend. It takes Strapi content as its data source and outputs a static site that can be built and served anywhere, with Netlify as the reference deployment target.

Key Features

• Strapi headless CMS integration — Content is stored in a separate Strapi backend, making the portfolio editable by non-coders without touching code.
• Gatsby static site generation — Uses gatsby-config.js and gatsby-node.js to pull data from the API and create pages in the Gatsby build process.
• Styled-components for styling — The repository topic list includes styled-components, so the UI is styled with CSS-in-JS components.
• Organized project structure — The starter ships with src/assets, src/components, src/pages, and src/templates directories, giving a standard Gatsby layout with templates for content types.
• Quality tooling configured — Includes .eslint and .prettierrc, so linting and code formatting are set up out of the box.
• Netlify deployment ready — A Deploy to Netlify button is included in the README, and the README states the project is deployed to Netlify.
• JavaScript and React stack — Built with JavaScript and React, as reflected in the repository topics.

Who is it for?

• Frontend developers who want a portfolio without building one from scratch, with a CMS to manage projects and blog posts.
• Freelancers and job seekers who need a professional online presence quickly and want to control content through Strapi.
• Gatsby learners who want to see how a Gatsby site consumes a headless CMS and generates templates via gatsby-node.js.
• Developers who prefer styled-components and want a ready-made CSS-in-JS setup.

What can you do with gatsby-dev-portfolio?

• Create a portfolio site: Add your projects to Strapi and the Gatsby site will render them as static pages using the templates in src/templates.
• Write a blog: The topic list includes gatsby-blog, so the starter supports blogging; you can manage posts through the Strapi backend.
• Customize the design: Because styling uses styled-components, you can adjust the theme by editing the components in src/components.
• Deploy to Netlify: Use the provided Deploy to Netlify button or run a standard Gatsby build and host the static output.

How does gatsby-dev-portfolio work?

To run the project locally, first clone and set up the Strapi backend from gatsby-dev-portfolio-api using npm install and npm run develop. Then, in this repository, run npm install followed by gatsby develop. The Gatsby site connects to the local Strapi backend and fetches content during the build, generating pages via gatsby-node.js. Once ready, the static site can be deployed to Netlify.

FAQ

Does gatsby-dev-portfolio include the backend?

No. The Strapi backend is maintained in a separate repository, gatsby-dev-portfolio-api, and must be cloned and run locally for the frontend to have content.

How do I set up the project locally?

Clone both repositories. In the backend folder, run npm install and npm run develop. In the frontend folder, run npm install and gatsby develop. This starts the CMS and the Gatsby site locally.

What technologies does the template use?

The starter is built with Gatsby (a React-based static site generator), styled-components for styling, and Strapi as the headless CMS. The repository topics also list JavaScript and React.

Is this template deployable to Netlify?

Yes. The README states the project is deployed to Netlify, and it includes a Deploy to Netlify button that connects a GitHub repository for continuous deployment.

Can I use a different CMS?

The starter is designed specifically for Strapi; switching to another CMS would require changing how data is sourced in gatsby-config and gatsby-node. The provided back end is Strapi.