How To Build A Portfolio With Gatsby — From Scratch To Deployment

Konstantin Münster
13 min readJun 6, 2020

This article should provide a general understanding of how Gatsby works and how it can be used to create a personal website from scratch. If you are new to Gatsby, this article is for you.

How To Build A Portfolio With Gatsby.js

I recently published the first iteration of my personal website. Since I haven’t had a chance to try Gatsby prior to the project, it was the first time for me to dive into this new ecosystem.

Even though I got more and more enthusiastic about Gatsby throughout development, it was admittedly quite overwhelming at first. Especially because I haven’t worked much with GraphQL and Markdown before.

Hence, I decided to write this article as an introductory guide about building websites with Gatsby. In this article, we will not only build a simplified version of my own portfolio from scratch, but we will also have a look at what Gatsby exactly is and how it works under the hood.

Contents

  1. Introduction to Gatsby
  2. Creating A New Gatsby Project
  3. Explaining Gatsby’s Folder Structure
  4. Introduction to Gatsby Plugins
  5. Creating A Basic Page Layout
  6. Creating Page Sections
  7. Adding Content via Markdown Files

--

--