Building my Website

After years of just having a placeholder website, I finally got my act together and built a proper personal website. In this first blog post I want to share my motivation for building it as well as its current technical details.

Motivation

I regularly work on various projects as part of or outside work. My main motivation for writing a blog is to share what I’ve worked on or thought about with my future self and other curious people.

I’ve written a few blog posts before on dev.to and code.blender.org. However, I’d also like to write about topics unrelated to Blender and programming. I’m not super interested in using existing platforms (like Medium etc.) to share these posts that I don’t have a good amount of control over. Therefore, the logical choice is to just have my own blog.

Requirements

I’ve given myself a few constraints for my website.

• I want it to be cheap to host everywhere. While I don’t mind paying a bit for the service of distributing my website to the world, I expect that cost to be quite low. I also don’t want to be locked in to any specific provider for anything.
• I want to write my posts in Markdown. This is just what I’m used to, and it works well for me. Recently, I also found out about MDX which extends markdown in a few ways that may be interesting to explore in the future. I want to have the freedom to use that or similar syntaxes as needed.
• I want the entire content to be in a single git repo for easy management and version control.
• I want to have full control over the layout of the website, without starting from a prebuilt theme.
• I want the website to be small. It should not come with a bloat that increases the download size but does not increase its value.
• I want to know some usage stats, but I don’t want to have to show a cookie banner.
• I want no ads. There is no intention to make money from people just reading the site.
• I want to support light and dark mode.

Implementation

This section will explain some of my choices for which technology to use to build the site.

Static Site Hosting

Due to the nature of my content and my wish to be able to host it for cheap everywhere, the logical choice was to build a static website. So a static file server is enough to distribute it to its readers. Due to it being free and simple to set up, I use GitHub Pages for the hosting. I have my domains on Cloudflare and also use that as CDN.

Moving away from GitHub to an open source alternative is a project for another day.

Static Site Generator

Since, I did not want to write raw html/css for each page manually, I was looking at a few static site generators which simplify this process. In the end, I decided to use Astro. I didn’t use it before, but it sounded like a perfect fit. After using it for a while now, I’m still very happy with it.

I really liked that I could start out with a tiny empty site. Due to the way it works, I feel in full control over everything that ends up in the final static website. I’m sure other static site generators support that too, but I just didn’t have this feeling before.

Design

I started out making a rough design of the website with Penpot. While that helped, it became annoying somewhat quickly when I wanted to create a custom component for a card on the home page and adjust each instance of it with a different text. It seems like that’s supported to some degree, but I had some issues with it. After coming up with an initial layout, it was easier for me to just build that layout directly in HTML with tailwind instead of using Penpot.

CSS

For styling, I ended up using tailwind. I’ve come to like it when using it in previous projects. The integration with Astro was super easy.

Dark Mode

While tailwind has the concept of dark mode, I’m not using that currently. Maybe I didn’t quite get how to use that properly yet, but I did not want to have to specify dark mode specific styling in most places.

What I do now is to just have some CSS variables for the color theme at the root level which are changed when there is a .dark class on the root element. The way I integrated that with tailwind feels a bit weird, but it seems to work well. I may still have to iterate on this again in the future.

Images

Besides avoiding large client-side JavaScript libraries, the biggest thing affecting page size is images. By default, images (especially photos) are often way bigger than necessary to display them on the web. Thankfully, Astro has makes it easy to resize and compress images as part of the build process.

This allowed me to tune the resolution and compression rate per displayed image, keeping the overall page size to a minimum.

Fonts

Choosing fonts always feels tricky to me. After some reading and looking at other examples, I decided to pair a serif font for text-heavy content with a sans-serif font for headlines and shorter texts. Specifically, I’m using Source Serif Pro and Lato currently, but that may change over time.

To avoid having to load fonts from external domains, I use Fontsource to embed the font files.

Analytics

While it would be nice to avoid all kinds of tracking, it’s still important for me to have at least a rough idea for how many people read this blog. Google Analytics is obviously not acceptable since that is too privacy intrusive and also requires a cookie banner. I’ve decided to use the Plausible Community Edition on my own server. Maybe I’ll switch over to their managed offering, but right now would be more expensive than everything else I use combined so it’s a bit too much to add for the time being.

I installed it on my “monitoring” Hetzner server which also runs Prometheus for another project already. This way, it does not incur any additional cost for me.

The gathered analytics data is available publicly.

Performance Metrics

I’ve used Lighthouse to analyze the current state of my website. Initially, there were still some things to fix like images being too large and being loaded too late and some accessibility issues. Now I’m happy that I got a score of 100 on every metric. Not sure if it will be possible to keep this score as more content is added later, but I’ll certainly try.

Cost

The running total cost for the website is currently comprised of:

• 10.44$ per year for the jlucke.com domain.
• 3.92€ per month for my server running Plausible.
• 0.60€ per month for the ipv4 for the server running Plausible.

That said, all of these costs I’ve had before making this website already. So the additional cost is zero. The domain I use for a long time for my email and the server I use for monitoring over other stuff already.

Conclusion

Overall, I’m quite happy with the outcome. Now I just have to fill the site with more content, starting with this first blog post.

The source code is available.