Techstack of This Website

I want to talk about the techstack of this website and why didn’t I go to another techstack than this.

At first, I wanted to create my own website and produce content in it. I assume you already know that I am trying to write blog posts regularly. So, the task was simple.

I looked for the best tech stack for a couple of days and finally decided to go with Astro. It’s not as well-known a framework as Next.js, SvelteKit, or even Nuxt.js. But if your website is content-driven, you definitely should consider Astro first.

I mentioned fullstack frameworks above but I had considered SPA’s too. But still, for my blog, there is no need to manage the state. As I said, I want it to be simple as hell. So, I removed database from my requirements list. I could use HTMX and a server but even this is a too complex for a blog website. I had known about Astro for a long time, so I decided to watch a tutorial. After the tutorial, I said this is exactly what I need.

Your blog posts are stored directly in the project. It has built-in image optimization, markdown support, countless types of integration (i.e tailwind, most of the SPA framework). So, that’s why I chose it.

Also I added a little interactivity. I have made a dark/light modes, in case of someone needs to read the posts outside. I didn’t use so much JS. Actually, switch button is a checkbox. When you check it (click it) what it does is:

const themeCheckbox = document.getElementById(
  "theme-checkbox"
) as HTMLInputElement;
const html = document.documentElement;

themeCheckbox.checked = html.classList.contains("dark");

themeCheckbox.addEventListener("change", function () {
  const theme = this.checked ? "dark" : "light";
  html.classList.toggle("dark", this.checked);
  localStorage.setItem("theme", theme);
});

Pretty simple, isn’t it? I didn’t want to use any SPA, or even any SPA framework inside of an Astro project, just because of this little interactivity. I accidentally answered TS question with yes, and after that, I was too lazy to remove it. So I have TS too, just for the props.

At first, I went in the wrong direction with the analytics. I considered 3rd parties to save my page views. I actually did it. I was counting my page views with Xata. But after some research, I found something called Beam Analytics. It offers a free tier of up to 100,000 page views per month. So, I dropped Xata and went for Beam.

Now, I can count my page views and write my posts in markdown format. But I don’t use this feature while writing it. I use Scrutch for that. Its also free web app that works with markdown seamlessly. You don’t even need to authenticate or anything.

Since my website is an SSG, I don’t even need to use an adapter. Which means I can think my website as its just pure HTML. Wherever I can put my HTML file and host it, I can host any SSG Astro project. For hosting, I am using Netlify.

As a result techstack is:

• Astro
• Tailwind
• TypeScript
• Scrutch (for writing posts)
• Beam Analytics
• Netlify