Skip Navigation

How and why I build my (first) homepage

Why?

Approximately one year ago I discovered dev.to and I started reading many posts from many great people. Currently, I have like 100 unread posts from people I follow there, but I mostly read stuff that the weekly newsletter recommends to me. But while I was happily reading, I found out about this new thing, personal pages / blogs. Okay, I knew before that personal pages exist, but I didn't know that there are so many, with so many helpful articles. I still think dev.to is great, but I also think that personal pages are much greater. For this I have to thank zach Leatherman and the IndieWeb, and yes, also his tool 11ty and the twitter account for 11ty that posts regularly new pages / blogs that are built using it. Also, I started a while ago to sort out my Twitter feed, and sort of replace it, with developers I like, and through retweets and discussions I find daily new great developers to follow.

By reading all these great posts and tweets from all these great peoples out there, I wanted to become part of it. Reading posts like these also helped a lot.

December 2019

So in December 2019 I finally decided to really build my web page, and share my thoughts with the world. Yeah I know, I was really quick with building my page.

So, the first thing I've done was buying a fancy domain name. I thought that would force me to finish the site quicker. I mean, at least I didn't drop the project, like many others.

At second, I decided how to host my application. I already knew I wanted to go full JAMStack and choose to go with ZEIT Now because I tested it a few months ago and liked it a bit more than Netlify, for no particular reason.

Then, because I didn't think about how to handle my E-Mail stuff and my domain provider doesn't provide an E-Mail service by default I needed to test some solutions for my “professional” E-Mail. I ended up with ImprovMX for forwarding E-Mails to my private Gmail account and sending E-Mail from my private Gmail account. I also tested some solutions for sending E-Mails from a contact form, but in the end I choose to not have a contact form at all, because I don't think one is necessary for my blog.

Now I had a Domain, a hosting service / page deployment plan and a “professional” E-Mail, but I still needed to build my site (I know, really sad). At first, I thought of using Vue for my site, like I did on a previous project, but I read a lot about SSG's (static site generators), progressive enhancement and accessibility recently and choose to use an SSG for this sake (Yes Vue ones included). I also really liked the idea that my site is well usable without any JavaScript. But which SSG should I use? There are 1000s to choose from, alone on staticgen.com.

So I started to filter out many SSG's by setting some requirements. At first, I decided that the SSG of my choice should work with Node.js, so I don't need to install another programming language. For that Hugo and Jekyll, two of the biggest and most loved players, dropped out.

Then I first looked at some SSG's for Vue, because, like I earlier wrote, I really like Vue. So I looked at the big three:

  1. Gridsome:
    I think this one is on a good way, but at the time it looks like VuePress is better. Dropped it for not having i18n (internationalization) support, which I did not implement anyway.
  2. VuePress:
    The cool tool that is developed and used by the Vue core team, with really “important” i18n support (Okay, for documentation this can be truly important) which can easily be used for a markdown powered blog. I ended up not using it because it has some things/components that I wanted to change but couldn't.
  3. Nuxt.js:
    Nuxt.js — the beloved alternative for the beloved Next.js — can probably do all I want, but I found it to be much more complex than the other solution, which I really didn't want.

It seemed that Vue maybe isn't the final choice for my blog, but there was a new really cool JS framework/compiler in the block: Svelte. It even has a tool for SSR (Server Side Rendering) and static site generation called Sapper, but I didn't like the structure and router from Sapper. Later I found out about a new SSG for Svelte called Svelte Site Generator (cool abbreviation for an SSG) which seems much better and uses Sapper under the hood, but I'm happy with my decision and not going to switch in the near future.

Now I had enough of these damn frameworks (it's a joke, chill), and looked for some unopinionated not framework driven SSG's like Hugo and Jekyll are. I also really like that you can't see with that the final website is build.

Metalsmith looked real good to me and reminded me of Gulp, which i also really like, but it isn't regularly updated anymore.

11ty, the one I finally choose, but it was a wild road. I found it through a talk from Zach Leathermann over Social Media and the IndieWeb and thought it looked really cool and it seemed blazing fast. So I began testing/using it and it worked really well, and I like Nunjucks as templating engine, although you can use almost any available engine. The only thing that bugged me about 11ty was the lack of tooling for CSS and JS, and every solution I found used something like Webpack in parallel with 11ty, what I also don't like. I think everything should be done with “one” tool, two in parallel seem really unnatural to me.

At this point, after testing all these SSG's I was like: “fuck it, I'm going to build my own SSG and give it a bad as name”. I called it s17r (you know what I did there). Then I started programming it, with Node.js and the “right” amount of 'node_modules'.

January 2020

As I was building my thing, and it started to work real good in a relatively short time of programming, I sadly realized that I was building an SSG that has to little difference to 11ty. But this didn't stop me, because there seemed to be still no proper way (for me) for bundling CSS and JS.

But then 11ty version 0.10.0 and this tweet came out, and got retweeted from 11ty, and I had to realize that 11ty is, at least, now better than my unfinished project.

So now I could use 11ty for my CSS and JS bundling through JavaScript templates and the new 'addWatchTarget' function. My setup is relative near to the one in the tweet, but I think I have some neat upgrades, and I plan on writing my next post about that.

I'm still thankful that I started building my own SSG because I learned a lot about Node.js, CLI development and publishing / working with NPM packages, which I hadn't done before.

So, now that I have a setup with that I am finally happy I could start building my website (yay!). I let inspire me by looking at other cool blogs, redesigned my site several times, experimented with typography, build a thew JavaScript's to enhance the experience. A Script for SPA like routing and the fancy cursor for example (I know you might not like it).

February 2020

In February my website was pretty solid, and the design was almost final, although I did make a thew improvements and upgrades, like loading polyfills only in browsers that don't have support for certain features. The big thing I needed to do was, writing content so this page makes sense. I knew what things I wanted on this page, like this post that you are currently reading, and the blogroll section, but I still needed to write these things down, and because English isn't my mother language (I'm also hoping to improve it with this blog) and I am not the fasted writer it took a bit longer, and I set the deadline to the end of February, even though I released it on thirst march (I mean February is pretty short, isn't it?).

I also got to work in the design department at my company for a week and could design that beautiful logo for this site there.

The future

Okay, now you read this post, looked at my very pretty site and are wondered what happens next. Like you must probably assumed, I'm going, or at least, I want, to write much more posts — also shorter ones — and even have some planned. You can subscribe to my great RSS feed. Also, I am going to add a few sections and features to this site, to be updated about that you can follow me on twitter twitter, maybe I'll post also about these.