My New Website! Here are the deets

April 21, 2020JavascriptEdit Post

It's here! My new website.

It's funny how being a developer, you neglect your own website until things are dire.

Over the past year I've been chipping away at building this new site and I'm super happy with how it's turned out.

Old Stack

My old site, built in 2014, was starting to feel a little creaky.

It was running on WordPress. I had over a decade on WordPress and I still love it, but I'll explain why I left WP in just a second. Here is the tech I used on the old site:

• WordPress
• Custom theme
• LESS for styling
• jQuery

New Stack

Gatsby (and y not Next.js)

Gatsby is the framework and despite a few hiccups, I really enjoyed working with it! It makes this site wicked fast without having to really do much at all.

Many of you will ask why I didn't use Next.js — a framework that I love and have built much of my course platform on. I used to say that Gatsby was for websites and Next.js was for apps. I don't believe that to be true as Next.js has per-page opt-in static generation and on-demand page builds in development. So, it comes down to:

1. I already started on Gatsby over a year ago
2. The plugin ecosystem for Gatsby is a bit more mature at the time, specifically around compressing, converting, resizing and loading images with gatsby image. A bunch of you will say "Just use Cloudinary!" — which I do use for my course platform and I really love — I just wanted this entire project to run without having to pay for anything but hosting.

Styled Components

All the styling is done with Styled Components. I don't go overboard with components, but I do really enjoy being able to scope my CSS and still use descendant classes. Big fan!

I designed the site myself and I'm really happy with the early 2000s hardcore emo kid vibe.

After years of being a salesman of Operator Mono, Hoefler&Co took notice and hooked me up with a free license for my site.

MDX

Most of my blog posts were already written in Markdown, so I went with MDX which allows you to use React components inside of your markdown. Handy for embedding Video players, graphs or anything else that is already a React component.

If this were a client project, I'd likely go Headless CMS like WordPress w/ GraphQL, Sanity, Prismic or similar.

I don't usually recommend someone use markdown for their content, but in my case I want to have all my content on github, easily editable so the nitpickers can fix things themselves instead of emailing me. 😃

Serverless Functions

There are a few pieces of dynamic content on the footer of this site — the latest Podcast, Tweets, Instagram stories and Instagram posts.

I didn't use Gatsby plugins for these because they would quickly become outdated. Instead I load them on the client once the page loads.

For this I use Amazon's Lambda functions. I loved this workflow of needing a "sip of backend", I just created a new file in this folder.

I also use Serverless Functions to generate the Open Graph images. It's just a page on this site that is screenshotted with puppeteer.

Hosting + Building

I'm building and hosting it on Netlify. I really like how it's hooked up to github and auto-deploys. Initially the site didn't build at all because apparently 350 images is too many — more in the next section on how we solved that.

I really wanted to maintain a viewable view-source, so after a tweet asking about nicely formatting the compacted HTML, James Vickery built this really cool gatsby-plugin-prettier-build plugin that hooks into onPostBuild and runs the HTML through prettier.

Seems weird to un-minify the HTML, but I grew up on view source and want to maintain that for other developers learning today.

Pain Points

Likely the worst part of this whole stack is the slow build times. Gatsby must generate each page before hand, so with 500+ pages, that can take some time.

Gatsby images is literally resizing and making multiple versions of each image, so that also takes lots of time. I have about 350 images, which I don't consider to be that many, but it caused big problems.

The build times were getting up to ~25 mins which was really frustrating. Part of me missed being able to cowboy code right on the server and refresh the page to see if something worked (not all of me, relax).

There were two big solutions to this: Gatsby Cloud and Gatsby Parallel Build.

I am currently running on the latter, and big thanks to Jason Lengstorf for helping me get this up and running. My build still takes ~10 mins to build and deploy which is less than excellent, but I have hope for Gatsby incremental builds in the future.

I did try Gatsby Cloud and it was wicked fast. I don't have a good reason why I'm not using that over the previous other than I'm out of time on this project.

Gatsby queries was another huge pain point. Only being able to have a dynamic query at a page level is weird. This means you can't do things like query an image unless you have its filename as a string.

The fact that I need to write a GraphQL query that is 8 lines long to display an image is weird. There are some solutions but nothing that works great. I'm hearing rumbles of a "unified query" in gatsby, so I hope that fixes this!

Gatsby image also doesn't handle gifs. At all. I had to write this component so that I could display gifs. Seems like something that should be handled inside of gatsby-image.

Overall I'm happy with the stack. The few pain points I have are made up quickly by the speed and perf of the site!

All the code to the site is on github. I hope you can learn a thing or two from it!