The Setup and Technologies Behind This Website
Posted on
In this article, I want to give you an overview of the technologies I decided to use for running this website.
Vue.js, the JavaScript framework
For quite some time JavaScript frameworks have taken an integral part in modern web development. They enable developers to build dynamic and feature-rich web apps, while drastically reducing the code complexity needed to provide such experiences.
Therefore I've wanted to learn a JavaScript framework for quite some time now. Although a large portion of my current work is web development, none of the projects I worked on utilize modern JavaScript Frameworks. The development on my personal website consequently seemed like an awesome opportunity, to try one out. The supposedly lightweight and simple way of Vue.js, therefore, seemed like a perfect fit.
That being said, in reality, the mostly static content of my website doesn't need a JavaScript framework. For the most part I currently only use its components to better structure my project. Still, using a JavaScript framework will enable some flexibility for future extensions of my website, and even if not, I'll surely learn something through using Vue.
Tailwind CSS
To support me with my styling I chose the Tailwind CSS framework. I've tried Tailwind in some personal projects before and really enjoyed the development process using it. Tailwind's utility-first approach allows for easier flexibility and enables me to create a more unique style. In contrast, websites utilizing more traditional CSS frameworks like Bootstrap often tend to "inherit" the default style and therefore lose some of their originality.
And in case I still need a Bootstrap-like component, in conjunction with Vue.js components it's quite fast to write a similar component myself.
Gridsome, a static site generator for Vue.js
For a content-heavy site like mine, it obviously would be tedious to write every single blog post, including its preview in the overview section, using HTML and CSS. Therefore I surely needed some kind of content management system (CMS). Because traditional CMS' like WordPress are dynamically rendered, they would have needed some form of dedicated hosting. The cheap (in my case free) hosting of static sites, combined with their performance benefits, therefore, lead me to static site generators.
Because I also wanted to use Vue.js Gridsome came like a native fit. I also considered Hugo and Nuxt, but Hugo just doesn't seem to integrate with Vue.js very well and Nuxt, which is primarily marketed for its server-side rendering capabilities seemed a bit overly complex. This left Gridsome, which seemed like a good fit. It's a static site generator, advertising its speed and rich integration with a variety of data sources.
The blog posts are currently written using Markdown and the transformer-remark plugin. But should I need more complex content management capabilities it would be easy to integrate another CMS like Strapi with my existing site.
Plausible Analytics
Naturally, I'm interested in some usage statistics of my site. How many people visit my site? How do people find my site? Which articles do people find interesting?
Despite the obvious Google Analytics, as a free and by far the most widely used analytics tool, it also comes with several drawbacks:
- It has many features I don't need and therefore could be overly complex for my use case.
- Visitors could have privacy concerns with Google tracking their data.
- Google Analytics needs to set cookies. Therefore it also needs a cookie banner with user consent.
Then I found Plausible. It's a fully open-source and GDPR compliant Google Analytics alternative, developed by two European developers and hosted in Germany. It doesn't save any user-specific data and doesn't profit from the collected data. Because I like their idea and want to support its development, I decided to use it with this side and got a Plausible subscription.
For full transparency, I also made the gathered data public. You can find it here: https://
Firebase Hosting
For the hosting, I chose Firebase hosting. There isn't too much to it. It has a generous free tier, is highly reliable, performs well, and runs on Google's content delivery network.
Of course, there are other alternatives like Netlify or Github Pages, but I already used Firebase before and in the end, the free static web hosting providers are mostly similar in their offerings.