Anna Ehrnsperger
Design Code

Building a Fast Portfolio with Gatsby and Sanity

21 Jul 20

Working on your portfolio seems to be an endless task. Either you want to revise the website for the 100th time or you can't commit to a specific appearance.

For over 1 year my portfolio consisted of a few lines of text – only a simple index.html – until I decided to show some projects. So I reworked my website, once again. That's when I came up with this approach, which I built with Gatsby, Sanity as a CMS, Cloudinary for asset management and Netlify to deploy the site.

Gatsby

Gatsby is a very popular static website generator based on React. If you already have some React knowledge, Gatsby is very easy to pick up. There are a lot of themes where you can start with. I just grabbed the default starter and modified it.

 gatsby new my-awesome-portfolio

Why I 🤍 Gatsby

  • super fast websites
  • easy image optimization
  • great SEO
  • lots of plugins

Sanity

Sanity is a slick headless content management system with structured content. Before I decided to go with Sanity, I tried a lot of other headless CMS like Contentful, Strapi or Wordpress. These are the reasons why I chose Sanity

  • custom content structure and data types, which I really like!
  • Sanity Studio is just a React application, you can even customize the backend
  • real-time content preview with Gatsby
  • extensive free plan or pay-as-you-go
  • great mobile interface

Cloudinary

If you are using gatsby image for image compression, you don't really need Cloudinary. Since I have preview videos to showcase my projects, I needed something for video compression as well. With Cloudinary Video Transformations I was able to reduce the size of a video from 5MB to 300KB.

You can even easily implement Cloudinary in Sanity to query images.

sanity install asset-source-cloudinary

Netlify

The site is deployed on Netlify. I really like the easy setup with GitHub – if I update my repository or publish something in Sanity, Webhooks trigger the deployment and all of the static sites are automatically rebuilt. This process, unfortunately, takes a few minutes. In my opinion, that's absolutely worth it because it makes the website super fast and reliable.

All of these technologies and services are free, at least for a small portfolio site. Just give it a try and check out the code for my personal website.