New site, who dis?

I’ve been meaning to update my site for a while now but never made the time. I recently came across some extra free time (see laid off due to Covid-19) and figured now seems like a good time.

Framework

Both this current version and the past one are built with GatsbyJS. I’ve been using Gatsby for a couple years now for side project marketing sites and it’s always fun to work with. There is a plug-in for almost anything you might need, they have great starters and you can source your data from anywhere. The performance you get out of the box is great. One downside is if you have a ton of pages and a lot of images, the build times can take a while. There are solutions out there, but all of my sites so far are small, so it hasn’t been a big deal. Another learning curve was using

Theme-UI

The styling is handled by Theme-UI. Making different color themes and working with responsive breakpoints is just too easy. Theme-UI also helps with styling .mdx files with its theme.styles API.

MDX

All the blog posts and some of the pages are written in .mdx files, which are markdown with the added benefit of being able to use React components inside. Since it’s just a personal blog I like keeping it simple by using mdx files instead of setting up a CMS.

Hosting

The previous version was hosted using GitHub pages which worked alright. This version however is hosted on Netlify which has been great. Anytime I push to master it rebuilds. If I wanted I could also set up preview branches so I could show others my progress without affecting the actual site. Netlify also has Netlify functions which are used for running serverless functions. So far on this site I’m not using those, but I do make use of them on my DVLPR site.

Cloudinary

I recently used Cloudinary on my latest tiny project Thankful Three for creating dynamic sharing images, and found it pretty easy to work with. I then came across this post from Jason Lengstorf explaining how he makes his share images using Cloudinary and he even made an NPM package for it @jlengstorf/get-share-image - npm which was super easy to set up and use. I just made a template in Sketch, uploaded that to Cloudinary, got the image ID, and cloud name, played with the settings a bit and boom, it works.

My base template created in Sketch

const socialImage = getShareImage({
    title: post.frontmatter.title,
    tagline: ‘’,
    cloudName: CLOUDNAME,
    imagePublicID: IMAGE_ID,
    titleFont: ‘rubik’,
    textColor: ‘333333’,
    titleExtraConfig: ‘_bold’,
    titleBottomOffset: 330,
  });

In my blog-page.js template, I have the above code that uses Jason’s get-share-image package to create the image passing in the above image template, some options, and the title that comes from the .mdx frontmatter. I then pass that to my SEO component, which sets the <meta name=“twitter:image” content={image} /> and the <meta property=“og:image” content={image} /> allowing platforms to pick up that image and show as the preview image. While I only have a handful of posts, and making a new share image in Sketch wouldn’t take very long, it’s more fun that it’s automated and I don’t have to remember to make one each time.

Fathom Analytics

I’ve been wanting to use Fathom Analytics for a while now and finally pulled the trigger. I now use it on all my sites and I’ve really enjoyed it. I was never checking my Google Analytics anyway, so why have it installed and potentially have to show that annoying cookie banner on all my sites. There is a Gatsby plugin which made installing it super easy.

I had a great time remaking my site, and told myself I had to finish it in a week. Having that timeline helped me actually ship something, as there will always be something more to add or a fun animation to make, but in reality no one will miss those things, and I need to move on to writing actual content, applying for jobs, and working on ShopFeedback