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

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.

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