I run a silly little website Neocytes he called Whistling Nose Games, Music and Multimedia. During some downtime last year, I spent a few months relearning web designCreating CSS, JavaScript and absurd games/music. It has an intentional nostalgic vibe. I will update it. A friend of mine with phenomenal design skills gave me direction Astro to help me with my redesign. So I gave it a shot and it turned out great.
Astro is a web framework for static websites
There’s a lot under the hood
Billing itself as a “framework for content-driven websites”, Astro is a JavaScript web frameworkit’s just a fancy way of saying that it helps users create static, content-based websites by separating the interactive components of the site from the content itself.
It stores everything you do for your site (components, layouts, etc.). Markdown files) to HTML and CSS on the server side instead of letting the user’s browser handle code execution. It’s pretty amazing to see it working in real time. A uses file-based routing system to generate URLs based on your file layout. does a lot behind the scenes work.
It is feature-rich and guides users through creating their first website with the software. There are also integration features to build with AI (a Claude CLI integration sounds interesting), but I didn’t try them for this project.
Take it before you start One of the Astro courses. I went through them before creating my page and it helped a lot.
I use Astro to build test for website improvement
A one-page test can help inform the new direction of a website
Updating and overhauling a personal website is not a priority over other tasks. I discovered that my visitor counter wasn’t working and I felt like my homepage was a bit bare due to the amount of content it was linking to.
Moreover, I made a virtual museum exhibit as an anniversary gift for my wife and wanted to add it to the site by the end of the month. I finished the project and added it as a “hidden link” and realized that my site needs more polishing. I also had a visitor contact me about some broken code.
So Astro will (hopefully) help me fix this.
One of the ideas I had for my site was to create a silly list that no one would take seriously. So that’s the scope of this experience with Astro that particular page and test it before adding it to Neocities.
Installation takes place on the command line
Or you can use the online version of the program
To install Astro on Linux, you will need first install Node.js. use it node -v and npm -v to see if they are. If not, you can install them sudo apt install npm In Linux Mint Cinnamon. hold the version The right version of Node.js using curl.
Installation and addition of various modules to Astro takes place in the terminal. Once installed, Astro creates a directory for your project and you can add dependencies and frameworks as you see fit (all of which are detailed on their website). I used the command npx astro add alpinjsto add Alpine.js framework to my project. I’m a big fan of the framework and this is what I’ll be using to rebuild the visitor counter on my site.
Astro also offers a version that you can use in the browser, if you choose that route.
Before loading Astro, I carefully planned my design
Preparation is key to getting the most out of the program
The content of the page already exists, so I’m only interested in design and functionality. I want to give it an interactive element, like a volume down button (in my opinion it won’t be a volume up button because it’s funnier). Design-wise, I want a late 80s, static TV, desaturated vibe.
I want muted gray borders, a mild sepia-toned background, maybe some TV static overlay (but not too distracting), and some sort of washed-out green for the text. The headers will be purple or violet to match the theme of the page more. Stay (or strong in CSS) should be amber. I will also do something interesting with the titles.
With Astro, I have power to do all this and more.
Once started, construction progressed rapidly
I made an entire web page in half the time it usually takes
When you install Astro, it creates four different folders in a folder called src. These include:
-
Assets
-
Components
-
Plans
-
Pages
The Assets folder is where you place your images and the fonts you want to use. Components is for your reusable elements (think buttons, navigation, etc.). Plans and Pages store your CSS and actual web page content respectively.
I wrote the original list in January, so I converted it to Markdown and made a few tweaks. Then I saved it as an MD file using Micro in Terminal. Astro looks at the file name instead of the file type, so doesn’t Must be saved as HTML.
From there I created my CSS elements and saved them Plans made a very simple JavaScript button that turned into an ASCII skeleton I found in the folder ASCII Art Archive. I grabbed some comic book images of each character and converted them to grayscale to better fit the aesthetic. I threw them in Pages folder instead Assets co-existing with my Markdown file to simplify things for quick testing. I will transfer them later Assets when you complete the page.
Editing is intuitive. You can see the changes as you make them. I opened Micro to edit my file in one window and keep the site open in another so I could watch the changes happen. It saved a ton of time trying to troubleshoot or bug code.
You run to check your code npm run dev. When executed, your content is pulled together and you open a localhost instance in your browser. From there, you can see what your new page looks like and immediately check for any issues. If you need to make adjustments, you just go back to yourself src Edit the files in Micro, then watch your browser refresh.
As for my page, it took some time, effort and fine-tuning, but I finally ended up with a final result I’m happy with, which will probably be published on my site.
Some things work well on Astro, while others require polishing
There is always room for improvement
What works well in Astro is its integration and how every document you design works together to create a single website. On the other hand, if you’re just making a simple page with images, text, CSS, and a bit of JavaScript, it might be easier to code by hand.
Astro feels like the first desktop app. While I had no trouble getting the service to work on Linux Mint, I ran into trouble when I tried to use the online version on Android. It’s not a big deal, but it’s worth knowing if you don’t want to try it on a mobile device.
It’s nice not having to deal with a document full of code, and having Astro convert Markdown into fully functional HTML. Since I like to write in Markdown, this saved me a lot of time coding the HTML by hand. I think it’s a unique way to build websites faster once you understand what you’re doing.
I don’t think Astro is meant for beginners. I already have a pretty solid knowledge of HTML, Markdown, and CSS (my JavaScript is definitely rusty, but I know enough to get by), so I understood what it was doing under the hood. However, I would recommend checking out a few tutorials (including Astro’s own) and spending a lot of time familiarizing yourself with the software.
Astro feels like a new tool that I can use often
I had a lot of fun working with Astro for my updated page. I think it will take some time to get more comfortable with it, but I can see myself using it more often in the future.
And who knows? Maybe this will motivate me to update my website or add more pages to it more often. I never tried to redo the visitor counter, but I’ll get there eventually.
Either way, I’ve enjoyed my time with it and can’t wait to see what else I can do with it.
