DEV Community

Cover image for Published My First Gatsby Theme
Shahidul Islam Majumder
Shahidul Islam Majumder

Posted on • Edited on • Originally published at shahid.pro

2

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
Enter fullscreen mode Exit fullscreen mode

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.

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay