I maintain a quirky website called Whistling Nose Games, Music, and Multimedia on Neocities. Last year, during some free time, I revisited web design fundamentals, including CSS and JavaScript, while creating quirky games and music that evoke a sense of nostalgia. I’m planning to give the site a makeover and, with guidance from a talented friend in design, I decided to try out Astro for this redesign. The results have been promising.
Astro: A Framework for Static Websites
Powerful Features Under the Hood
Astro is marketed as “a framework for content-driven websites,” streamlining the creation of static, content-rich sites by decoupling interactive elements from the main content. It compiles numerous site components (like layouts and Markdown files) into HTML and CSS on the server, rather than burdening the browser. This real-time compilation is quite impressive. The framework also utilizes file-based routing to establish URLs based on file organization, making it highly effective behind the scenes.
Astro is loaded with features and guides users through their first website setup. Notably, it includes integration capabilities for AI-powered tools, which I didn’t explore for this project.
Prior to starting, I recommend completing one of Astro’s courses. I found them immensely helpful in preparing for my project.
Using Astro to Test a Website Upgrade
A Single-Page Test to Guide Future Directions
Revamping a personal website often takes a back seat to other priorities. Recently, I noticed my visitor counter isn’t functioning and felt my homepage was too minimal for the range of content it encompasses.
I also created a virtual museum exhibit for my wife’s anniversary and wanted to include it on the site soon. After adding it as a hidden link, I realized the site required some enhancements. A visitor even informed me about some faulty code, prompting me to try Astro as a solution.
One quirky idea I considered was creating a humorous listicle no one would take at face value. This experiment with Astro focuses on building that specific page to assess its viability before publishing it on Neocities.
Installation via Command Line
Alternatively, Explore the Online Version
Credit: David J. Buck / How-To Geek
To set up Astro on Linux, you first need Node.js. You can check for it using node -v and npm -v. If missing, install them with sudo apt install npm on Linux Mint Cinnamon. You can obtain the appropriate Node.js version through curl.
Installation and adding various modules occur through the terminal. Astro sets up a project directory where you can introduce dependencies and frameworks detailed on their official site. For instance, I used npx astro add alpinjs to incorporate the Alpine.js framework, which I’m utilizing to renovate my visitor counter.
Astro also has a browser-based version for those interested in exploring that avenue.
Pre-planning My Design Before Launching Astro
Preparation is Crucial for Optimal Outcomes
Credit: David J. Buck / How-To Geek
The content is already created, so my focus lies in design and interactivity. I aim to incorporate a humorous downvote button (no upvote, as I find it more entertaining that way). Aesthetically, I envision a late-80s vibe with muted gray borders, a soft sepia background, and perhaps a light TV static overlay for effect. The text will adopt a washed-out green, with headers in off-purple or magenta to align with the page’s theme, and use amber for bold text. Astro enables me to realize all of these design ambitions.
Swift Build Process
Creating a Full Web Page in Less Time
Credit: David J. Buck / How-To Geek
Upon installation, Astro generates several folders under a directory named src, including:
- Assets
- Components
- Layouts
- Pages
The Assets folder holds images and fonts. The Components directory is for reusable elements like buttons, while Layouts and Pages contain your CSS and actual website content, respectively. I adapted my original listicle from January into Markdown, saved it as an MD file in the Terminal, and Astro processes it based on the filename instead of requiring it to be HTML.
Credit: David J. Buck / How-To Geek
From there, I created CSS elements stored in the Layouts folder and incorporated a simple JavaScript button that transforms into an ASCII skeleton I found online. I enhanced some comic book images to fit the color scheme better and placed them in the Pages folder temporarily, intending to move them to Assets later for organization.
Credit: David J. Buck / How-To Geek
Editing is straightforward with real-time updates. I utilized Micro for editing in one window while previewing changes in the other, which significantly reduced troubleshooting time. Running npm run dev allows you to assemble and view your content in a local browser environment, enabling immediate adjustments directly in the src files.
While finalizing my page took time and careful tweaks, I was eventually satisfied with the outcome, which I plan to share on my site.
Observations on Astro’s Strengths and Areas for Improvement
Always Room for Growth
Credit: Patrick Campanale / How-To Geek
Astro excels in its integration and the way documents synergize to form a seamless website. However, for simpler projects comprised of text, images, and minimal JavaScript, hand-coding might be more efficient.
The platform appears to cater primarily to desktop use. Although I experienced no issues on Linux Mint, it was less effective when I tried to access the online version from Android. While not a major concern, it’s a factor to consider.
Astro’s ability to convert Markdown to functional HTML is particularly advantageous since I prefer writing in Markdown, saving time that would otherwise be spent hand-coding HTML. This approach could significantly accelerate website creation for those familiar with its functionality.
That being said, Astro may not be ideal for beginners. I possess a solid foundation in HTML, Markdown, and CSS (though my JavaScript skills need refreshing), so I understood its mechanisms well. I strongly advise exploring tutorials, especially those provided by Astro, to gain proficiency with the tool.
Astro as a Regular Tool in My Toolkit
Credit: David J. Buck / How-To Geek
My experience with Astro while updating my page was enjoyable. It may take some time to master, but I foresee it becoming a regularly used tool. Motivation may rise to revamp my website or add new pages more often. Although I haven’t tackled the visitor counter yet, I intend to do so eventually. Regardless, I’m excited about the potential with Astro in the future.
