Starting with Wordpress

When I started thinking about doing a blog, I initially thought about using WordPress. I dug around for awhile looking for various WordPress themes and even tried a few, but I found them all to be bloated for what I needed. I'm not trying to sell anyone anything, collect email addresses, display photo galleries, etc., so all this extra functionality would be lost on me.

I'm also particular about how I want things to look. From a design perspective I like things that are clean and minimalistic. There are lots of themes that fit with that description, but I found them all to be really limiting. I wanted more control over the look and feel of the site than was possible with a theme. I considered writing my own theme, but that seemed like overkill unless I was going to do it more than once.

I realized that what I wanted to do was build my own site. I'd rather edit CSS directly than have to fight with the Wordpress block editor or use a page builder like Elementor. Fundamentally a block is just a CSS container like a div or an article, so adding the Wordpress abstractions on top of basic CSS just felt like more work in the end.

Moving to Astro

While researching options, I came across Astro. I had used Node.js on a couple of projects, so it felt somewhat familiar since Astro is built on Node. Unlike a regular Node app though, there's no creating routes and creating handlers for them. Simply editing an Astro file turns into a web page with the same name, which is pretty slick. Astro also watches for changes to files it knows about, so any writes will automatically be read by the server. This is a huge time saver because it's not necessary to manually reload the page every time to view changes.

Where Astro shines though, in my opinion, is with Layouts and Components. Layouts allow you to build a page with a static design, but then dynamically add the content. For example, I created a Post layout that defines its width, height, colors, etc. but takes its content from elsewhere. This creates a reusable pattern, that once configured, allows me to focus just on writing and not messing with CSS. It's analogous to working with Templates in WordPress and using a Content block to add dynamic text.

Components allow you to define functional blocks of a website that can be repeatedly used. They can take arguments to customize how the component is used. For example, I could build a component for each block on the sidebar. The arguments passed would be the icon, a header, and an unordered list. A more common example would be a generic HTML button that can be customized for different use cases. If I were to build a number of different project with Astro, I would put them all into a library so I could reuse them over and over. There are also libraries available online if you don't want to build them from scratch. In building this first version of the site, I only built on component, which is a navigation menu. I didn't end up really needing it though.

Downsides

A downside to building your own site from scratch is configuring all the CSS that's required to properly size and style things like the main header, a sidebar, footer, etc. I have to admit this took me longer to do than I expected since I was only vaguely familiar with flexbox. I had to spend some time digging in the documentation to get the look and behavior I wanted, but it was a good learning exercise should I need to do more web work in the future.

Another downside is that unlike a true content management system (CMS), I have to manually hard code some things to display the latest post and add it to the sidebar. It wouldn't take much Javascript to automate this by reading the files on the disk and then rewriting the .astro files accordingly. But right now I only have a few blog posts, so it's not a big deal.

Overall I've enjoyed using Astro and now have something that's easy to maintain while giving me full control of the site. It fits in the spot between a full CMS and building from a static site generator like Gatsby or Eleventy. The next step will be creating a GitHub pipeline to automatically deploy changes made in my local dev environment to the public facing server.