It’s been a while since I’ve had a personal site and I never felt like one was really necessary, but I recently decided to launch one again for several reasons:
- To expand my online presence and promote my projects
- To organize and share my thoughts
- To document solutions to various programming problems
- To host small tools, experiments, and other side projects
After deciding to make a personal site, the next step was figuring out how to build it. Between content management systems, static site generators, various web frameworks, and more, there are a lot of options to choose from when looking for the best way to build a personal site. I ended up picking Astro, but I explored several other options along the way. Besides Astro, the main technologies that I considered using were Ghost, Nuxt, Jekyll, and Hugo.
Ghost
I’ve heard great things about Ghost and have been curious to give it a try, especially after the recent WordPress drama left me with zero desire to use their biggest competitor. However, I quickly ruled it out. I like that it seems relatively developer-friendly, but I knew that I wanted a solution that was more easily customizable, would allow me to keep my site in version control, and would generate a static site that I could host for free. If I ever need a full-fledged CMS, I might revisit Ghost.
Nuxt
I’ve used Nuxt for several projects recently, and I enjoy working with it a lot. However, Nuxt is primarily intended for server-side rendering (SSR), and this site is mostly static. While Nuxt can generate static sites with the command nuxt generate and I have personally used it that way, whenever you use a tool for something outside of its main purpose things tend to go less smoothly. I also have a few small annoyances with Nuxt. For example, it’s not possible to simply edit the <head> of your document directly. Instead, you have to use nuxt.config or useHead to make changes to it. For these reasons, I was ready to try something new that was more tailored toward static sites.
As the more popular React-based analog to Nuxt, I should briefly mention Next as well. I didn’t personally give Next much consideration because I prefer Vue over React. But given its similarity to Nuxt, it likely shares many of the same advantages and disadvantages. Like Nuxt, Next is primarily intended as an SSR framework, so there may be some challenges when using it for static sites.
Jekyll
I really wanted to like Jekyll due to its status as the OG static site generator (SSG), and because I appreciate Ruby’s elegant syntax. However, I was scared away by tales of cumbersome setup and dependency woes. Jekyll requires a Ruby environment and uses Bundler for dependency management, something I didn’t want to deal with as someone who isn’t primarily a Ruby dev. Plus, Jekyll’s build times can reportedly be much longer than those of more modern alternatives.
Hugo and other modern SSGs
Widely regarded as one of the best static site generators, Hugo came closest to beating Astro for me. It’s distributed as a single binary, so it’s straightforward to use with no complex setup. It’s also known for building sites incredibly quickly. Although its Go-based templating would take some getting used to, I didn’t see that as a major drawback. It seems like a great tool that’s well-suited for totally static sites, but in the end Astro’s flexibility for partially interactive sites is what gave it the edge for me.
I also considered Zola, a Rust-based SSG similar to Hugo. However, with a smaller community and lack of distinguishing features, I didn’t see much reason to use it over Hugo unless you were a big fan of Rust. Eleventy also crossed my radar, but it seemed to have less polished documentation and examples than Hugo or Astro, which made it less appealing.
Astro
Astro is a relative newcomer and I had never even heard of it until recently, but the buzz surrounding it online piqued my curiosity. After doing some research, I found that it struck a nice balance between the strengths of Nuxt and traditional SSGs. Unlike Nuxt, Astro is built with static sites in mind first. But unlike traditional SSGs, Astro also makes it easy to add interactive elements incrementally. You can include just the JavaScript you need and integrate popular frameworks like React, Vue, and Svelte via official plugins. You can even mix and match frameworks within the same project. That’s an enormous benefit for my use-case, since I plan on hosting small tools and other side projects on this site. Astro seemed like a great fit for my needs, so I decided to give it a try.
Getting started with Astro
Setting up Astro was fairly straightforward. I skimmed through the building a blog tutorial to get a general idea of how things worked, then just ran npm create astro -- --theme <theme-name> and figured it out as I went. Everything is pretty self-explanatory, and I’ve been able to accomplish a lot just by working off of the examples in the theme files. The theme I started with is Astro Nano, and there are many other themes available to choose from.
Astro supports Stylus, which I appreciate. Simply install Stylus (npm install stylus) and then use <style lang="stylus">. However, I was disappointed by the lack of support for Pug (formerly Jade), or any other templating language. Instead, Astro components use JSX, which although powerful is something that many people dislike, myself included. There is a proposal to add Pug support, so I hope that gains traction.
Final thoughts
So far, my experience with Astro has been very positive. The developer experience is smooth, the documentation is good, and everything works as advertised. At this point I have no plans to try building the blog with anything else, and I’m likely to use Astro again for future static or mostly static projects. The only major drawback I’ve found is the lack of support for Pug or any other alternatives to JSX, but I recognize that this is a minor concern which other people may not care about. In my opinion, the biggest selling point for Astro is the ability to progressively add only the JavaScript you need as you add interactivity. If you’re looking for the best way to build a mostly static site with a few interactive portions, I can highly recommend Astro.
Resources
If you’re still deciding on a framework for your site and want to read some other opinions, here are a few posts that I found helpful:
Jekyll vs Hugo vs Gatsby vs Next vs Zola vs Eleventy
Jekyll vs Astro
Choosing Astro over Jekyll and Hugo