Gatsby Agency Portfolio

Gatsby Agency Portfolio is a Gatsby starter repository from Cosmic JS that produces a portfolio website for creative agencies, using a Cosmic JS bucket as its content source.

What is Gatsby Agency Portfolio?

Gatsby Agency Portfolio is a Gatsby-based starter template designed specifically for creative agency portfolio sites. It takes a Cosmic JS bucket (the headless CMS content) as its data source and outputs a static site that you can run locally with gatsby develop or deploy to Netlify. The template is published by Cosmic JS, the company behind the Cosmic JS CMS, and includes a demo hosted on their apps page.

Key Features

• Gatsby static site generator — Built on Gatsby, offering a development server at http://localhost:8000 with hot reload and a built-in GraphQL playground at http://localhost:8000/___graphql for experimenting with data queries.
• Cosmic JS headless CMS integration — Content is managed in a Cosmic JS bucket; setup requires creating a .env file at the project root with COSMIC_READ_KEY and COSMIC_BUCKET_SLUG environment variables.
• Agency-focused design — The template ships with an agency portfolio layout, including a logo file at src/images/gap_logo.svg and a main index page at src/pages/index.js that you edit to customize the site.
• One-click Netlify deployment — The README includes a Deploy to Netlify button, letting you deploy the repository to Netlify without leaving the browser.
• Standard Gatsby project structure — The starter includes gatsby-config.js, gatsby-node.js, gatsby-browser.js, and gatsby-ssr.js, giving access to Gatsby's configuration, Node, browser, and server-side rendering APIs.
• MIT license — The project is licensed under the MIT license, as stated in the included LICENSE file.
• Prettier pre-configured — A .prettierrc file is included to keep code formatting consistent across contributors.

Who is it for?

• Creative agencies — Use this starter to launch a portfolio site that showcases their work, with content independently managed through a Cosmic JS bucket.
• Freelance designers and developers — Use it as a base for a personal portfolio, editing src/pages/index.js to change the landing page content and styling.
• Developers learning Gatsby — The README links directly to Gatsby's official docs and in-depth tutorial, making it a practical sample project for learning the framework's file structure and API usage.

What can you do with the template?

• Agency teams: Set up a portfolio site by cloning the repo, importing a pre-built Cosmic JS bucket via the provided link, adding their read key and bucket slug to .env, then running gatsby develop to preview at localhost:8000.
• Netlify users: Deploy the repository to Netlify with the one-click deploy button in the README, skipping manual build configuration.
• Content editors: Manage portfolio content through the Cosmic JS dashboard, since the Gatsby site pulls all content from the bucket at build time.

How does the template work?

The README outlines four steps: clone the repo and install dependencies with npm install or yarn install; click the Cosmic JS import link to initialize a bucket; create a .env file containing the bucket slug and read key; and run gatsby develop to start the site. The site fetches content from Cosmic JS via Gatsby's GraphQL data layer, so any changes to bucket content are reflected when the site is rebuilt.