Re-creating my personal website with Astro, Tailwind CSS, and Alpinejs

Over the years, my personal website consisted solely out of a CV page, build with static html and a css stylesheet. It was a pain to maintain. I’ve tried several technologies (wordpress, joomla, react) but was never impressed with the speed of it. My last effort was using Gatsby, but the build time got out of control and the dependency on graphql and plugins slowed the whole thing down. New kid on the block Astro seems to be a more viable alternative, which gives me the feeling that this time I can keep up with maintaining the site and actually share something more than my CV. Using Markdown to write quickly blog pages seems very promissing to turn my collection of work notes to blog posts. Let’s see how this will turn out in the end.

Technology stack

A few months ago, I came across Astro, a new static site builder in full development, with some interesting promises:

• lightning-fast performance with a modern developer expreience.
• Bring Your Own Framework: Build your site using React, Svelte, Vue, Preact, web components, or just plain HTML + JavaScript.
• 100% Static HTML, No JS: Astro renders your entire page to static HTML, removing all JavaScript from your final build by default.
• On-Demand Components: Need some JS? Astro can automatically hydrate interactive components when they become visible on page. If the user never sees it, they never load it.
• Fully-Featured: Astro supports TypeScript, Scoped CSS, CCS Modules, Sass, Tailwind, Markdown, MDX, and any of your favorite npm packages.
• SEO Enabled: Automatic sitemaps, RSS feeds, pagination and collections take the pain out of SEO and syndication.

Worked in the past with several design toolkits (Bootstrap, blueprint, material-ui, …) and wanted to use another new kid on the block to see how it behaves: Tailwind CSS. I’m not a designer and CSS is not my strong side, but I like really like the way tailwind has come up with a solution that allows me to prototype and build a website, and modify several css snippets found on the internet to integrate effects.

Astro brought me also in contact with Alpinejs, a small lightweight JavaScript framework, that eases the interactivity on a webpage. Not totally convinced yet, but it works :-).

For the hosting, I used in the past Netlify for static websites, but decided now to host on my own server, provided by Hostinger, another learning moment. A lot of options are available on the market Cloudflare Pages, Netlify, Vercel and even GitHub Pages. I still use Netlify for some other projects.

Some learnings

• As expected working with an unfinished product, creates it’s own problems. You have to keep up with bugs and its fixes, new strategies, etc… But as I was able to build the first version in a couple of days, it only showed up when I upgraded Astro and then I was usually able to sort it out in a couple of hours.
• I really like the way Astro approaches things. I do not need plugins for the pages I’ve build up to now. Build time is fast, really fast compared to Gatsby and I do not have to learn plugins, and refresh every time my knowledge of graphql.
• TailwindCSS is very intuitive, close enough to standard CSS. The html pages are larger as with pure CSS as all the styling is included. For me the ease of development makes this a non-issue, but if you want a real minimalistic approach pure css classes will still produce the smallest results. Another drawback is that if you change your style, you have to do a lot of replaces. A good editor can help, but for larger projects, I would advice go another route.
• AlpineJS is lightweight and is powerfull enough for the small user interactions that I needed.

Please be adviced, I’m not an expert with the choosen frameworks and they are tested in a limited scope. There might be betters ways/solutions to my approach.