Run your website for less than $15 a year

Let’s start with a problem statement

As a product designer, my career needs to keep my portfolio up to date. For the last 10 years, it’s been a struggle for me as there were many different solutions to achieve that.

One of them was all-mighty WordPress which is a convenient option if you like to stir the mud of PHP templates or use overcomplicated plugins, lots of unrelated code and in most situations – terrible performance. I still have nightmares for my past freelance projects where I had to adapt WP templates to the design and it was always off. Forget about using Github to maintain your code without another set of plugins, Dockers and other crap.

A few years ago Webflow (Squarespace and Wix) came out to the market. It was a nice change where I could use a true solution for the WYSIWYG approach. Until I saw the pricing... I understand that these companies invest tons for the development and to stay afloat subscriptions are required (and of course – paying for them is nonetheless as appreciating their hard work). For me spending $25/month for a website that has <50/month visitors was a pointless expense. Sorry, Webflow!

My passion for front-end tech has a long history and I still remember my first lines of CSS back in 2005. I always wanted to fully own the process of building my website: ideate, design, code, publish, maintain but there was nothing on the market that could satisfy my need for simplicity and darn cleverness of use (including dummy-friendly documentation with examples other than "let foo = bar;".

That (professional) life-changing tech came with the early version of Sketch (for web- and mobile-ready design) and Vue.js.

Simple goals

Cost-efficient

As I wanted to keep the cost to the minimum my goal was to only pay for the domain. My portfolio doesn't have that much traction but it spikes whenever I look for a new job. For like 10 more people.

Dynamic and interchangebale

Every past role generated 1 or more projects to be put into my portfolio. As I didn't have a proper way of keeping track of it (which means two things: laziness and expensive/ridiculous CMSs). Take WordPress for example: to build a structure (model) of the portfolio entry, I had to hack it out, find a free plugin that creates custom fields and extract it somehow with PHP. With Webflow this perk adds another $12-25/month to keep the "backend" in place.

Sometimes I want to have enough flexibility on working with collections of data (e.g. projects, categories, articles, etc) and fetch them in different places on my website to create a user loop (which I call a set of activities that keeps the user on the page by suggesting continuous content, e.g. view the project THEN read a blog post THEN check out the about page).

Interactive design

I'm 34 (as of 2021) and I still remember this hideous process of designing pages in Photoshop. I tried to switch to Illustrator but with the same result. This has changed when I got my first MacBook and installed Sketch (2014, which means I was a forced-by-Adobe masochist for around 10 years).

That completely changed the way how I approached the designs and sets of iOS or Material Design libraries helped create platform-valid app designs very efficiently (reduction of time from 8 hours to 1 hour – more time for 🍻 with teammates). Prototyping in Sketch was very basic (Version 3.2.2.) but still better than Adobe!

This gave me more time for going crazy with ideas, spent more time on planning, reviews and testing rather than moving things around (and with the Photoshop's performance moving a group of layers to the top because your PM asked you to do so allowed you to go for a cigarette and grab a coffee).

Sketch was good for a while but they fucked it upon being MacOS-only. The new player was slowly releasing the first versions of their new design tool – Figma.

Figma is an all-in-one wonder for designers. 3 years ago it was sluggish, buggy but it's normal for juvenile software. It has to mature. And they did it! When I worked at Adyen we happily migrated from Sketch (imagine a Github repo with sketch files for ~20 designers, some of them didn't even know how to pull, commit and push changes – we had such a mess!).

Figma is what I was waiting for during my entire career. The basic plan is free, they introduced many cool features which has completely changed the way of working on app designs: AutoLayout, Plugins, Libraries, Styles and now a fast-growing community that shares beautiful freebies. Prototyping (or going spaghetti) deserves a separate article.

Feasibility of the code maintenance

I'm not a software engineer but because I worked with a bunch of incredible developers at PayU I've learned how to use Github and what "continuous deployment" is. That knowledge was important as I remember uploading my first WordPress changes through the FTP, and commit was a simply "overwrite" prompt in CuteFTP. Oh, god...

My pain-reliever came up a few years ago, it's called Netlify and I love it. Documentation is clear, the pricing model is fair and the overall experience of deploying your page from a repository works like a charm. Of course, I've tried Heroku which has some support for WordPress CI/CD but I didn't want to touch it. For a lazy person like me, I wanted to have a very simple and straightforward way of triggering builds for my project.

And now it's time to talk about Vue.js, Webpack and other goodies.

Choosing the "right" framework

Before we start here just wanted to mention that after exploring React, Svelte (recently) and Angular, Vue was my framework of choice. The syntax looks very human, the structure of the .vue files is clean and there are many ways of creating and upgrading the project (e.g. Vue CLI).

Webpack is a set of configurations that allows to pack and optimize static assets, merge, clean and minify code, run other handy tasks with a simple set of commands. In most cases, you don't even have to touch it.

However, the clean set up is meant to build proper reactive apps (web applications like dashboards, etc). This is why I was lucky enough to find a framework for a framework – Nuxt.js. It allows creating new static (e.g. About page by creating about.vue file) or dynamic pages (e.g. Blog > Article by creating /blog/_slug.vue file) and it generates routes in the background. Pretty neat, right?

Having full control of the content models

That was the key. I wanted to have the ability to own my content structure, the ability to modify and upgrade it without losing existing data and best of all – have fun doing it. I've explored a few SaaS on the market for that, and the first one I've used was Prismic.io. For my basic needs, it was alright but as soon as they've changed the logic for the fields my entire project was failing to build. Contentful was too expensive and pretty dumb (sorry, guys!)

We broke up 💔 and I moved to DatoCMS.

DatoCMS, a small startup from Florence, Italy, has created a content platform that allows you to model whatever you want. Single pages (Home, About, Contact) or Collections (Gallery, Projects, Articles, Rockets). It also has a brilliant way of building re-usable blocks and optimize every single page for SEO. And the best of all (drumrolls...) – GraphQL explorer.

Stop reinventing the wheel

Writing custom CSS can be a long and painful process. And as we have so many different devices, different screen sizes it doesn't matter if the final implementation is 1:1 with the pixel-perfect design. The responsiveness is the key and the final result is good enough if you remain as close as possible to the given design (this applies to landing page designs, there's a different story for the complex web apps). This is why I started to use TailwindCSS to use a utility-first approach where I can control my design tokens from the one config file and then play with different variants of it while implementing my designs.

Step-by-step improvements

And the last goal – being able to deliver the website in small steps without breaking too much. This is why a combination of Figma, Nuxt.js and DatoCMS has finally allowed me to enjoy the process of creating and publishing without having nightmares.