Where I'm coming from
After years of experience in web development and numerous tries to create my own website, I have finally made some progress. In this blog article, I want to give you some insights into the process of developing this website. If you'd like to know what to expect from this website, check out this article.
Why web dev sucks
The numerous tries failed because of limitations of the tools I used. While I am familiar with JavaScript and some of its frameworks, I figured a more conservative approach would be better for a blog: WordPress.
What is WordPress?
The obvious choice when creating a blog (among other website types) is WordPress, a PHP-based CMS (content management system) that supports countless different themes and plugins, so you can build beautiful sites without any programming (just some custom CSS at most).
Pros:
- Quick start thanks to content management and UI
- Large ecosystem of plugins and themes
- Good plugins for GDPR compliance
- Easy integration with affiliate programs etc.
Cons:
- PHP sucks (it really does)
- Most plugins and themes are quite costly
- Limited control and complex DOM
- Slow (if you have many plugins installed)
- Insecure unless you regularly make updates
I would be willing to pay some money for good plugins, but the largest con for me personally is the limited control. When developing with WordPress, it feels like you always try to find workarounds for the limitations of your own website, instead of just writing code and seeing results. Of course, it isn't that easy, especially if you try a framework or CMS for the first time. But with WordPress, you feel like you never make progress in terms of learning.
After failing to insert an iframe into my WordPress website without making it unpleasable to look at, I started looking around for other ways. One of my favorite beginner-friendly tools is Bootstrap Studio.
What is Bootstrap Studio?
To understand what Bootstrap Studio does, you have to understand the concepts behind Bootstrap itself. Bootstrap is a framework (or a library, according to some definitions) that provides CSS classes that apply a basic, configurable theme, as well as some ready-to-use components like accordions, dropdowns, modals (popups) and carousels (check the docs if you want to know what they do). Bootstrap Studio now takes these components and puts them into a drag-n-drop editor with all the configuration options you would ever need. They also integrate user forms, sending an email with the contents whenever someone submits the form, and a hosting option on a subdomain of theirs (subdomain.bss.design).
Pros:
- Full control over the content of your website
- Integrated Hosting option
- Easy to set up user forms
- Somewhat clean web design without any experience
- Sharing self built components with other devs
Cons:
- No plugins
- Limited choice of predefined themes
- No dynamic routing or content types (no CMS)
- Bootstrap is outdated in my opinion
While it is a powerful tool for building static websites, it would be a hassle to run a blog based on Bootstrap Studio. Even after using it for multiple side projects, I don't have a clue how I would integrate a search function as on this website.
If you still want to give it a try (and I really recommend it for beginners), you can get Bootstrap Studio for free as a student with the GitHub Student Developer Pack.
Then, there are also some no-setup ways to get started: Google Blogger and Squarespace. The reason I only point them out very briefly is because I don't want my friends to make fun of me for even considering them as an option. If you don't want to learn anything and be dependent on a platform that could become paid or more expensive at any point, go for one of these options. But: they are about as complex as a social media account, which is outright boring.
How do I build a website?
After reading about how not to build a blog in my opinion, here's what I did:
Choosing a JavaScript framework
You might have heard about the fact that there are a loooot of JavaScript frameworks out there. When choosing a framework to learn, there are multiple factors to consider:
Ecosystem:
How many extensions are available? Can you implement every feature you'd like? Usually, you have a framework that allows you to do everything on your own, e.g. you can create a script that reads markdown files to create blog articles automatically, or you simply choose a ready-to-use open-source solution. Why would you reinvent the wheel? The ecosystem step isn't as trivial as it seems. More often than not, you don't know enough about different frameworks to estimate the complexity of your plans within different ecosystems. So, you spend hours doing research on plugins or modules and go for the one that seems most straightforward. This step can be simplified using ChatGPT, although it might not have the most up-to-date data and be biased to more prominent frameworks that might not even be your best option. Or it straight up recommends PHP...
Learning curve:
How long does it take you to become "fluent" in the framework syntax and best practices? Or in other words: How intuitive is the framework and how easy is it to write code as a beginner? While there are some differences in complexity, you should be fine with the popular options: React, Angular and Vue.
Rendering type:
Server-side rendering or client side? Or some combination? A traditional static website consists of HTML and CSS, which is sent to the client and rendered without any extra steps in-between. When building a website with JavaScript, the "vanilla" approach is to send a basically empty HTML file and the required CSS, and then build the content with JavaScript. This allows for dynamic applications that are as complex as entire video games. The biggest downside: in terms of SEO, this approach sucks. Search Engine Optimization is the process of adapting your website to be crawled by search engines and ranked as highly as possible. But when these robots request your website, they see an empty page and ignore it, which is why you most likely won't get natural traffic. A more SEO-friendly approach is server-side rendering. In SSR, the JavaScript code is executed on the server before sending the website to the client, meaning the client sees a fully populated website right away (less loading time). One disadvantage is that some features are not available because the server lacks information about the client's device. This can be solved by using a mix of both, but that means that you have to keep track if the server or the client runs a specific code block, which can lead to problems.
Why to choose Nuxt (Nuxt 3)?
Nuxt is a framework that is based on Vue.js and describes itself as "The Intuitive Vue Framework" which I strongly agree with.
The learning curve of Nuxt is rather steep, meaning you learn about the core concepts in basically no time, but, admittedly, it takes a long time to master every aspect of it as more niche features will give you headaches. Nonetheless, mastering Nuxt and solving problems is a lot of fun, and I am convinced that it was a good choice.
The ecosystem allows for markdown content to be rendered as a web page, to be searched, and to be translated, although some features require more complex integration. On the other hand, that means that you have full control over your website. Take this website for instance: It has every feature that I wanted, with more to come.
As for the rendering mode, I have to point out that I absolutely love the approach Nuxt takes. It combines the SEO advantages of SSR with the dynamic content advantage of CSR. First, it sends a basically finished website to the client, including having run the JavaScript code, then, the JS code is downloaded and run, and the client is capable of doing everything that is CSR-specific (like rendering the water animation on my home page, including the easter-egg).
One problem with Nuxt is bad backwards-compatibility. You might think that doesn't matter because you're not trying to migrate a website from Nuxt 2 to Nuxt 3, as you're starting on Nuxt 3. But you're wrong: whenever googling about how to do something, you come across old syntax and incompatible modules. Even using ChatGPT, you will most likely be disappointed by its answers.
You can find the core concepts explained briefly here as I'm convinced they already did an impressive job documenting their framework.
For more insights into which modules this website uses, check out this article.
Other options worth looking at
HTMX
HTMX is a modern take on the old approach: Render an HTML file and fill in the dynamic gaps with API requests. However, these API requests contain HTML code that is inserted on the website. I, personally, don't like this approach because I like thinking in components when building a code-based website.
Svelte
According to the Stack Overflow Developer Survey 2023, Svelte is the most admired frontend web framework (if you ignore Phoenix, which is based on a functional language). So far, it's the only reference I know about; I haven't tried it, but I will, at some point. So maybe, I will rewrite my entire website using Svelte, but for now, Nuxt is just fine.
Mbits.dev branding
Why MBits.dev?
I was looking for a domain for my blog. At first, I wanted to use my full name, like "maxlukonin.de" (.de for Germany). The problem with that is the TLD (domain ending) which limits my audience to German-speakers as it's untypical for abroad. Don't bother claiming it, I already did. Choosing multiple TLDs is too expensive, and ".dev" is perfect for my kind of website. I tried out all kinds of domain names and settled for mbits.dev because I was surprised it was still available, and my first name starts with "M".
The logo
How do you create a logo in 2023? Right, you use ChatGPT, DALL·E 3 specifically. These are the prompts I used:
- "Create a very simple logo for my personal tech blog mbits.dev"
- "there are too many lines"
- "They all look like t*ts"
- "Still way too complex"
After the forth prompt in the thread, I got what I wanted:
The logo is a combination of the letters "M" and "B" ("B" for "Bits"), but can also be interpreted as a playful way of displaying the number 13, which I like.
Then I used Adobe Illustrator's image trace feature to convert it to a vector graphic and created a squircle background. To render it in different sizes, I exported it as an SVG and that's it - a branding was born.
