Motivation
The idea to create my own website and blog sparked after watching Network Chuck’s video on why you might need a personal website:
Sure, the most obvious benefit is learning how to make and manage a website. But the more significant perk? Complete control over your posts, presentation, and no reliance on algorithms.
I avoid social media (aside from Reddit and once Mastodon, because it’s open-source and community-based). Social media can be addictive, bad for privacy, lead to bad habits (you get obsessed with getting more likes), harm future reputation (if you said something you might regret), spread misinformation, waste time, and encourage maximum outrage with shorter posts. (This seems to be a trend—Twitter/X allows only short posts, and TikTok favors short videos.)
In today’s world, an online presence is essential. But do I really need social media sites? Nope. A personal website in the form of a blog makes much more sense for me.
Chuck is right — you can use AI to help create your website. But I wanted to learn and build one myself to control and customize it. After learning HTML, CSS, Javascript, and MongoDB at TechLabs Hamburg’s web dev course, I sketched my website (professionals call it a wireframe) and began my hunt for the perfect tutorial.
Attempt 1: Trying Next.js
I needed a refresher, so I started with LamaDev’s tutorial:
I mostly manually copied (the idea being that manually typing something down improves your understanding rather than just copying the code from a repository) the contents in the video - this took a surprisingly long time, since I had to spend a lot of time on debugging 🖥️ (small differences in code lead to big problems that took me many hours to find). I learned how to use a database and auth.js, which enables you to login with a Google/Twitter/Github etc. account and could then make posts and comments.
But
Just as I finished and started customizing, I realized:
- The website was slow and laggy
- The website was relying on external services, Firebase (operated by Google, a company which I really don’t like due to privacy reasons) and MongoDB (which only offers me 512 MB for free, yes I’m a cheapskate)
- The blog would have been limited since it was implemented with React-Quill. I could’ve only used one image per post, which would fill up the database space very fast and the formating options would’ve been quite limited.
Hmm, how could I avoid using a database and have a comfortable set of formating options (including the ability to nicely write code) - well what if I could just use links to images and save them somewhere else? What if…. I could use markdown: Bingo!
This led me to discover Hugo. 🔍
Attempt 2: Hugo
Hugo is a framework written in Go (an amazing language that I’ve already tinkered with) which creates super fast static websites (a web page that is delivered to a web browser exactly as stored), is super customizable, your website doesn’t need a database or any external service, is simple but nice looking and allows for a blog based on markdown! And the best part of it all: it’s open source!
I had to make my website with it! I started watching tutorials on it and only after an hour or two I learned everything I needed to know - it’s crazy intuitive! There are also tons of freely available themes (I decided to use PaperMod) and these can be further modified. Unlike some other website making tools, Hugo gives you full control over everything and I used this opportunity to make the website more to my liking, adding a little typewritter animation and a globe with planetary.js 🌐 - just because I like the globe in Mario Kart Wii (and 7) online.
Hosting
The next item on the Tagesordnung: which hosting service should I use? Network Chuck recommends Hostinger (which is not free, like most hosting services) and Envato Tuts+ recommends Netlify (which alots you the wildest URL out there). So I decided to look for alternatives. Since I have a Hugo website, GitHub Pages was an option, but I prefer to avoid GitHub due to Microsoft ownership.
After some searching, I found GitLab, which is the biggest alternative to GitHub and is proudly open source, is also offering static website hosting. I had to take the advantage and open a repository there. Now I still prefer Forgejo (Esperanto for a place for forging) to GitLab, but I’m at least ok with using GitLab compared to GitHub - however setting the website up with GitLab was still time consuming. I had to read through the documentation, tinker with the hugo code and I realized that Planetary.js is using http instead of https links, which also had to be fixed.
But here we are, I now finally have a working blog 😎 - it was a very interesting and very educational project and I can’t wait to start writing! ⌨️