I hooked up Eleventy to WordPress API

I’ve got some plans for this site. The main thing I want to do is bring my music collection into my main site, instead of having a subdomain. That thing has been a “prototype” for over 2 years now…

The problem is that site uses Notion as its data source. I really like managing my music collection in Notion so didn’t want to change that, but integrating that data with WordPress templates might have gotten messy. I also really like WordPress as a CMS for my site. It makes posting a doddle.

I found myself in quite the conundrum so it had to be headless time!

A failed attempt at Next JS

I thought I’d refresh my knowledge of Next JS for this project. It seemed like a good idea on paper, but in the [checks notes] last 3 or so years since I last used it, it’s gotten way too complex.

Authoring code is fine, as it always is, but I was getting build errors on Vercel because I didn’t use their <Link> component and dared to use a — y’know — HTML <a> tag for links. That’s piss poor and is almost certainly causing long term damage for developers. The bundle size is hilariously large too, so I’m not into that.

With all that in mind, mixed with my very short attention span, Next JS was put in the bin.

Step up, ol’ faithful Eleventy

You simply cannot beat Eleventy. Y’all know I’m already a super fan, so I was always going to end up back using it for my personal site. The problem I had with Eleventy before was having a big ol’ folder of markdown files for posts. That’s not a problem this time because I’m using WordPress as the CMS.

WordPress sites come with a REST API built in, so in Eleventy, all I had to do was create a collection that pulls my WordPress posts and builds them as static. You can see that code here if you want. All in, it took me about an hour to grab my 11ty starter, plug in my existing CSS setup and grab posts from WordPress. Like I say, you simply cannot beat Eleventy.

The other cool thing I can do with Eleventy is replace the client-side LastFM widget in my footer with a rendered one. I now pull the data with a JavaScript data file and then render it in a little partial. I’ve got a cron job that runs a build every 3 mins that keeps it all up to date.

The music collection I’m bringing into the main site is already using this approach with JavaScript data files to grab Notion content, so porting that over should be pretty simple too.

I made it all open to folks to look at

I thought it might be a good idea to share the source code for my site. It always made me nervous when it was on WordPress because I come from the bad old days of WordPress sites getting hacked. With Eleventy though, it all feels safe.

The only thing that doesn’t feel safe is that the fellas (it’s always the fellas) love to rip off other peoples websites, which is absolutely not cool. The power play I have for that is no one is gonna want a site that looks like mine lmao.

Feel free to look around the source code though. You might learn something new!