I have a silly little website on Neocities called Whistling Nose Games, Music and Multimedia. During some downtime last year, I spent a few months relearning web designCSS, JavaScript, and absurd game/music creation. It has an intentional nostalgic vibe. I’m going to renew it. A friend, whose design skills are phenomenal, pointed me in the direction of Star to help me with my redesign. So I tried it and it turned out pretty good.
Astro is a web framework for static websites
There’s a lot going on under the hood
Promoting itself as “a framework for content-based websites”, Astro is a JavaScript web frameworkwhich is just a fancy way of saying that it helps users create content-heavy static websites by separating the interactive components of the site from the content itself.
It collects everything you create for your site (components, layouts and Reduction files) into HTML and CSS on the server side, rather than the user’s browser handling code execution. Watching it work in real time is pretty amazing. Use a file based routing system to generate the URLs based on your file layout. does it a lot of the work behind the scenes.
It is feature-rich and essentially guides users in creating their first website with the software. There are also integration features to build with AI (using a Claude CLI Integration sounds interesting), but I didn’t try them for this project.
Before you begin, take one of Astro’s courses. I reviewed them before creating my page and they helped me tremendously.
I’m using Astro to do a test build for a website update.
A single page test can help inform the new website address
Updating and revising a personal website doesn’t exactly take priority over other work. I discovered that my web counter is not working and I feel like my home page is a little basic for the wide variety of content it links to.
Also, I made a virtual museum exhibit for my wife as an anniversary gift and wanted to add it to the site before the end of the month. I finished the project, added it as a “secret link” and realized my site needed some more polish. I also had a visitor contact me about a broken code.
So Astro will (hopefully) help me fix it.
One of the ideas I had for my site was to create a silly, tongue-in-cheek list that no one would take seriously. So the scope of this experiment with Astro is to build that specific page and test it before adding it to Neocities.
Installation occurs within the command line.
Or you can use the online version of the software.
To install Astro on Linux, you will need first install Node.js. Wear node -v and npm -v to see if you have them. If not, you can install them with sudo apt install npm in Linux Mint Cinnamon. Grab the version correct version of Node.js using curl.
Installing and adding different modules to Astro is done in the terminal. After installation, Astro creates a directory for your project and you can add dependencies and frameworks (all of which are listed in great detail on their website) as you see fit. I used the command npx astro add alpinjsadd the Alpine.js framework to my project. I’m a big fan of the framework and it’s what I’m going to use to rebuild my site’s visitor counter.
Astro also offers a version that you can use in the browser, if you decide to go that route.
I carefully planned my layout before even loading Astro.
Preparation is key to getting the most out of the application
The content of the page already exists, so I’m only concerned with the design and functionality. I want to give it an interactive element, like a downvote button (there won’t be an upvote button because I think it’s more fun that way). Design-wise, I want an unsaturated, static late 80s TV vibe.
I want muted gray borders, a soft sepia tone background, maybe some static TV overlay (but not too distracting), and some sort of washed out green for the text. Headers will be purple or magenta, to more closely align with the theme of the page. Bold (or strong in CSS) should be amber. I’ll also do something interesting with the headers.
with star, I have the power to do all that and more.
Once I started, construction was quick.
I developed a complete website in half the time it normally takes me
When you install Astro, it creates four different folders in a directory called src. These contain:
-
Assets
-
Components
-
Designs
-
pages
He Assets The folder is where you place your images and any fonts you want to use. Components is for your reusable elements (thinking buttons, navigation, etc.). Designs and pages keep your CSS and the actual content of your web page respectively.
I wrote the original list in January, so I converted it to Markdown and made some modifications. I then saved it as an MD file using Micro in Terminal. Astro looks at the file name instead of the file type, so No should be saved as HTML.
From there, I built my CSS elements, which I saved to the Designs folder and made a very simple JavaScript button that converts to an ASCII skeleton that I found on the ASCII art file. I took some comic book images of each character and converted them to grayscale to better fit the aesthetic. I threw them in pages folder instead of Assets coexist with my Markdown file just to keep things simple for a quick test. Later, I will move them to Assets when I’m finishing the page.
Editing is intuitive. You will be able to see the changes as you make them. I opened Micro to edit my file in one window while keeping the site open in the other so I could track changes as they happened. Saved a ton of time troubleshooting issues or bad code.
To verify your code, run npm run dev. When it runs, its contents are gathered and open an instance of localhost in your browser. From there, you’ll be able to see what your new page looks like and immediately inspect it for any issues. If you need to make adjustments, simply return to your src files, modify the file in Micro and then watch the browser update.
As far as my page goes, it took some time, effort, and tweaking, but I finally had a final result that I was happy with and that will probably end up published on my site.
Some things work well in Astro, while others need some polishing
There is always room for improvement
What works well about Astro is its integration and how each document you create works together to create a cohesive website. On the other hand, if you’re just creating a simple page with images, text, CSS, and a little bit of JavaScript, it might be easier to code by hand.
Astro feels like a desktop app. While I had no difficulty getting the service to work on Linux Mint, I did have problems when I tried to use the online version on Android. It’s not a big deal, but it’s something worth knowing if you want to try it on mobile.
It’s nice to not have to deal with a document full of code and have Astro convert your Markdown into fully functional HTML. Since I like writing in Markdown, this saved me considerably time manually coding the HTML. I think this is a unique way to build websites faster, once you understand what you’re doing.
I don’t think Astro is for beginners. I already have a pretty solid understanding of HTML, Markdown, and CSS (admittedly my JavaScript is rusty, but I know enough to get by), so I understood what it does under the hood. That said, I would recommend checking out some tutorials (including Astro’s) and spending a lot of time getting to know the software.
Astro feels like a new tool that I can use frequently
I had a lot of fun working with Astro on my updated page. I think it will take me some time to become more comfortable with it, but I can see myself using it more often in the future.
And who knows? Maybe it will motivate me to update my website or add more pages to it more frequently. I never got around to redoing that visitor counter, but I’ll get around to it eventually.
Either way, I certainly enjoyed my time with it and can’t wait to see what else I can do with it in the future.
