This blog post documents my first steps in creating a personal academic website using Astro, WebStorm, and Gemini. It serves as a record of my journey in building a professional portfolio and showcases the tools and techniques I employed to create a visually appealing, functional presence online.

Purpose and Scope

Modern web design generally falls into two categories:

• Web Applications: Focus on dynamic frameworks like React and Vue for complex interactivity.
• Content-Driven Sites: Prioritize performance and delivery, often using static site generators like Jekyll or Astro.

These approaches aren’t mutually exclusive; for instance, Astro can integrate React components to blend static performance with interactive capabilities. For my website, I wanted to showcase my academic experience and professional profile—a task that primarily requires a fast, content-focused static site. Thus, I chose a content-driven framework as my starting point.

Why Choose Astro?

Traditionally, economists and scientists have used WordPress or GitHub Pages. Jekyll is a particularly popular framework for these communities, as highlighted in the GitHub Pages documentation.

Jekyll was designed to be simple and user-friendly, allowing users to focus on content with minimal styling effort. This was an ideal trade-off in the pre-AI era. However, for those who want more systematic control over styling rather than just “patching” templates, Jekyll can sometimes feel more labor-intensive than modern frameworks built from the ground up for flexibility.

The rise of AI has significantly shifted this balance. Complex codebases and documentation can now be easily processed by AI agents, drastically reducing the learning curve for sophisticated systems. Since a personal website isn’t a mission-critical system requiring deep expertise to verify every line, the risk of using AI as a “lead coder” is acceptable, provided the developer supervises the final outcome.

Astro vs. Alternatives

Comparing popular tools helps illustrate why I landed on Astro:

• Squarespace:
  • Pros: Very easy to learn and use.
  • Cons: Requires a monthly subscription.
• WordPress:
  • Pros: Free software, massive user base, and a huge marketplace for plugins. Most content is pre-rendered for speed.
  • Cons: Built on PHP; requires a VPS or managed hosting (no free tier for custom domains usually); plugins can be expensive; requires an active server rather than a modern decoupled architecture.
• Astro:
  • Pros: Uses modern TypeScript; excellent community; content is pre-rendered (static) for incredible speed.
  • Cons: Requires more “from-scratch” styling and setup.

With the help of AI tools, the “Cons” of Astro—specifically the learning curve—are significantly mitigated, making it a powerful choice for beginners who want a custom, professional result.

Infrastructure: What a Website Needs

To get this site running, I assembled the following stack:

1. Domain: I already owned a domain for professional email.
2. DNS & Static Hosting: Cloudflare (using their generous free tier).
3. Code Repository: GitHub.
4. Content Delivery Network (CDN): Included with Cloudflare to ensure fast global access.
5. No VPS Required: By using a static generator, I don’t need to maintain a full server, handle security patches, or pay for idle compute time.

My Development Environment

1. JetBrains WebStorm: My preferred IDE, which I already had configured.
2. Gemini CLI: A powerful AI agent that helps with coding and architectural decisions.
3. Astro Docs & MCP: Integrated type hints and documentation via the Model Context Protocol (MCP) for a seamless workflow.
4. Chrome DevTools MCP: Utilizing Volta for environment management and the Chrome DevTools Model Context Protocol (MCP), which allows the AI agent to inspect the live-rendered browser output for real-time debugging and visual validation.

Summary

As my first project with a computer science focus, this has been an invaluable look into the modern web toolchain. I’ve learned how to properly use GitHub (branching, merging, and history management) and gained a solid foundation in web building. It has been a rewarding experience to build a site that truly matches my aesthetic preferences!