Start From Scratch Summer

Kevin Ampuero | 2022-05-22T17:43:45.803Z
PersonalProjects

Here we go again. My yearly tear down of a perfectly fine website. This will be rebuild number four. Maybe it isn’t a complete rebuild, since most of the styling and content will remain the same.

Every Summer I look at the website I built for my wife’s fourth grade class and I plan a few updates to it. The last three times, this resulted in me moving to a different development tool.

The first iteration was something just to get a website up. All of the information was static and not particularly specific to the class year. It was just enough to prove to my wife that I could create a simple site for her. This was hosted on Tighten’s Jigsaw static-site generator. It was perfect for what I needed, since I was familiar with Laravel and the Blade syntax. I was able to quickly publish a site. I also leaned on Katerina Limpitsouni’s amazing unDraw Illustrations, which provided a wide range of inclusive images to drive out the look and feel of the site.

Once the Covid-19 pandemic lockdowns started to take effect and teachers started working from home, we knew the website would need to play a much larger role in her day-to-day communication with parents and students. I wanted to allow my wife the opportunity to make regular blog posts, but the way the site was configured, she would have to write the posts in a Google document and send it to me so I could copy it over to the website.

Being a longtime lurker in the Laravel community, I’ve seen the Statamic CMS and was just waiting for a chance to give it a try. This seemed like a good application for a CMS, since my wife could connect to it directly in order my create her posts. This was the second rebuild of the website and it came with a fairly substantial design refresh. When the work was complete, we ended up with a great admin dashboard where we could add parent and student resources, update class information like schedules and remote learning etiquette, and a more fun front-end design that was more kid-friendly. I went for bigger text, a fun new mouse font, and more color. While the updated design was a hit, the admin dashboard was still a bit too much to work with for someone that just wanted to write a simple post with some pictures here and there.

The most recent rebuild was just a migration back to Jigsaw, with the new design coming along as well. In an attempt to scale down the complexity of adding new content, I reached out to Netlify CMS to create a simple admin dashboard that served just a means to add content to a static site. This was fairly simple and felt like a familiar practice the third time around. Sticking within the Laravel ecosystem helped ease the migration pains.

The most recent Summer came with the addition of a student-facing website that allowed the students to spend points the receive throughout the school year for good behavior. This required a server and a complete Laravel install, powered by Laravel Livewire and AlpineJS. This was a fun project because it was my first live website with user interaction in a very long time. It has been a huge hit with the kids and I’ve worked to add more interactions and feedback to show the students when their redeem rewards, read new books, or participate in class polls.

With the addition of the server-based application, the desire to pull everything under the same application has been strong. The more I analyze the two websites, the more I feel like this is an example of a “Marketing” site and an application site. There was a quick Medium article by Justin Jackson of Transistor.fm that suggested keeping these two sites separate and it felt like it applied in my case as well. When I mapped it out, the only parts that I want to expose to the base website that is currently static are the blog posts, yearly events, and the schedule. There are a few other things that are updated maybe once or twice a year, but those shouldn’t dictate the decision to make the site require a server.

So, that’s where I am now: I want to keep my static website, but allow it to reach out to an API where it can retrieve the few items that might change. I can do this using any technology I want, but I have been considering creating an API on my Laravel application so I can build a solution inside my application for my wife to create blog posts and update the sections that change frequently. Then my current static site can use JavaScript to reach out and pull those changes.

To make things more fun (?) I might switch my static site to SvelteKit. This should keep me busy.

🥸

Copyright 2024 - iHaveQuestions.dev