Published My First Gatsby Theme

Recently I was planning to redesign my portfolio. I planned to make it minimal and focus on showcasing my open-source works and writings. As I was using gatsby and I open-sourced my site, I decided to build it as a gatsby theme.

I had zero knowledge about developing a gatsby theme before starting the project. I started researching and found a great tutorial by Jason Lengstorf on egghead.io. I followed the tutorial and documentation, and managed to build a minimal theme in a couple of days. It was so easy that I felt almost like developing a gatsby site.

I started by designing the theme in Figma with the Atomic Design Pattern. I made a design system with color, typography, shadow, and some components so that I don't have to remember the color name, font size while designing the pages. You can find the design on this Figma link.

After completing the basic design, I started researching for a good name. My theme focuses on showcasing open-source projects. So, it would be great to have the word open-source in it. I remember developer Ahmad Awais used to call him OpenSourcerer, and dev.to founder Ben Halpern also likes to call him full-time open sourcerer. I checked on GitHub and Gatsby Plugin Library if the name already exists. It was available. So, I named my theme gatsby-theme-open-sourcerer.

Now let's have a look at the theme.

Features

• minimal in design
• markdown support for writing post
• page contents in YAML format
• open-source project showcasing with GitHub star count
• fully customizable

Installation

A site can be bootstrapped easily with the theme by using the starter kit. Just run the following command (you have to have gatsby-cli installed).

gatsby new my-site https://github.com/sh4hids/gatsby-starter-open-sourcerer

Now navigate to the project folder and run gatsby develop to see your project in development mode.

Customization

You can customize each part of the theme either by customizing the configuration or by shadowing. You can find the detailed instructions on the theme's readme.

Hard Lesson

To shadow a theme, we have to skip the src folder in the shadow theme.

- issues/14134

Hope you'll find the theme useful. If you use and like the theme, please give a star and make a PR to add your site on showcase section.