Why I chose Astroid.build for this personal portfolio website

In this post I want to explain the criteria I had for choosing a framework for my personal portfolio website and why I chose Astro.build 🚀.

Most people I know who are no developers choose Wordpress for their website. That’s a valid choice in most of the cases based on their background and available time. They build nice websites with shops and other integrations on it. But I don’t need most of it and I want more freedom and not spend my time to learn how PHP and the Wordpress ecosystem works.

Criteria

I have to admit and that’s important for my decision and understanding of this post: I’m no experienced frontend developer, I just worked with React and Angular in smaller projects. Though I built my first personal website already in 1999 👴, but some new frontend frameworks came up in the meantime while some core technologies stayed.

I didn’t want to spent too much time in investigating and trying out different frameworks i.e. the framework should be easy to learn. If you are an experienced frontend developer and familiar with a specific framework, your criteria might be different.

Second criteria for me: It should be a mainly static website, because I just want to present content, at least in the beginning. Static website means the website consists entirely of (static) files, no content is generated dynamically on server side e.g. pulled from a database.

A great advantage of a static website is, that hosting is quite cheap, because you don’t need a classical server (only a webserver but that’s most times included). And I like to start just on plain AWS S3. It’s safe by design because there is no user data stored and non-existing servers can’t be attacked. It’s more performanent than a CMS and database backed framework like Wordpress. But I’m a bit careful with this last statement as Server side rendering (SSR, which is also supported by Astro.build) could also be very quick.

Disadvantage is you don’t have an web based CMS. Still I want to manage content easily and don’t want to invest too much time in design choices and definitely I don’t want to reinvent the wheel.

On the other hand I want a modern and flexible framework, which I can easily extend for whatever I need. E.g. easily add a contact form or some more dynamic stuff.

Another criteria was the support of Multilingual websites, because I was annoyed of Webflow which I had to use once and which surprised me when I found out it didn’t have that (you need to clone pages or integrate a dynamic translation service). This proved to be a more soft criteria for my website, so if that’s really important for you, please first check best practice in Astro for that.

Static site generators (SSG)

It seems I needed a static site generator - that was a new term for me - and there are some.

I didn’t start googling “static site generator” and then investigating the different ones. I just heard and read what other people were using and which frameworks were interesting for clients. But now when writing this post I did a bit of research and found that the SSGs I considered are on most lists of “best SSGs”. Some websites mention still React-Static, but it’s dead ☠ unfortunately. Interestingly Astro.build - the SSG I’m using now - is missing on these lists. Astro.build was recommended to me by a friend and is e.g used as kind of successor by the former maintainers of React-Static (see their last post) which means a lot because they are deep into that topic. As mentioned before and as it’s obvious from the long list of SSGs below, I don’t have the time to learn and investigate every SSG in detail, but I hope my thoughts will help you find your own best solution.

Hugo

First, for a different website, I tried out Hugo. It calls itself

The world’s fastest framework for building websites

I chose the theme Airspace Hugo which has Multilingual built-in and Forestry CMS support and customized it to my website. That worked well, but when starting now to build my personal portfolio website I thought again about it and Hugo felt very static with it’s Go HTML templates. I suddenly wanted a framework which has “native” React support.

Gatsby

So next I checked the Gatsby website, because I had heard about it being used at clients.

Gatsby enables developers to build fast, secure, and powerful websites using a React-based framework and innovative data layer that makes integrating different content, APIs, and services into one web experience incredibly simple

I had only a quick look and discarded it due to two reasosn:

• It has a lot of features and potential integrations I don’t need, so it seems it’s a complex framework and I have to learn a lot. To be fair: That’s just a guess.
• Secondly it has a pricing plan which starts of course with a free plan, but my experience is that you ALWAYS need one of the features of the paid plans. And the first paid plan is already too expensive 💰 for my small static website.

NextJS

So then this time I really googled for something like “React static website” and I came across NextJS. I heard about it before as NextJS skills were requested by clients, so I had a deeper look and it immediately felt very developer friendly and powerful.

The React Framework for Production. Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

I mean to be honest it sounds even more complex than Gatsby and isn’t only focussed on static content websites. The pricing you find is related to Vercel, who drives NextJS but offers mainly CI/CD and hosting for websites.

There are a lot of templates made for blogs on the official page. As I didn’t want to spent too much time in designing and I’m not a designer anyway, I searched for more templates. Finally I found Tunis - Personal Portfolio Template and bought the license for 14$. I started setting a new color scheme which was quite easy and I put my profile image in there. Then I started to replace the template texts with my own texts. That was the point were I got a bit annoyed. The content looked ugly, because I just could change content in JSON files which wasn’t possible to style in any way in the template.

Jekyll

I used Jekyll once for a website, because Github pages supports it.

Transform your plain text into static websites and blogs. Simple - Static - Blog aware

It seems like a predecessor to Hugo but simpler. If you have really low requirements e.g. for a demo site and just need some structure and content templates, I would recommend it. And: You get free and simple hosting via Github pages !

Astro.build

Now, this website uses Astro.build.

Astro is the all-in-one web framework designed for speed. Pull your content from anywhere and deploy everywhere, all powered by your favorite UI components and libraries.

It was very simple to setup and understand the structure. I’m using the Astro Bolierplate theme. It supports Blog posts via Markdown, TypeScript and React styled with Tailwind CSS.

I just adapted three .tsx files for the main page and uploaded some images. Styling via Tailwind CSS is also super easy. Then I wrote blog posts like this one in Markdown and linked three of them, which describe my project experience, to be teasered on the main page.

I just scratched the surface of what Astro is capable of, but it’s already enough to setup this personal webpage. First more complicated thing I checked was to integrate a React component which has a state depending on the reader’s scroll position on the page. That’s how I found out about the (Shared State)[https://docs.astro.build/en/core-concepts/sharing-state/] recommendation in Astro which is Nano Stores.

So that’s what I will try next and blog about it here.