Creating my first gatsby starter
November 13, 2019 . 4 min read
I have started this blog a couple of months ago and venture myself into the Gatsby ecosystem. At the time I was fascinated with the concept of
gatsby theme, and still am, however I have decided to go back to using a
Apparently it was time to give 1 step back in order to give 2 forwards.
Using a gatsby starter instead
There are a couple of reasons why I have made this decision and I have to say that I learned a lot with this move. Before going through the new learnings, let me try to explain why the change.
To start with I have to admit that I was a little bit frustrated with the fact that I was not able to programmatically create a
category pages for my blog on using
gatsby-theme-blog. I do have a blog post that explains, from a normal Gatsby site perspective, how to create a tag page programmatically, however I was not able to build that into my blog.
gatsby theme is an excellent abstraction and I totally see the value of it. Unlike a
starter you can have more control over anything that you build that is leveraging a
theme (this is specially true if you own that
theme and want to maintain consistency across different projects that use that same
theme). If, let's say, you want to build a blog that has the same look and feel across different projects for your organization, it will be easy to maintain that with a
theme. A simple change in your
theme and boom 💥, it changes everything across your different projects. On the other hand, if you use a
starter it is the same way as forking a repo, it will be a different code base from that moment onwards and that means that it will be painful to maintain.
The other challenge that I had was, less of a challenge now, more of a mistake at the time, but I was not able to properly create a
navMenu that behaved the way I would wanted to. The intent was to create a header
navMenu that had not bottom shade when the blog loaded, but that displayed that bottom shadow, once the user scrolled down. I implement that using a class component with state, leveraging the component state to change my UI. For some reason I was not able to do that on
gatsby-theme-blog/components/navMenu.js... well, I do think this was my mistake and nothing else. What's more, I reckon you can definitely do this with
hooks if the problem was not being able to transform
navMenu into a class component with state.
On a more positive note I did all this as a mean to publish my first contribution to the gatsby community and my first open sourced project that anyone can actually use... Hurray! Give it a spin and let me know what you think.
My starter styling was in a way inspired by Dan Abramov blog and to build something like that, with the functionalities that I had envisioned, I had to leverage a already existing starter, the gatsby-advanced-starter, as I didn't want to start from scratch.
I had to make a couple of changes on that starter as one of the things that I wanted to see there was MDX implemented - now you can have that on this starter! After making that change I used
theme-ui to give it a more opinionated styling and tweaked a couple of things more.
For me the most challenging piece was actually to be able to integrate MDX into the data schema. For that I needed to make a couple of changes on the following files:
- gatsby-node.js, both the graphql query as well as the creation of the mdx and allMdx nodes accordingly;
- all the template components (category.js, post.js and tag.js) needed to be changed to pull in MDX created data;
- both blog.js and index.js as I am rendering the MDX data on those pages.
That is that! I finally published my first Gatsby starter and my first open sourced project. I hope that you used!
See you around!
More posts about Code
Deploying Keystone-6 with Render
1 minutes read
Paginating through cards in NextJS not changing the url
1 minutes read
Thinking how to fetch data in nextjs
3 minutes read
Learning Advanced React with Wesbos
4 minutes read
Designing and implementing a megamenu in my digital garden
3 minutes read
All you need to know about CSS transitions
2 minutes read
No spam! Only good stuff!