So I used to have a website already, but it was very boring, expensive, quite slow, and not very easy to customize. But it did the job, and I didn't know a good alternative, so it was fine for a while. However, at some point I got an idea on how to improve this in a fun way.
Vue.js
Last year I became interested in learning Vue.js for work, as its quite suited for rapid prototyping which is something I have to do a lot. Especially the idea of reusable components is quite interesting, as reusing components saves a lot of time when creating similar new websites.
Free fast website hosting
A second reason for making a new website is that I learned of a new type of webhosting. Normal hosting provides a webserver somewhere where you can upload your files just like a harddisk connected to your computer. Instead, companies such as Netlify, Vercel and Google Firebase offer hosting that is connected to a Git repository. Instead of uploading your website to a server somewhere yourself, the idea is that you have your website in a Git repository and the webhosting company deploys it directly based on that code. This primarily caught my interest because most sites offer this service for free! For my Wordpress site I had to pay ~€8 per month for hosting, so switching to this free hosting saves me almost €100 on a yearly basis.
Another advantage is that this type of hosting is fast. Very fast. Normal (cheap) webhosting has a focus on a specific country where most of their servers are, and any visitors from outside your country have much slower loading times. This Git-based hosting instead uses a Content Delivery Network, which basically means there are servers all around the world that can serve your website and content super fast.
Too good to be true?
So what's the catch? Well, a Git-based website is basically a static website. The only job of the server is to send the HTML, CSS and images to the user, and aside from that it does nothing. So no database, Ajax calls for additional data fetching, etc. This means that something like Wordpress (which I built my old website with) doesn't work, as that uses a server for dynamically fetching new data, and a database for storing all content.
Instead these companies often also provide serverless computing capabilities and content managment services to fill this gap, such as services for databases, payments, sending emails, and authentication. Not something I need at the moment, but good to know you could also build a completely free and fast webshop in this way.
What this Git-based approach did mean was that I had to rebuild my website, and it had to be a static website. So no more Wordpress (luckily).
Creating the site: technical stuff
In the end I opted for using Vue.js (which I wanted to learn anyway) with Node.js, Nuxt (to make vue.js static), and Tailwindcss. Nuxt can generate an entirely static version of your Vue.js website, which is perfect for Git-based hosting. In addition, it is also possible to make a blog using the Nuxt Content module, using which you write blog posts and pages in markdown that are then converted to static HTML pages by Nuxt. This type of website is also called a headless CMS, as there is no GUI (headless) but still provides a Content Managment System (CMS) that enables you to write blogposts etc. One very cool thing is that with Nuxt Content it is still possible to have a search function that searches all pages including their content, even though you don't have a server!
A fantastic tutorial on making a website with Vue.js, Nuxt and the content module is this one. Aside from some minor debugging with config files etc, it was all I needed to create this site in a couple days.
This may have been even faster if I opted for using something like Vuetify that provides many ready-made material-design Vue components. The big issue with this is that material design is becoming a bit boring, as almost every website at the moment uses it.
Instead, I opted for using Tailwindcss which does not do the styling for you. Instead, it is a so-called utility-first CSS framework where you (almost) never have to touch any CSS yourself, and instead assign classes to HTML that directly apply the specific CSS you need. Like below, which sets padding, a background colour, text to uppercase, and a font size and font color:
<h2 class="p-3 bg-fuchsia-900 uppercase text-white font-medium">
Latest blogposts
</h2>
Compared to having to define custom classes with specific css for each, it is also more efficient only the CSS is includesd that you actually use in your website, instead of including a large always-the-same styling file with a lot of code you don't use (like Bootstrap).
TailwindCSS is quite a liberating way of styling a website as you don't have to worry about giving HTML good class or ID names with reusable styling, or worry about a CSS file becoming a mess. You only have to think about styling a website as you want. This also works super nice with Nuxt, as you can easily run your site locally and any changes are automatically detected with the website reloading. The entire design workflow is improved.
The only downside is that you have to think up the styling yourself, which may still be a challenge when (like me) you aren't a designer.
Creating the site: The content
With all the technical details out of the way and the fact that I was rebuilding the website anyway, it made sense to make it fit my specific needs as well. As such, I ended up with two content types:
- Projects. A project is, well, a project. Something that I am probably working on for some time. These pages provide a general description of the project itself, aswell as a framework for other content to connect to. Example of a project: the Pass me the butter robot.
- Blogposts. Blogposts contain detailed information on a specific (sub-topic), either related to a project, or a seperate idea I had to get out of my head. Example of a blog: how to do the speech recognition for the pass me the butter robot.
Some extra care was taken in the ordering logic for the frontpage projectslider. Instead of only looking at the creation date of a project, I also take into account what the date of the most recent blogposts is that are connected to that project.
I also added Disqus comments to have some way for interaction with site visitors. My favorite part of the website is most likely the animation for showing these comments which really fits with the entire rick and morty theme:
Try it out yourself by opening the comments below!
