Starting with Astro

From earlier post:

Finally we need a platform and if you can read this post it’s because I made a choice after a long time of indecisiveness (a polite word or procrastination). I didn’t want to start again with WordPress, if only because I was bored of it.

Discovering Astro

This post will end up a bit techie but I’ll start with some non-techie stuff about my choices.

Benefits of a Static website

A static website is hosted in the plainest way. Pages are ready to be served and stored on the most efficient possible server.

In fact, that’s how the web started. In Web 1.0 most pages were static and edited directly in HTML.

Meanwhile we had an evolution by using CMS ( Content management Servers ) like Wordpress or Sharepoint. We also used more powerful tools to produce pages like Webflow, framer, Wix or Squarespace. Frameworks were also introduced like React, Next.js, Vue or Svelte.

That was a major evolution and huge gain in possibilities.

But

The drawback of such evolutions is that there is a growing lag between the click and the result. Work is being done in the browser, files are computed and fetched from the servers. Even with ast Internet and powerful servers, it lags.

It lags so much that you feel it, a small wait between each click until the new page is again clickable. Google also detect it and penalize slow sites, always more. Only yesterday they introduced yet another measure: Interaction to Next Paint (INP), a metric that assesses page responsiveness.

So, if you want to rate high in searches, make sure your pages come fast.

Premiss

I saw people I follow on Twitter starting to talk about Astro and how good and fast it was. I looked but the setup seemed obscure. I’ve been bitten several times by being an early adopter of new techs

I decided to let it go and stick to te good old proven Wordpress.

Than people nearer from le migrated blogs and websites to Astro.

The last one was Kevin, @Dolearning and it was precisely after receiving automated feedback from the Landing Coach, my new app. We found that the recent NextJS framework was not fast at all.

He shared his experience, a staring command and his repo.

That was all I need to try.

Converting from Wordpress?

the migration was a dream! There’s a npm package to convert WP export.xml to markdown and then the Astro build is so fun.

That’s how I started

npm create astro@latest -- --template basics

What are the key points so far?

  • All files are processed, checked before being published
  • There is a component system wic encourages reuse and modularisation.
  • It’s based on JSX like React. This means HTML mixed with javascript
  • Everything is packed to the maximum: styles, scripts,
  • You run a local server to see your changes instantly.
  • Blog pages can be written using Markdown which is simplified format very much like plain text with formatting options.
  • Astro is easy to extend. I added for example a system to build my landing pages section by section.

Roadblocks

My biggest roadblock so far has been publishing on AWS Cloudfront.

It is supposed to be made for that but there is a small trick.

I simplify a bit.

Astro is generating every page as a directory with an index.html file in them.

On the web an address ending with a / or without any extension can be understood as a page or as a directory. If it’s a directory, the server checks if there is a page in the directory called “index.html”.

But cloudfront is only serving stuff, it doesn’t think. Web Servers think more but are also slower.

I use s3 (buckets) as origin for s3.

The whole thing is very fast and very cheap (like 50 cents / month).

I had 3 solutions to fix my problem.

  1. Serve the s3 bucket to cloudfront as if it was a website. “index.html” would be added automatically.
  • Drawback: The security settings are somewhat obscure. Slight risk of being hacked and causing extra expenses.
  1. Add an edge lambda function on cloudfront running when fetching pages from s3. Looks cool. it doesn’t happens often so costs are very small. I was stuck in the security/role model I didn’t understand fully.
  2. Easy: do the transformation when syncing data from my disk to s3. That required writing a 15 lines script to ddo the transformation, for html files only.

I chose 3. I’m sure I control it completely. It happens on my disk at publish time. It costs nothing and has zero security risk.

That’s all folks. That was my story about switching to Astro.

The app will also use Astro. Static pages and moving content appearing in Islands. Why? because I can choose it. It’s optimum and opens new possibilities.

Find Astro their website: (https://astro.build/)