Rebuilding Stillat.com

July 23, 2017 —John Koster

This is a blog post that I thought I was going to write about ten months ago; this is captured in the following public post I made on Twitter:

Rebuilding Stillat.com | An overly-optimistic estimation for the project!

Well that's almost embarrassing! Even with the fact that it took me about two months to start working on the project seriously (life and work gets busy after all) - that is some serious under estimating. This reminds me of something I first heard in a talk by Matt Stauffer (Matt Stauffer - Sharing Laravel at Laracon EU 2014) in 2014; at the linked part of the talk he is sharing his favorite software estimation technique. The relevant part of the talk is as follows:

"take however long you think its going to take; add one; multiple it by two; and then move it up to the next amount of time"

Matt Stauffer

The Tweet in the image above was posted in September of 2016. Let's take into consideration the false starts (and restarts) as well as building a flat-file comment system that I thought "would only take two weeks or so"... here we are about ten months later - how about that?

I digress.

#Why Rebuild the Site?

My old site was built on WordPress (and there is nothing legitimately wrong with WordPress - there are many great sites built on it and I have recommended it to many people over the years - its just not something that works well with my workflow). So, the search was on: find a replacement for WordPress or build something from the ground up that would meet my workflow needs exactly (my blogging workflow is based around git and Markdown for the most part).

Essentially I needed to find something that made me want to write posts, as well as not make me feel frustrated while doing so. When you have grown to resent signing in to your own site something needs to change.

In my search I found Ghost, and it was intriguing and pretty, but ultimately not what I was looking for. So then I thought "to hell, I'll build my own based on Laravel" and then I found Statamic - which was pretty much everything I would want in a blogging platform.

Statamic ticked all of my boxes: it loves Markdown, its contents can be version controlled and it was built on Laravel (and having experience with Laravel, I figured I could easily override any behavior I did not like - and I am also happy to report, that I did not have to do this very often). What?! At this point the decision was made: I was going to rebuild my site using Statamic. Keep in mind, I had not actually tried to build a site with Statamic at this point - I was simply hooked based on what their homepage said.

Marketing works, people.

#How to Rebuild the Site?

This was a tough question for me to answer at first: if I rebuilt my site exactly as it was, I would be able to complete the project much faster, but I would ultimately be unhappy with the end result. On the other hand, if I rebuilt the site exactly how I wanted, I would blow the timeline suggested by my original Tweet; I figured it was worth it in the long run.

I wanted something that I could easily hack away on, something that I knew inside and out. In addition, I wanted something that would be easy for visitors to use that would also put an emphasis on the content (at this point I was working on two Laravel books, and I wanted to make all of that content available on the new site).

Also, as a personal challenge, I wanted the major website features (those found on the https://stillat.com site) to work without JavaScript. The reason behind this is that I felt I was always reaching for JavaScript to solve a problem that I knew could be accomplished with HTML and some clever CSS; besides, its just a good idea from an accessibility stand-point. There is still room to improve on that front with this site - but there comes a time when you just have to release something; I had already blown a significant amount of time making sure visitors could leave comments on this site without JavaScript - more on that later, however.

#Thoughts on Rebuilding Stillat.com on Statamic

I'll start this section by saying the gentlement behind Statamic have done a great job: the platform just works for the most part (I will say that if you are developing primarily on Windows, there will be some headache; at this point the vast majority of the activities of the site and associated business had transitoned to Apple systems so that didn't matter as much anymore). The process of building a site with Statamic, for the most part, can be described as pleasant if you have basic knowledge of HTML and CSS (they have done a great job of abstracting the PHP side of things away).

The template engine, Antlers, is also very capable and similar to Twig (if you come from a Symfony background). It does have its nuances, however, and the error messages that are generated (mainly error messages thrown by the PHP engine from the generated PHP files) are not the most "developer friendly"; most of these issues can be solved by reading through the Statamic documentation in its entirety.

Read the Docs

"Read the docs". This is something you see in many, many, many places online, especially in the open-source scene. But its true: read the docs and life will become much easier.

After mocking up a design, the process of converting that into a basic Statamic site was fairly straight-forward. The longest part of the process were things that are generally true of every platform and front-end project - ensuring the design responds well on different browsers and platforms, as well as accounting for specific edge-cases in user interaction and the various types of content on the site; the add-on system was of great help here.

The current iteration of the site currently utilizes sixteen custom add-ons to make everything work. A lot of these add-ons are site specific and were designed to handle specific parts of this site, but some were designed to extend the capabilities of Antlers, integrate with a custom e-commerce and billing platform, provide custom Markdown rendering, a comments system as well as many other "utility" type add-ons. The point is: if Statamic doesn't offer a feature in its core offering it can be done with its add-on system, some imagination and a little bit of determination.

I don't want to turn this section into a full review of Statamic (I'm sure this will come in some form in the future), but if you have some time and are looking to try something refreshingly well-built, you should definitely give Statamic a look.

#Comment Systems and Statamic

My old site did not have many comments, but I feel like they are part of the site (even if I don't directly create them), and I learn things from them every now and then; I wanted them to be part of the new site. As stated in a previous section, I wanted the main features of the site to work without JavaScript; and this posed an interesting problem when building the new site on Statamic: there was no flat-file comment system that you can just throw in (and I really didn't want to move the comments to a third-party service and load them with JavaScript).

So I did what any "reasonable" person would do: I built an entire comment management system from the ground up for Statamic (its called Meerkat and you can learn a lot more about it here). In hindsight, it might not have been the best decision since it took almost six months to get it running in a state I was happy with. Having said that, I'm glad I built it and I think the site is better because of it.

#Looking Forward

The process of rebuilding the site has been fun, and there is still much work to be done. However, I am glad that the brunt of the work is done so that I can get back to publishing content again more consistently. I also have some ideas for video and audio content in the future, but we will see how that goes. I am not sure what the content release schedule will be right now, but definitely more frequent than once a year.

I hope you all enjoy the new site and continue on to read through the newly available articles.

Thanks!

—John

Some absolutely amazing
people

The following amazing people help support this site and my open source projects ♥️
If you're interesting in supporting my work and want to show up on this list, check out my GitHub Sponsors Profile.