How v1 of this Site was Built
· 2 min readYou probably don't notice, but this site is nearly as fast as it can possibly be! I did that because I value your data bill and places which are just now getting emerging internet. I'm also a minimalist.
I didn't want to make any compromises on my developer experience, though. Writing should be fun and easy (this is a creative outlet, after all!) and deployment should only take one click. That was my main gripe with my the last version of this site.
Enter Gatsby, a framework to pipeline data (like Markdown) onto webpages using templates. However, the 200kb Gatsby weighs in at for Hello World is just to big compared to the 10kb for my last Jekyll blog. On emerging 3G that's still 2-3 seconds to load 200kb for what is maybe only 5kb of content!
I didn't just blindly adopt Gatsby, though. I value understanding how a system works completely, and there were too many things I didn't understand. I wanted to NOT include JS on pages that didn't need them and to use Preact to make the ones that needed JS (like my retirement projector) even lighter. No one else seems to want that. Everyone else seems to be okay with the bloat.
I wanted to optimize that, so I got down and dirty for two weeks and ripped Gatsby apart to include the bare minimum needed to render. The result is what you now see.
This page is proof that with some webpack customization and learning Gatsby internals, it's possible to make tiny static pages IN REACT that don't even ship React.js to the browser! It's what I've been looking for since it's the most elegant and customizable way to control content I ship to your browser. I understand how every line of HTML, CSS, and Javascript got there (preferably without Javascript), and that makes me want to write more content with higher quality, which should be the whole point of the internet.
If you're into the technical aspects, check out the section below!
How I Made the Site
Gatsby Internals I Tore Apart
Everyone loves a great tear. Gatsby's source was actually pretty clean and focused a lot on browser and cross-platform compatibility.
- app.js (webpack entry point for development)
- production-app.js (webpack entry point for production)
- static-entry.js (webpack entry point for building html)
- gatsby-node.js (webpack config overriding)
This site is all open source, take a look at the README.md where I explain all of the above files!
I've already forgotten a lot of what I did a month ago, but look through the early commit history to get the gist of it!
Cool Features
- React to build interactive and non-interactive pages.
- Bulma as my CSS framework (I use SASS to just get what I need).
- Gatsby-transformer-remark which uses remark on my Markdown files. I'm writing in Markdown right now, and OH BOY it's so much more fun than html!!
- Gatsby-remark-images to resize all the images to reasonable sizes + add a container.
- Gatsby-remark-manifest for the mobile navbar color and resizing my favicon.
- React-helmet to set
<head>per-page for things like the title. It's made by the NFL, who knew.
