How This Website Was Built
This site—the Bin Bash Bosh marketing site, blog, and portfolio—is built with Astro and deployed on Vercel. Here’s how it’s put together and why we chose this stack.
The Stack
- Astro 5 — static site generator and UI framework
- Preact — for the few interactive bits (via
@astrojs/preact) - Tailwind CSS v4 — styling
- Content Collections — for blog posts and portfolio items (Markdown with Zod schemas)
- Vercel — hosting and deployment
How It’s Built in Astro
Pages and layout
The site is organised into pages—home, blog, portfolio, about—and they all share one layout: the same header, footer, and styles. Each page just supplies its own content; Astro slots it into the layout. Simple and consistent.
Blog and portfolio content
Blog posts and portfolio items are written in Markdown. Astro’s content system keeps them in one place, checks that each has the right metadata (title, date, author, etc.), and turns them into pages at build time. The blog index lists all published posts; each post gets its own URL. No database, no CMS—just files.
Mostly static, zero JS by default
Astro sends zero JavaScript by default. Components are written in .astro (HTML + a small script/style block). We use Preact only where we need client-side behaviour; those components are explicitly hydrated with client:load (or similar). The rest is plain HTML and CSS, which keeps the bundle small and improves performance.
Styling with Tailwind
Tailwind v4 is wired in via the Vite plugin. Layout.astro imports global.css, and we use utility classes and @tailwindcss/typography for blog/portfolio prose. The design is dark (e.g. slate-950 background, emerald accents) and tuned for readability.
Why Astro Over Next.js for a Site Like This
For a marketing site with a blog and portfolio—mostly static, content-focused, few interactive widgets—Astro is a better fit than Next.js in several ways.
1. Built for content-first, static sites
Next.js is built around React, SSR, and dynamic routing. For a blog and a handful of static pages, you don’t need React’s component model or Node.js on the server. Astro is designed for this: Markdown/MDX in, static HTML out. The mental model is “pages + content,” not “app + API routes.”
2. Less JavaScript, better performance
Next.js apps ship React, the React runtime, and your component tree. Even with static generation, you often get a fair amount of JS. Astro outputs HTML and only adds JS where you opt in. For a site that’s 95% static content, that means faster loads and better Core Web Vitals with less effort.
3. Content Collections vs. ad-hoc Markdown
Next.js can work with Markdown (e.g. via gray-matter and remark/rehype), but you wire it yourself. Astro’s Content Collections give you a unified, type-safe API: getCollection(), getEntryBySlug(), frontmatter validated with Zod, and good editor support. For a blog + portfolio, that’s a real productivity win.
4. Simpler deployment and mental model
With Astro, the build is astro build → a dist/ folder of static files. No serverless functions, no getServerSideProps, no special caching. What you build is what you deploy. Next.js can do static export too, but the framework’s focus is on dynamic and server-rendered apps; for our use case, that’s more than we need.
5. Framework-agnostic islands
When we do need interactivity, we can drop in Preact (or React, Vue, Svelte) only where it’s needed. Next.js is React-first. Astro’s “bring your own framework” model fits a site that’s mostly static with a few interactive islands.
Summary: For a content-heavy marketing site, Astro gives us a simpler stack, less JS, better performance, and a workflow that matches “static pages + Markdown” very well. Next.js excels at full-blown web apps; we didn’t need that.
Hosting on Vercel
The site is deployed on Vercel. Astro is supported out of the box: Vercel detects the project, runs astro build (or the configured build command), and serves the generated static files from the edge.
We use the default settings: the build output directory is dist, and there’s no need for extra config. Every push to the main branch triggers a new build and deploy. Preview deployments are created for pull requests, which is handy for reviewing content and design changes before they go live.
If you’re building a blog, a portfolio, or a small marketing site and want maximum performance with minimal JavaScript, Astro plus a host like Vercel is a stack we can recommend.