What is Astro?
” After a decade of plugging my Wordpress website into Page Speed Insights and seeing a bad score because of excessive JS, I was ready for a zero JS approach.
Astro is a modern web framework that allows developers to build fast, content-focused websites using a combination of static site generation and server-side rendering. It is designed for speed, and to be easy to develop with. It does require HTML, CSS, and JavaScript (JS) knowledge to be able to properly use it unlike using a content management system (CMS). With my rudimentary knowledge of those languages, I felt comfortable enough that with a quick course on Astro I could get a simple enough website up and running. I have over 10 years of experience working with WordPress, which makes websites extremely easy through what you see is what you get. The downside of WordPress is that it gets deceptively complex quickly, and it is much more difficult to deliver pages fast.
Another reason for not going with WordPress is that it’s not within the Cloud Resume Challenge’s rules to use WordPress. The creator of the challenge, Forrest, specifically calls out hosting a static HTML website. However, he has suggested modifications to the challenge, one of which is using a static site generator (SSG) to make the website. I originally investigated his suggested SSG, Hugo. However, when looking up Hugo, I kept getting suggestions for Astro. I had no clue what Astro was, but after watching some videos and poking around the documentation, I was intrigued.
Astro delivers zero JS by default, but that doesn’t mean you can’t have client-side JS. This is where Astro islands come into play. Individual components inside of a page on Astro can be interactive islands within the page. They are ‘hydrated’ with JS when you tell it to load the JS. As Astro explains, “think of an island as an interactive widget floating in a sea of otherwise static, lightweight, server-rendered HTML.” JS slows websites down because the browsers must load and execute JS to render the webpage. Having lots of JS causes the browser to waste time running scripts instead of rendering the web page. After a decade of plugging my WordPress website into Page Speed Insights and seeing a bad score because of excessive JS, I was ready for a zero JS approach.
Learning Astro
I’m a fan of online learning, if they also have good hands-on demo lessons that aren’t just code-alongs. Astro is relatively new; version 1.0 was released in August 2022. That means there aren’t a ton of options for online courses, but with a little bit of research I found one that would cover everything I needed. The course covered content collections, islands, components, and the overall structure of Astro. With a focus on functionally learning Astro, each section had multiple lessons where the labs were designed with a requirement framework, and the student would do the coding. An instructional code-along was available, but it was strongly encouraged to put fingers to keyboard and try on my own first.
The course that I signed up for did a great job of teaching how Astro components worked and tied into creating islands of interactivity inside of a page. This would be a key piece to getting the visit counter working properly on this website. After about a week of working on the course, I had completed all the sections. I now had all the basics needed to set off on my own and get my own site created.
Ready for Lift Off in T-minus…
Being astronomically themed, of course I had to sneak in a little pun. I was on the launch pad, and ready to blast off on my own speedy website. I could create my own website from scratch, or I could work with a template and customize the website to fit exactly what I needed. I’m a fan of working smarter, so a template it was. A few commands into the console and I had a fully functioning website up and running locally with a nice basic template. Now for the fun part of tearing out the template content and replacing it with my own content.
First, the Resume Challenge outlines that the website must host my resume, my certification badges, and provide a view counter. With the requirements in mind, I merged my experience in building websites with my newly acquired knowledge of Astro, setting off to construct this rocket ship of a website. New pages, new images created, a logo, content typed out, navigation tweaked, styling adjusted, links inserted, and lots of back-end code adjustments went into getting the site ready for lift off. I saved the view counter for last because I figured I should save the hard part for last. Once again Forrest suggests a mod here, which was using a unique visitor counter instead of a view counter. This would be the perfect time to use Astro islands, which is exactly why I chose Astro.
My first course of action was to create the counter outside of Astro in a blank project just to make sure I could get the basics working properly. I knew enough JS to get some basic code down, but this is 2024 and with the AI craze I couldn’t ignore the technology. By integrating my own code, snippets from the web, and AI support, I assembled the frontend and backend code for view counts and unique visitor tracking. In about an hour, I had the counter working and it was time to move it into Astro. I took the frontend JS code and used AI to convert it into React for the Astro island component. I didn’t want to spend more time learning a new language just to get this project done, and wanted more experience with AI so I subsequently had AI convert my backend code into Python that runs within lambda. In less than 30 minutes I had prompt engineered the front end and back-end code to different languages, migrated it into the website, and had it working locally with mock AWS tests. What likely would have taken me numerous hours on my own I accomplished in a couple hours through the power of AI and knowing how to leverage search engines.
As a short aside, I understand that publicly available AI are not secure, and you should never input proprietary information into them. This is a simple personal website project, I utilized the tools to generate very basic code for me through prompt engineering.
Lift Off!
At this point I had the site customized, as well as the unique visitors counter functioning locally. I stuck the backend code of the counter into AWS through some click-ops in the console and confirmed functionality to the frontend. The front end is hosted in a container running inside of ECS. If you want to read the full setup and launching of the website, read the Cloud Resume Challenge post as it goes into all the details. This post is just to cover my progress in Astro.
What about all that AI talk?
This is a little AI themed P.S. for those who want to hear more about how I used AI in the project. I used mostly Copilot through the VScode extension to generate code, which worked well for the simple code I was using it for. Chat GPT 4 in the browser was used for content questions, and general questions about programming. AI allowed me to rapidly build this website and all the features that it has. I was able to translate code, generate new code, and ask it questions to make sure I was going down the right path. The key thing is understanding the prompts you are giving it, and knowing enough about the outputs it gives you. There are times where you must recognize that what is generated for you just isn’t correct and won’t work. If you don’t, a long rabbit hole of AI hallucination will waste hours of your time.
One example is how I used Copilot to help with serving different images based on the light or dark theme toggle. Because some images won’t look correct if they are in a light theme or a dark theme, I wanted to be able to serve different versions based on which option is toggled. Asking Copilot to generate code to serve images based on whether light mode or dark mode was toggled originally generated JS to put into the page that dynamically generates the blog home. Seemingly not a bad idea, however with Astro it’s not going to work properly. First the code it gave wouldn’t have worked, and second the idea is to use less JS, not more of it. A simpler solution without going down a deep rabbit hole of JS was to use CSS and add JS to the theme toggle to switch between dark and light images. This means you do need to be smart about your content because you will be serving two images per single image tag. To avoid serving two images everywhere, I have it set where if dark or light mode isn’t necessary for the image, it will only serve a single primary image. By not just blindly following the AI suggestion, I likely saved myself hours of time trying to get the JS working, and likely never getting it to.
What did AI help me with? Here’s a quick list:
- Unique visitor counter in React
- Unique visitor counter backend in Python
- Images displayed based on dark or light mode
- Creating unit tests for both front end and back end