Creating my Blog with Astro

Being a developer for over a year, I thought it was time to start a blog. After such a short time, there is still so much to learn. Sharing this process with others makes it more fun and keeps me motivated.

This way, I can combine three activities I enjoy. Those being learning, coding, and teaching.

With my love for learning, I decided to use a new framework for this project. And the choice for the framework was Astro.

Why Astro?

Having heard from Astro, it was the first framework I've looked up. And I'm glad I did. The framework focuses on static sites. And the support for MDX was everything I needed to start and manage my blog.

The ever-growing ecosystem of Astro offers a great selection of packages. Most of which are addable with the npx add command. Adding them that way, they’ll need no configuration to work out of the box.

And don’t forget JavaScript, or more like the lack thereof. With the focus on static websites, there's no need for lots of code and complexity. Astro offers opt-in complexity. Making it easy to get started and later reach for new features and APIs as I go.

Using less JavaScript also results in better load times and better performance. Improving my ranking in search engines and the user experience.

Components

Like most, if not all, JavaScript frameworks, Astro also offers components. They are a great way to organize my project by having code logic in the same place as the HTML that belongs to it. At the same time, I can reuse them in different parts of my project, thus reducing the code I have to write.

For example, the links in this post are components:

---
const {(href, label)}: Record<string any> = Astro.props; const target: string | null = href.charAt(0) === "#" ? null : "_blank";
---

<a target={target} rel="noopener noreferrer" {...props}><slot /></a>

With Astro, I won't have to stick with Astro components. Astro supports the optional integrations of other frameworks like React or Vue. These options give me the freedom of choice.

MDX

Something like my link component isn’t addable in vanilla Markdown. That problem gets solved by using MDX. MDX is an extension of Markdown that combines Markdown with components. It adds more possibilities for the creation of content.

As of writing this, I don't have any components in my MDX files. That doesn't mean I don't use any for my blog posts.

They aren’t used in an HTML fashion, though, but rather replace the default anchor tag. I can achieve this by passing custom components to my content. That is a big deal for me, improving the writing experience. It lets me write regular Markdown and replace default HTML tags outside the MDX file.

Utilizing components in my posts isn't the only thing I want and need. Building a development-focused Blog, I also want to display code snippets. With Markdown itself, it is already possible to use code blocks. But they don't look pretty and only do one thing: display code. Ecosystems like Rehype and Remark can expand the functionality of Markdown files.

Using the rehype-pretty-code plugin, I can add a custom theme for my code snippets. For this, I’m using Palenight with a custom background color. I can also add titles to the snippets. By adding a title, I can display the origin of the code or its programming language.

I also use the combination of rehype-slug and rehype-autolink-heading. These plugins add ids and anchor tags to the headings of a post. Now the visitor can click on an anchor and share the modified link. The link will open at the selected heading element. Because sharing is caring.

The Design

As of writing this, the design is very minimalistic. The excuse for it is that it’s only a blog, and the reader should focus on the content while reading it.

But, being honest, there is still a lot for me to learn about designing a great UI. And while doing that, I want to have a place to share and write down what I’ve learned.

This page should display my skills and what I've learned. Why not start from zero and change it over time with improved skills and new ideas?

Hosting on Vercel

I enjoy hosting my sites on Vercel. It has a great free tier, the UI is modern, and I never had any problems using their service before.

Astro offers the option for SSR. The @astrojs/vercel package enables the deployment of projects that use SSR to Vercel. As I plan on adding more complexity over time, the need for SSR will arise. With this package, I won’t have any problems deploying it to Vercel.