--- layout: post title: "89 Blog Posts in a Single HTML File" date: 2021-04-22 --- *This is no longer the current setup of my blog*. I have switched back to Jekyll for performance reasons. I'll be leaving this post up as a point of reference though :) - - - This is my personal blog (if that wasn't already obvious). I currently have 89 blog posts living here. But I have done something magical today: All of these articles are rendered inside a *single HTML file*. 🤯 ## What Sorcery is This?! No magic here - I'm just using my own personal static site generator called [PHPetite](https://phpetite.org). You can find all the code and more information about PHPetite on the [official Github repo page](https://github.com/bradleytaunt/phpetite). Please note that this project is still very much a WIP, so go easy on me when pointing out bugs or issues! ## Pingdom Stats Before we get into more details on how everything is built, let's take a quick look at some of my website stats (not that pure numbers are 100% accurate of user experience): - 99 Performance Grade - 951 ms Load Time - 231.3 KB Page Size (thank you Netlify compression!) [See all the Pingdom details for yourself](https://tools.pingdom.com/#5e169d6a82000000) Now the `Page Size` will certainly change as more blog posts are added over time, but if the total webpage size is roughly 230 KB with 89 blog posts, I figure that gives me the ability to add another 200 or so posts before I cross the [1MB threshold](https://1mb.club) I'll deal with how to load in the content more efficiently when that times comes... ## What About Images? Good question. Since a large portion of my articles tend to be focused on design and CSS, visual examples are somewhat important. So how do I avoid loading in all the individual images on every single post into this single HTML "website"? Easy - I don't load any images at all. I now simply set any images that are not included in the current, visible `section` to `display: none`. This avoids breaking things with the RSS feed. Here is an image example of an old Dribbble shot I created years ago:

Aqua UI buttons — **Click the placeholder to load in the real image**
Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source. View full size image.

I have noticed that Safari / Firefox on iOS renders the imagery as broken image links - I plan to look into this further to avoid that confusion. For now it works well on desktop Chromium and Firefox.

## How's the SEO? Probably terrible to be honest. One single file for all blog posts is something Google will most likely frown upon. Whatever - it's my personal blog so I don't really give a shit. ## RSS Feed If you recently added my old RSS feed, I'm sorry, but you'll have to update. The new feed is located at [tdarb.org/feeds/posts.xml](https://tdarb.org/feeds/posts.xml). I made this change to avoid spamming the current feed users. ## Tasty Dog Food At the end of the day, by moving my personal blog over to PHPetite, it makes me more aware of current bugs and restrictions within the project. I feel like this will help me to improve this static site generator even more over time, instead of letting it die a slow death ignored on Github. I hope you enjoyed this little breakdown and maybe even want to try out PHPetite for yourself? 😉