Building with Astro, Starlight, and Vercel Alongside AI: What I Delegated and What I Checked Myself
About This Article
This site is built using a combination of three tools: Astro, Starlight, and Vercel. This article records the experience of working through that setup alongside AI. To help readers without technical backgrounds follow along, I start with a brief explanation of what each tool does.
The Role of Each Tool
Astro is a framework for building websites. It serves as the “skeleton” of the site, providing the mechanism that combines code and content to generate web pages.
Starlight is a documentation site theme that runs on top of Astro. It comes with navigation, search, multilingual support, and other features built in, allowing you to start a site with a clear structure without designing everything from scratch.
Vercel is a service for publishing a completed site on the internet. It also includes a feature that automatically publishes the site each time the code is updated (deployment).
What I Delegated to AI
Writing Configuration Files
The AI wrote Astro’s configuration file (astro.config.mjs) and the Starlight configuration. These involve many settings that must be written with precise syntax, so having the AI generate them after I described the intended structure was more efficient than writing them from scratch myself.
That said, I did not apply the generated configuration files without review. For each major setting, I asked the AI to explain “what this line does.” Understanding the meaning before applying it means that when an error occurs later, I have a basis for investigating the cause.
Interpreting Error Messages
When errors occurred during configuration, I passed the error messages directly to the AI and asked “what is happening” and “how should I address it.” Error messages are often in English and were difficult for me to parse on my own, so this use of the AI significantly improved the efficiency of the work.
Comparing Multiple Configuration Options
For multilingual setup options, I asked the AI to compare them: “There are method A and method B. Which is more appropriate for my site?” The AI explained the characteristics of each, and I used those explanations as material for making my own decision.
What I Checked Myself
Browser Verification After Publishing
After Vercel deployment completed, I opened the URL in a browser and confirmed the display myself. The AI handles the deployment configuration, but whether the site is displaying correctly needs to be confirmed with my own eyes.
In particular, I checked the display on a smartphone, since it can differ from the desktop view.
Navigation and Multilingual Display
Whether the Japanese and English pages switched correctly, and whether the navigation appeared in the intended order, I verified by actually clicking through the site in a browser. Even if the configuration files are written correctly, the displayed result can differ from the intent.
External Service Connection Settings
The configuration connecting Vercel to my GitHub repository was done following AI instructions, but which repository to specify and which branch to set as the production environment were decisions I made myself. These are settings where a mistake can affect the publishing scope and permissions in unexpected ways, so I checked carefully.
Reflection
Setting up these three tools while researching every step myself would have taken considerable time. Having the AI handle configuration file generation and error interpretation reduced the overall volume of work.
On the other hand, sections where I moved forward without confirming the meaning of settings later created situations where I had no way to identify the cause of a problem. Prioritizing efficiency to the point of skipping understanding has a cost that shows up in later work.