Gatsby Starter Gridfolio

Gatsby Starter Gridfolio is a GatsbyJS starter that ports Christine Cha's Gridfolio portfolio concept into a React-based static site generator for building personal portfolio websites.

What is Gatsby Starter Gridfolio?

Gatsby Starter Gridfolio is a portfolio-oriented starter template for GatsbyJS, a React-based static site generator. It takes a fresh installation command via gatsby new with the starter's GitHub URL and produces a static portfolio site with a grid layout. The starter is built on top of the official Gatsby Starter Default and adds SCSS for styling, ESLint with the Airbnb config for code linting, and Prettier for code formatting. It is distributed as an open-source GitHub repository.

Key Features

• Gridfolio layout — Ports Christine Cha's grid-based portfolio design, allowing projects and work to be displayed in a grid.
• GatsbyJS static generation — Uses Gatsby's build pipeline to generate a static site that can be deployed to any hosting service.
• SCSS styling — Styles are written in SCSS, a CSS preprocessor that supports variables, nesting, and mixins.
• ESLint with Airbnb config — Includes a linting setup that enforces Airbnb's JavaScript style guide, helping maintain code quality.
• Prettier integration — Prettier is preconfigured to automatically format code, keeping the codebase consistent.
• Gatsby Starter Default base — Inherits the standard folder structure and default files from Gatsby's official starter.
• Hot-reloading development server — Running gatsby develop starts a server at localhost:8000 with hot reloading for real-time preview.
• Production build command — Running gatsby build outputs a minified, optimized static site ready for deployment.

Who is it for?

• Web developers wanting a quick, opinionated starting point for a personal portfolio site built with Gatsby and React.
• Gatsby beginners who want to learn how a starter is structured, with preconfigured ESLint, Prettier, and SCSS already in place.
• Designers and creatives who want to showcase their work in a grid layout without building the site infrastructure from scratch.

What can you do with Gatsby Starter Gridfolio?

• Launch a portfolio site: Run gatsby new with the starter URL, then edit the SCSS and content files to reflect your projects and personal brand.
• Learn starter internals: Explore how the Gatsby Starter Default is extended with ESLint, Prettier, and SCSS, which makes it a useful learning project for Gatsby development.
• Prototype a grid layout: Use the Gridfolio layout as a starting point for any grid-based visual showcase, adapting the SCSS to change column counts and spacing.

How does Gatsby Starter Gridfolio work?

1. Install the Gatsby command line tool globally with npm install --global gatsby-cli.
2. Create a new site by running gatsby new my-gridfolio with the starter's GitHub URL.
3. Run gatsby develop to start a hot-reloading development server at localhost:8000.
4. Run gatsby build to create a production-ready static build of the site.

FAQ

Is Gatsby Starter Gridfolio free to use?

The repository is publicly available on GitHub, and the starter is based on the open-source Gatsby Starter Default, so it is free to use and modify under the terms of the Gatsby project's open-source license.

What does Gatsby Starter Gridfolio include?

It includes the Gridfolio portfolio layout, SCSS styling, ESLint with the Airbnb config, Prettier, and the default Gatsby starter structure. It does not include a headless CMS or a content model beyond the default Gatsby pages.

How do I start a new project with this starter?

First install the Gatsby CLI globally, then run gatsby new with the URL https://github.com/joemidi/gatsby-starter-gridfolio as the starter argument. This downloads the template into a new directory and installs dependencies.

Does the starter support hot reloading?

Yes, running gatsby develop starts a development server at localhost:8000 with hot reloading, so changes to source files are reflected in the browser immediately.

What styling language does the starter use?

The starter uses SCSS, a Sass syntax that adds variables, nesting, and mixins to CSS. The SCSS files are part of the source and are compiled during the Gatsby build.