At the start of 2019, I rebooted my website with a new simple look, projects, and articles. But since then, a lot has changed and I wanted to give another update on what keeps this site floating.
This website used to be a Laravel application that fetched all relevant data such as articles and projects from a database. However, last year I acknowledged that the site has too few updates to need a database behind it. The idea was to transition to a static website using a generator.
After trying out a few static site generators, I ended up really liking Hugo. This generator allows you to define several layout types and create pages using markdown files. Having all pages being markdown files makes it super easy to edit content without ever having to think about the markup.
It also helped that Hugo is written in Go, and I was very interested in the language at the time. Being able to see how the generator works in the background was good to learn how Golang works.
Out of the box, Hugo supports PostCSS, so the sky is the limit in terms of styles. I still enjoy working with Tailwind CSS a lot, so this was the go-to CSS framework for my website again.
Tailwind CSS is a utility first framework that has a lot of pre-defined CSS classes, just like Bootstrap. Where Tailwind CSS differs is the fact that these CSS classes define style properties in contrast to defining entire components in Bootstrap. For example, if I wanted to create a blue button I could write the following HTML:
<button class="bg-blue-600 hover:bg-blue-700 border border-blue-700 text-white"> Hello World! </button>
Even if you don’t know anything about Tailwind, I’m sure anyone with CSS knowledge can guess what this button will look like.
There’s also no need to worry about the size of the stylesheet, Tailwind has built-in tools to purge CSS classes that are not used in your HTML. And with a bit more configuration fine-tuning, stylesheets can become tiny.
The last part of the puzzle was getting the new website online. I didn’t want to worry about hosting configurations, permissions and deploys for a simple static website, so I searched for solutions others had used.
Netlify seemed to be the most commonly used static site hosting and they have a very generous free plan. I only needed to set up a small config file that defined how my website should be built and link my domain name.
Because I gave Netlify access to my GitHub repository it will now automatically deploy my website whenever I update the master branch. Another feature I discovered last week is that you can let Netlify generate a preview website for any pull-request you open targetted at the deploy branch. This gives a perfect way to test changes on multiple devices.
The above is how the site has been created and hosted for the past few months and I will probably keep it this way for the foreseeable future. The ability to create new articles by just adding a new markdown file is amazing, and utility first styling is so easy to modify.
I hope I helped other developers find some great tools for creating websites.