Build anything you can imagine - that’s the first slogan on the webpage of Gatsby. Gatsby is an open-source framework that combines functionality from React, GraphQL and Webpack into a single tool for building static websites and apps.

For what?

So what could you imagine? I imagined what my digital presence could look like, so I looked out for themes that grab my attention.

As I looked through different themes, I found gatsby-theme-intro from Wojciech Kocjan and i really liked it, but it was just a “personal branding theme” without any blog functionality. But i wanted to try it out.

I cloned the repository, changed some stuff in the yaml files (that’s where all the information was stored for this theme) and about thirty minutes later I hat it. It was awesome.

Now I just hat to publish it, I used Netlify and five minutes later, it was accessible for everyone. I changed the DNS settings of my domain and all worked fine.

A first version of my own page was finished, i was really amazed.

Adding blog functionality

A week later, I wanted to add a blog functionality, because my main goal was to have a page where some blog entries are shown. I’m not a person who likes writing very much, but I wanted to develop myself further. And as I’m reading a lot of blog posts about technology, I thought “Why not do something myself?“.

After my first experiences with Ghost were so successful I thought it might take four hours to implement something like that.

Unfortunately, I was wrong

I read over a few instructions of combining multiple themes (the personal one and a blog one) and about Shadow Components. Shadow components are used to customize components the theme provides for you.

The combination of multiple themes worked perfectly, that was not the issue. But then I started to shadow my blog components, because I wanted that the blog looks like the rest of the page, one consistent picture.

Shadow components

They work quite easily, you look for a component in your theme folder (the one in the node_modules) copy the component in your own /src/components folder and rewrite the things you want.

So e.g. we copy the footer file from our personal branding theme.

So we copy node_modules/@wkocjan/gatsby-theme-intro/src/components/footer/footer.js to our project folder src/@wkocjan/gatsby-theme-intro/components/footer/footer.js

and then Gatsby will use our version of footer.js and not the one from the node_modules. So far so good, but now we will have a quick look at that file:

import { bool } from "prop-types"
import React from "react"
import { ProfileType } from "../../types"

const Footer = ({ name, showThemeLogo = true }) => (
  <footer className="bg-front mt-16 pt-8 pb-16">
    <div className="md:max-w-screen-sm lg:max-w-screen-xl mx-auto px-4 flex items-center">
      <div className="w-2/3 text-back-light font-header text-xs">
        <b>
          &copy; {new Date().getFullYear()} {name}.
        </b>{" "}
        All rights reserved.
      </div>
      <div className="w-1/3 text-right">
        {showThemeLogo && (
          ....
        )}
      </div>
    </div>
  </footer>
)

Footer.propTypes = {
  name: ProfileType.name,
  showThemeLogo: bool,
}

export default Footer

I wanted to change two things, first the All rights reserved and I wanted to add a link to an Impressum

So my version looked like this:

import { bool } from "prop-types"
import React from "react"
import { ProfileType } from "../../../../../node_modules/@wkocjan/gatsby-theme-intro/src/types/index.js"

const Footer = () => (
  <footer className="bg-front mt-16 pt-8 pb-16">
    <div className="md:max-w-screen-sm lg:max-w-screen-xl mx-auto px-4 flex items-center">
      <div className="w-2/3 text-back-light font-header text-xs">
        &copy; {new Date().getFullYear()}{name}.
        {" "}
        made with ❤️ in the alps
      </div>
      <div className="w-1/3 text-right text-back-light font-header text-xs">
        <a href="/blog/impressum">Impressum</a>
      </div>
    </div>
  </footer>
)

Footer.propTypes = {
  name: ProfileType.name
}

export default Footer

As you can see, you also have to change each import path and this is the thing that killed me. I wanted to rewrite my entire blog theme to use components from another theme. It could be due to my patience but I couldn’t go through it.

My way of doing it

I liked the concepts of Gatsby, just not that Shadowing Components stuff. It might work good if you just want to change small parts of the theme, but not If you want to change almost everything and that in combination with another theme. So I decided to look for a gatsby starter that does not use a theme and instead just write the components myself. I used most stuff from the gatsby-theme-intro cause I liked it. It worked out really well and I think the result is impressive. I will try to to learn more about Gatsby and will improve this site here and there.