How I Redesigned my Blog with Gatsby

August 25, 2017

    

2 min read

  

This post will get updated with time.

Starting from scratch (kind of)

I did the whole Start Here tutorial of Gatsby. Only to delete everything after I finished and cloning a starter repo.

Alas my starter repo was the cleanest I could find. (Link)[https://github.com/DSchau/gatsby-blog-starter-kit]

INSPIRATION

What's a good design session without a lot of inspirational content.

Maybe it is because I'm a fake designer without training. But I take aesthetics very seriously. I knew the work involved in designing this blog. I wouldn't accept anything short of perfection.

The list

-

Libraries Used

styled-components
grid-styled
styled-media-query
highlightjs

Basic building blocks

I've used an abstraction heavy building pattern.

Most of my components have Containers (Flex) and BoxContainers (Box) which accepts custom props.

The benefits is that no change is too big. When I decided to add tablet and mobile support the component bulding blocks really helped me a lot. There was a single source of truth.

Deployment

(old)

DNS AWS S3 Amazon cli SSL Cert Cloudflare

Once it's all set up.

It's as easy as typing yarn deploy. Complete breeze.

(new)

Deployed on netlify and building it as simple as:

git push origin master

To think it was a breeze before was one of my not so smart ramblings.

Analytics

I decided to install google analytics the old fashioned way.

Injecting a sript tag.

Turns out there's a not so guerilla way of doing it. Using the react-ga package. I get a tingling feeling everytime I need to download a package for a thing that I feel could be done without it.

I love abstractions when they simplify. Loathe them when they bloat.

What's next

There are still some components I want to split up. Mostly BlogView. I'd create a folder in components. Change BlogView to index.js and try to strip away into components all that I could.

The end result would be what I have in components/Index/Projects.

Taking care of some styling elements. Particularly about tags. Searching for them in the 'Words section'. Need to figure out a way which would make them visually pleaseurable.

TODO: This will be kept updated as the blog gets improved.