I decided to create a personal website to highlight some of my projects. After experimenting with a number of different solutions I ended up choosing Astro to build the static site and Tailwind and DaisyUI to style it.

Background - Why Astro?

I’ve used and enjoyed Astro for a few projects, for a number of reasons:

• Islands let you use components from different frameworks and decide if and when they’re loaded. It offers performance increases, but it also gives you a lot of options for experimentation with mixing frameworks. I did a few small elements of AlpineJS when building the site (though none are currently visible), and want to play around with htmx a bit, and the Astro co-creator Fred Schott has spoken about htmx integrating well with the Astro philosophy.

• On the projects where I’ve used Astro in the past I’ve tried to use frameworks sparingly and lean into html/css or vanilla JS. I’m used to React and had been drawn to Astro to reconnect to the basics.

• Astro uses file based routing. Coming from React and wrapping things in the router, I dug this NextJS style simplicity.

• Astro recommends using Nano Stores for state, which seems like a good compromise to bring state into a framework-agnostic site.

Astro for Blogging

Astro comes with a content collections API that lets you pull parts from documents written in Markdown or MDX. It uses remark and rehype to process the markdown and render as html, while also giving access to the document frontmatter, as well as collecting the headers, which will be how I’ll build a table of contents in the future. I’ve wired it up with a GitHub action so it gets published whenever I push the repository, making it function in a sort of CMS fashion, without having to manage a CMS. Source for this site, including the GitHub workflow can be found here.

Tailwind and Daisy

I’ve gotten used to reaching for Shadcn for styled components once again locking me into React. I don’t want to have to build my own styled component structure though, and I like the simple utility of Tailwind, so I’m using DaisyUI.

Tailwind Typography

Tailwind has a nice plugin for styling text called typography that works great with Astro’s markdown rendering. It really simplifies styling free-text.

Editing Markdown

I’ve been using Helix as my text editor for the last couple of months, and I’ll probably do a post on it in the future, because it rocks. While not limited to Helix, while building this site I found ltex-ls-plus, a language server that adds grammar and spell-checking to your Markdown editor. Integrating it into Helix was very easy using the reference Helix maintains on their Language Server Configurations page.

What I’d still like to get working

• One gripe about the Astro content collections is it doesn’t have a built-in way to do post excerpts a la Hugo, so right now my main page displays the description from the front matter. I’ve seen some ways to work around this, but I’m going to get to that later.

• I’d like to have a table of contents for my posts. I wanted to get this site up and running, perfect is the enemy of good, so I’ll get to that later as well. I intend to write up how I made the table of contents sometime soon

• A search bar is definitely something that I’ll want to implement at some point.

• Pagination. Similar to the search bar, it’ll make sense when I’ve got more posts.

So, on the to-do list:

• Excerpts
• Table of Contents 🎉
• Searching
• Pagination

I’ll update this page as I get them working.