Building and Deploying a Site

The scenario

“Build me a landing page / tool site / blog.” The hard part isn’t writing code — it’s getting something reachable at a URL.

The flow

1. Pick a stack

Need	Recommendation
Content sites, blogs, docs, tutorials	Static site generator (Astro / Next.js)
Interactive tools, small games	Frontend framework + static hosting
Database and auth	Full-stack framework + managed database

Prefer static for content sites — fast, SEO-friendly, free to host.

2. Scaffold

With Astro:

npm create astro@latest my-site -- --template starlight --install --no-git --yes

3. Develop locally

npm run dev

Focus on functionality and content here. Don’t polish pixels yet.

4. Build and smoke test

npm run build

A clean build is the floor. Then smoke test:

Does the homepage load?
Do key pages return 200?
Does navigation work?

Quick check:

for u in / /about/ /pricing/; do
  echo -n "$u -> "
  curl -s -o /dev/null -w "%{http_code}\n" "http://localhost:4321$u"
done

Don’t loop over screenshot verification for visual details. Function first; visual issues are faster to catch by eye in a real browser.

5. Publish

Static sites can be published to a live link directly:

Publish this project as an online link

You’ll get a shareable URL.

6. Custom domain

Bind your domain on the hosting platform and add the DNS record (usually CNAME).

7. Indexing setup

Three things after launch:

Submit your sitemap to search console / webmaster tools
Wire up analytics
Verify the SEO trio: sitemap, canonical, hreflang (for multilingual sites)

Mac-specific gotcha

npm commands get blocked

# On CODEBUDDY_BROKER_DENY:
env -u NODE_OPTIONS npm install
env -u NODE_OPTIONS npm run build

NODE_OPTIONS has a shim injected. Independent of which node version you use — it’s the variable.

Also expect permission prompts on first write; allow always.

Multilingual structure

For a bilingual site:

src/content/docs/
├── index.mdx           # default language (root /)
├── getting-started/
└── en/                 # English at /en/
    ├── index.mdx
    └── getting-started/

Once configured, hreflang and canonical generate automatically. Every page needs its counterpart — missing ones render as untranslated placeholders.

Pre-launch checklist

The Content Automation Pipeline.