AgilityNerd Blog's New Look
02 Nov 2019
I’ve been using the same blogging software to run the AgilityNerd blog since I first created it in 2004. Since that time I’ve made many custom modifications to give it all its special features:
- Articles organized in “folders” like agility or agility/courses to let you read many articles on the same topic instead of reading articles in date order.
- Search across all articles.
- Tags to group together all articles on the same subject.
- Videos listing.
- Favorite and Featured articles.
I wanted to keep all those features and make it easier for me to write a blog post where recently I would post to FaceBook instead. Some other goals for this makeover included:
- Write articles from my phone, tablet, or computer.
- Looks - the design of the website was uninteresting - I also wanted:
- Full-size photos for all new articles.
- An easy to read layout for phones and tablets.
- Font size adjust based on phone, tablet, or computer screen size.
- Reduce some of the clutter I introduced over the years.
- Web hosting cost reduction.
For any technology nerds reading this, I spent weeks converting the existing 800 articles from custom HTML to Markdown and changed to using the Gatsby static web site generator. Gatsby creates all the webpages at one time and then hosts them on Netlify a cloud service optimized for this type of website. Gatsby really helped with performance and helped me add awesome new features:
- The first page loads in under 2 seconds.
- Any linked pages/images are automatically loaded (“prefetched”) so clicking on a link displays the page in fractions of a second!
- I’m now using the super fast Algolia search engine which shows you the search results while you type along with the matching words to make it easy to find what you are looking for.
- Off-line support. You can read any articles you visited while online when you don’t have internet access. The web site is a Progressive Web App (PWA) and stores the pages you’ve read (as long as you have available memory).
- Now that the web site is a PWA you can save AgilityNerd to your phone/tablet’s home screen.
If you are reading this article via a newsreader here’s how the home page looks with the new mobile-friendly design:
I hope you’ll take a few minutes to look around the new website and let me know how you like it. Please let me know if you find any problems!
Cover photo courtesy of: Markus Spiske
If you enjoyed this article won't you please: 
Thanks!