An Inside Look at the Infrastructure of this Website

Building and maintaining a personal website to me goes far beyond just publishing content. It also involves the tinkering with a multitude of tools and tech, designing an infrastructure that makes publishing content easy and efficient. In this post, let’s delve into the details of the tech stack underpinning this blog. As you can imagine this is the first, more technical piece of writing on this page, so skip if that’s not for you.

Static Sites and the 11TEA Stack 🍵

Static sites are web pages with fixed content coded in HTML, CSS, and occasionally JavaScript, which are delivered to the user exactly as stored by the server. These sites display the same content to every visitor and do not require a database or backend server code. This type of website excels in delivering speed, reliability, and security. For blogs and personal websites, the content often doesn’t change rapidly or dynamically, making static sites a perfect fit.

Eleventy is the static site generator I use for this website. Eleventy prides itself on its top-notch performance. What I also like about it is that it doesn’t tie you to any client-side JavaScript frameworks. It also supports several template languages.

Eleventy is the core of what is called the ElevenTEA stack. Eleventy is used to generate the static websites. The ‘T’ stands for TailwindCSS. Tailwind is a CSS framework that consists of a set of pre-defined utility classes that can be composed to build any website design, directly in your HTML files. For example, we can use several utility classes on a button:

<button class="bg-slate-900 hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 text-white font-semibold h-12 px-6 rounded-lg w-full flex items-center justify-center sm:w-auto dark:bg-sky-500 dark:highlight-white/20 dark:hover:bg-sky-400">
  Launch Website
</button>

And the button will look like this:

While this long list of css classes may look confusing at first, but after some time of working with Tailwind this becomes so convenient.

Lastly, the ‘A’ in the ElevenTEA stack stands for AlpineJS. What Tailwind is for CSS, Alpine is for Javascript. My personal website doesn’t use a lot of Javascript. That’s why I wouldn’t want to use a huge frontend framework. AlpineJS is minimal and has the same useful characteristic that you can write Javascript behaviour directly into your HTML markup.

For example, we can build a simple counter like this:

<div x-data="{ count: 0 }">
    <button x-on:click="count++">Increment</button>
    <span x-text="count"></span>
</div>

See all these ‘x-’ attributes in the HTML markup? Those are the Alpine directives. Our counter will look like this:

Again, it may be wierd at first not having your Javascript in a separate file or inside a <script> tag, but after having worked with it for a while I love having markup, style and behaviour all in one HTML file.

Hosting via GitHub and Netlify

All the code that drives this website is entirely open source on GitHub at julianprester/website. Go check it out and feel free to copy things for your own website if you like the idea of a simple, performant, free and low maintenance personal website. Because static sites are so efficient to host, there are a bunch of hosting providers out there that host your static sites for free. For example, I’m using Netlify to host this website. Netlify enables direct deployment via a GitHub repository, ensuring version control and efficient code management. That means whenever I push an update to GitHub, Netlify instantly rebuilds my website and deploys it. While I use only a fraction of its features, these hosting providers actually offer many more advanced perks like form handling, A/B testing, pull request previews, and more.

On top of that, since everything is kept on GitHub, I can use GitHub Actions to automate things. For example, as you might have seen, I’m sharing interesting links I find on the Internet on the right side of this page. Adding these links is super easy using GitHub actions. My workflow looks like this:

1. I tend to consume short form content on my phone
2. When I come across something I think is worth reading I save the link to my wallabag bookmarking service.
3. I later read the post or article, and when I think it’s worth sharing, I share with my Gotify app, including a short comment
4. A GitHub action which you can find here automatically checks my Gotify every 24 hours for new links, turns them to a markdown file, pushes them to GitHub, and voila, Netlify automatically deploys a refreshed webpage

This may sound quite complicated and you might not know about all the services that I referenced here, but once set up this is an extremely efficient workflow for me. Have a look at this services. I really use them all the time. I might also write separate posts about them and how I use them in the future.

RSS for Content Distribution

Wondered what all these radio icons on this website are about? RSS, or Really Simple Syndication, is a web feed that allows users to access updates to online content in a standardized, computer-readable format. It’s an older technology standard from the early internet days that often goes unnoticed in today’s social-media-dominated landscape. But that’s exactly why I think it is important to keep it alive. In fact, even though few people are aware of it, RSS is very much alive in the podcasting world. Most podcasts still notify their listeners about new episodes via RSS. Although it might seem like a remnant of the old internet, it holds significant utility for content syndication. I’m using RSS in the context of this website to syndicate new articles and updates directly to people’s feed readers. Eleventy creates the RSS feed for me automatically. I construct individual RSS feeds for various content types; be they general blog posts, book reviews, or links. I don’t know whether there is anyone that has subscribed to the feeds, but that’s kind of what makes it appealing to me. I might even implement more advanced content syndication strategies later on using the RSS feeds that could share my updates to social media.

So, there you go! That’s a quick tour behind the scenes of this website, revealing the design principles and technology behind its very existence. Hopefully, it provided an understanding of how this website evolved and how it functions behind the front-end you see in your browser.

Working in Public (as an Academic)

Alright! I’m just going to do it. I’m going to try out this working in public thing. This is the very first post of my journey along which I will be sharing ideas and things I learn about academia, technology, and other things. I’m excited that you’re here too.

The idea of “working in public” refers to openly sharing the process behind creating work, rather than just the finished product. Writers, artists, and other creatives often work in isolation, keeping their ideas and progress hidden until a final polished piece is ready for release. Similarly, as academics, we often focus purely on publishing final papers. But rarely do we provide a window into the winding process that produced those polished products.

Here I will explore “working in public” - sharing not just outputs, but the ideas, struggles, and wins throughout my academic journey, inviting you along for the ride. My goal is to document my experiences, unearth new insights through writing, and engage with you, the readers, to refine my thinking. This purpose goes beyond using a website for personal connection or professional branding. Thinking out loud socially, not alone, should improve the quality of my ideas. Explaining and maybe even getting feedback forces me to confront gaps in my understanding.

Overall, I’m aiming to create an online intellectual home, an idea greenhouse, optimised for thinking and creativity. That means carefully designing the space, tools, habits, and community that bring out interesting work (I’m sure there will be space in the future to write more about some if not all of these). This will most likely be an iterative process over many years, but I’m hoping that the payoff of enhanced abilities will make it worthwhile.

In future posts, you can expect:

• Notes on research papers primarily about social aspects of technology from disciplines such as Information Systems and Organisation Studies.
• Reviews of books I’m reading. I’ve actually been publishing these here already for a while.
• Ideas that stand out on their own and that may eventually feed into research papers.
• Technical posts about software development as an academic and what tools I find useful.
• Curated content and links from elsewhere on the internet.

Ultimately, this blog represents a public idea repository - one that I believe will enhance my creativity and research. Putting fledgling thoughts out into the world accelerates their refinement. And sharing these ideas in public will uncover insights I’d likely never find in isolation.