About This Site

A lot of folks have asked me how I got this site to where it is aes­thet­i­cally, as well as what tools I use. Here's a primer and some re­sources.

Inspired by Duncan McDougall's site, I had de­cided to pub­lish and main­tain a pub­lic To-Do list for this site. Although far less de­scrip­tive than a blog post and of a dif­fer­ent na­ture al­to­gether, I had hoped to find that its pub­lic-fac­ing na­ture kept me ac­count­able in a dif­fer­ent way than I'm used to.

That ex­per­i­ment has ended. You might have been redi­rected here. If not, that's OK too and please con­tinue read­ing. 🙂

The Stack

This is a site built on Eleventy, a fan­tas­tic SSG and heav­ily uses Shopify's Liquid tem­plates styled with TailwindCSS.

I use a cus­tom as­set pipeline based on gulp for:

  • tran­spiling and bundling JavaScript,
  • mini­fy­ing and mak­ing my im­ages re­spon­sive, and,
  • for a few smaller tasks such as man­ag­ing fonts.

I have a cou­ple of Preact com­po­nents on post pages, only used if you're not on Firefox or Safari. I use it to fetch live web­men­tions.

For nicer-look­ing emo­jis, I use Twitter's open-source Twemoji li­brary.

The out­put is hosted on Vercel. I highly rec­om­mend this work­flow as I get to play around with stuff on branch de­ploys with­out hurt­ing the live site. 🎉

Well, that's a gen­eral overview - the rest is just an eye for de­sign and I hope I have in­spired you to make some­thing sim­ply beau­ti­ful of your own. While I have a ways to go be­fore I con­sider this com­plete — and don't we all? — I'm ac­tu­ally pretty happy with where it is to­day.

Performance

I score about a ~99 on PageSpeed in­sights for Mobile and a ~99 for Desktop.

You may also see my Lighthouse scores.

These num­bers do change but stay within the 95-100 bracket, and that's good enough for me. 😉

Resources & Thoughts

During my jour­ney to in­cre­men­tally im­prove my site, I had a few joy­ous mo­ments and some very val­ue­able re­sources to lean on — both of which I'm shar­ing with you be­low. This is only a short list, but I hope it helps you!

Eleventy

  • I love the abil­ity to write my own tags, fil­ters, and short­codes in Eleventy. Moving from Jekyll to Eleventy has opened up so many av­enues for me — even though the move it­self was a big pain. I was de­ter­mined not to start from scratch and in­stead, grad­u­ally port over to Eleventy. I truly have con­trol over my site now — and I love it!
  • Paul's per­sonal web­site is built on an ex­cel­lent di­rec­tory struc­ture.
  • Duncan has a straight­for­ward guide to set­ting up a sitemap.xml.
  • While there are ex­ist­ing so­lu­tions for get­ting a Table of Contents in Eleventy, I'm not con­vinced by them. See 11ty's plu­g­ins page - every so­lu­tion re­quires mod­i­fy­ing the mark­down con­tent it­self.

Design

Privacy

  • Hosting the font lo­cally trans­lates into less track­ing, fewer re­mote re­quests (3 be­fore vs 0-3 now), and faster page loads should the vis­i­tor al­ready have the font in­stalled on their de­vice.
  • Plausible an­a­lyt­ics to un­der­stand what's be­ing read and if you folks are stalk­ing my so­cial me­dia. See pri­vacy pol­icy.

This page was last up­dated on 28 August 2020.