“I need a new site…”

About 6 months ago I decided I needed a new portfolio website. At the very least, I wanted to evolve from a simple lookbook layout to something that had room to describe my design decisions and process. That meant either overhauling and adding features to my existing custom Wordpress portfolio, or starting from scratch with…something…

The old Wordpress site was still functional. When I developed it, I had utilized Advanced Custom Fields and worked in plenty of options to include individual case studies in a variety of layouts. However, it had been a year since it had been touched. I had gone as far as to create a pseudo SPA-like website with fake lazyloading and page transitions - something I had always wanted but was never able to figure out.

The early requirements

While Wordpress has served me well all these years, developing in it had always been a major pain point. The API was confusing, with features constantly becoming deprecated in favor of very different improvements. I think it all stems from Wordpress continually evolving on top of something it was not originally designed to do. My colleague Shane was early to clue me in that there’s better CMS alternatives that have since been designed from the ground up to make templating a breeze. This sent me down the rabbit hole…

I knew I wanted my site to be:

• Fast: a typical pain-point with WP on shared hosting, where I have normally had to add caching plugins
• Secure: another typical issue with WP, mainly due to it’s popularity
• Easy to template: Not a dealbreaker for WP with ACF, but my research suggested it could be much better
• Easy to edit: Ideally I would like the next CMS I learn to be usable for freelance work

The later requirements

Fast-forward a month or so and my head’s spinning. There’s so many options now. Not only that, but the rules of web development had changed as I knew them. This was possibly the biggest obstacle facing me thus far, and I struggled many times to simply give up and move to a platform like Squarespace or Cargo for this project. However, web development had always given me an edge in my professional career, and after giving it a lot of thought, I decided I really didn’t want to lose that. It’s also just a lot of fun creating your own website from scratch, so I dug in (more on that later).

Some additional requirements added:

• SPA: I wanted my site to be a single-page application
• Modern: I wanted to learn new technologies and use them in a performant manner
• Version controlled: I wanted to do this right, and learn Git at the same time

The new stack

The below stack is mainly where I ended up. I believe it satisfies the majority of the requirements noted above, with maybe the exception of being used on more complex websites.

• Hugo Static Site Generator
• Node / NPM (package manager)
• Netlify + Github for hosting and CMS capability
• Highway.js for SPA capability
• Lazysizes.js for lazyloading

With Hugo I am able to create and proof templates much more quickly than I was able to on Wordpress. Hugo ships with it’s own high-performance web server, and it’s written in Go, a robust and fast-growing programming language. Hugo is also secure, using a virtual file-system to build the site. Because the resultant live site is static HTML, it’s also extremely fast.

My site is on Netlify, which provides hosting for static websites. With Netlify I am able to perform continuous development and deployment by pushing to Git. Netlify builds the source for me based on my node packages. Netlify also provides a CMS solution that makes it easy to edit content directly from a browser. While it’s not as robust as a full-fledged CMS, it works well for smaller brochure-type sites like this one.

For my SPA library I was between Barba.js and Highway.js. I ultimately went with Highway.js because it seemed easier to use. After working with it some more, I’m realizing that they’re probably fairly similar. Highway.js is created by Dog Studio, which is cool. Using Highway forced me to figure out how to use ES2015 and module exports.

I needed real lazy-loading this time. I quickly discovered Lazysizes.js since it’s so popular. Lazysizes is nice because it comes with a ton of features and is regularly maintained. It’s SEO friendly and works pretty much out of the box with some minor tweaks. I discovered lazysizes when learning how to utilize responsive images.

Next Steps

Overall it’s been a difficult, but worthwhile exercise, and I still have a lot to learn. I’ll be documenting specifics about solutions that I’ve discovered for this stack, Hugo in particular, as I continue to make improvements to this site. Static site generators hold a lot of interest for me in terms of creating unique, bespoke projects for practice as well for clients. This environment allows me a lot of leeway to play with things such as CSS animations and learning javascript.

I plan to experiment with Gatsby framework next, which is based on React. Following that, I’d like to eventually revisit Wordpress to examine all the new features they’ve added in hopes of using it as a headless CMS.