Building a portfolio site in GatsbyJS

#gatsby #javascript #webdev #beginners

Why do I want a portfolio site?

I wanted to build a portfolio site so that I can experiment with new technologies and also showcase what I have been working on recently. In addition to this, it also allows me to keep refining my skills and testing out new ways of building things without the fear of breaking changes with brand new tech.

What Is Gatsby?

I'd heard a lot of buzz about Gatsby but never fully understood what it was. Turns out it's pretty powerful and really simple to use. If you've ever had the pleasure of working with NextJS then it's a fairly similar concept.

Gatsby is a static site generator that allows you to build websites and progressive web apps using modern javascript tools / utils / frameworks such as:

ReactJS
Webpack
GraphQL

Why Gatsby?

As I wanted to build a portfolio website I want to optimise load times for my users. So having a traditional React web app to serve this up didn't make sense. But I also wanted the benefits of developing in the React ecosystem which meant a traditional html / css / js route wasn't favorable. With Gatsby compiling our React app into static assets it also means that load times will be a lot faster than without using it. A key selling factor for me.

So how did it go?

After reading a few articles and the documentation for Gatsby it was pretty clear to see how neat it is. I love how dev friendly the CLI is for Gatsby. To get started you need to run the following command:

npm i -g gatsby --save

Once you have installed Gatsby you can then run the following to get started with a brand new project:

gatsby new my-brand-new-website

Then once it's finished installing and configuring you can run the following:

cd my-brand-new-website
npm run develop

Then you should be greeted to a template website that has been created for you with navigation all setup and examples of how to build in Gatsby, setting you up for success!

What stood out to me was how nice the functionality they provide out the box is. An SEO component is created for you which you simply implement into all of your pages and is very extensible. This sort of helping hand when onboarding developers onto your framework is what sets aside the competition.

Plugins are what Gatsby's ecosystem really relies on. There is pretty much a plugin to do anything needed for your website in the Gatsby world. For example, I wanted to optimise how I load content into my website. So I wanted to be able to add markdown files as part of my 'content' folder and read them in my components without having my content sitting hard coded in my components or pages. To do this all I had to do was install a plugin called gatsby-transformer-remark. Then add a little configuration to my Gatsby setup:

plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      // CommonMark mode (default: true)
      commonmark: true,
      // Footnotes mode (default: true)
      footnotes: true,
      // Pedantic mode (default: true)
      pedantic: true,
      // GitHub Flavored Markdown mode (default: true)
      gfm: true,
      // Plugins configs
      plugins: [],
    },
  },
],

Now I can call my markdown files from GraphQL queries inside my components or pages meaning the content sits in a content directory and my components and pages are in their own worlds too.

Once I understood this concept of doing things, I realised the power of Gatsby.

Closing thoughts...

Overall I really enjoyed using Gatsby to build my portfolio site. I will definitely be upgrading and getting more involved with it overtime as it is a fun and powerful tool to use. I didn't experience anything that put me off of using it. So for me it's full steam ahead!

Have you used Gatsby before? If so how did you find using it?

Let me know in the comments below! 👇