Astro and Github as CMS

The Problem

Recently I decided that I have to finish work on my website. It’s been under construction for about 2 months now so I jumped into action. This website has to meet 5 of my key expectations:

1. Free
2. SEO Friendly
3. Fast
4. Easy to Manage
5. Good Looking

If You want to watch instead of reading, watch YouTube Video instead!

Choosing Technologies

Choosing technologies was not easy. I previously used Svelte and wanted to do it here also, but I felt that it was a little bit of overkill. I wanted something with performance of Static Site Generator with a possibility of expansion in the future if I would have to. I remember that sometime in the past I heard about this new frontend framework Astro. This is where I started reading more about it and it was everything that I wanted. They even have an official guide how to create a blog page, just perfect!

Creating Astro Project

Creating Astro project is easy, I just had to execute init command and go through the setup

npm create astro@latest

Optimalization for Best Performance

It is crucial to optimize Your website for the best user experience, to get the scans I am using Google Lighthouse This gave me insight in what was wrong with my site. There were a couple different things but the most important in my opinion were heavy images. I was using PNG format and decided to convert those into WebP. To do so Google provides a great tool cwebp that easily images to this new format. I can choose the quality, and after the conversion my results were as high as 85% of savings 237 -> 36 kB!

cwebp -q 80 astro-github.png -o astro-github.webp

Role of Github

Since my Blog Posts will be file based in Markdown format I need some way to manage them, version, add, delete, update etc. And this is when I though Let’s just use Github! It already has everything that I need. New commit will add, update or delete posts that I no longer want or need. This was just a perfect fit together with the Deployment, but more about it in next section.

Deployment

So now two words about the deployment. I had to choose some service which will host my website. Well and it had to be free. To be completly honest I was already set up on Vercel and it has amazing free tier so I just went with it. Vercel came with a nice bonus, I could set up more then just 1 environment meaning that I can have both Production and Test environment. This was just perfect for my usecase with Github! So what I did was, I linked my master branch with Production pipeline which whenever I pushed new commits into master, Production would rebuild and redeploy. I also set up a parallel develop branch which was linked to the Preview environment and here whenever I pushed new commits to the branch or created a pull request, would rebuild my Preview environment so that I could review my changes before going live! This is a perfect synergy!

Wrapping Up

And that was my journey creating my page! I learned a lot of new things about modern websites. Altho I am not a frontend person those things were interesting and gave me a new perspective.