Learning Astro - Deployment & Hosting

#Introduction

All the previous episodes produced a single dist/ folder ready to serve. Episode 20 covers the final step that makes your site truly live: deployment and hosting.

You will compare the main hosting options — Vercel, Netlify, Cloudflare Pages, and Astro Cloud — understand the difference between static and SSR deployment, configure build output and cache, then design a deployment workflow you can run over and over.

The hosting decision is best made after understanding your needs: purely static content or SSR required? What is the budget? Where are your users? The answers determine the best platform.

#Deployment Options

#Vercel for Simplicity and SSR

Vercel is very popular for Astro because of its smooth support for both static and server modes. Connect the repository, and Vercel automatically detects npm run build, deploys to a global CDN, and sets up preview URLs for every pull request.

npx astro add vercel
vercel --prod

npx astro add vercel installs the adapter — the modern version automatically detects the output mode. The vercel --prod command triggers a production deploy straight from the terminal.

#Netlify and Cloudflare Pages

Netlify excels with built-in serverless functions and form handling. Cloudflare Pages offers fast deployment from the edge network with a large free quota — ideal for static sites.

npx astro add netlify
netlify deploy --prod

Vercel, Netlify, and Cloudflare Pages all have CI/CD integration from GitHub. The difference lies in each ecosystem's features, not the end result: your Astro site is still the same dist/ folder.

#Astro Cloud

Astro Cloud is a hosting platform dedicated to Astro, managed by the Astro team. Its advantages: settings tailored to Astro features like the content layer and previews, with pricing starting from plans that are sufficient for personal projects. A good fit if you want to hand all infrastructure concerns to the team that understands Astro best.

#Static Site Deploy vs SSR Deploy

#Choosing the Right Mode

The mode choice determines the hosting type:

Static  → dist/ HTML, bisa di hosting mana pun
Server  → adapter + runtime, butuh platform dengan fungsi
Hybrid  → kombinasi keduanya dalam satu project

A static site can be uploaded to a CDN, S3, or GitHub Pages. An SSR site needs a platform that runs code — Vercel Functions, Netlify Functions, or Cloudflare Workers.

#Considerations for Choosing

Choose static when content does not change per user and you want the simplest, cheapest hosting. Choose SSR when you need real-time data, authentication, or server-processed forms. Episode 21 will cover the details of SSG versus SSR thoroughly.

#Build Output and Cache Configuration

#Configuring Build on the Platform

All modern platforms accept the standard commands: build command npm run build and output directory dist. If your site uses base (episode 8), adjust the output in the platform settings.

#Consistent Caching

Use the caching policies from episode 14 on the hosting platform:

• Hashed assets: one-year cache, immutable.
• Static HTML: short cache with stale-while-revalidate.
• SSR pages: adjust private or short according to the content.

Some platforms provide cache settings directly in the UI; others use configuration files like vercel.json or netlify.toml. Verify cache headers after deploy with curl -sI.

#Production-Ready Deployment Workflow

#Automated Deploy Pipelines

The best deploy is one that needs no manual clicks. In GitHub Actions, a workflow can trigger an automatic deploy on push to the main branch:

name: Deploy
on:
  push:
    branches: [main]
 
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
      - run: npm ci
      - run: npm run build
      - uses: nwtgck/actions-netlify@v3
        with:
          publish-dir: dist
          deploy-message: "Deploy dari CI"

This workflow builds and then uploads dist/ to Netlify on every push to main. Secrets like NETLIFY_AUTH_TOKEN are stored in the repository settings.

#Rollback and Preview

Modern platforms provide one-click rollback to a previous deployment. Take advantage of preview deployments for pull requests — every change can be seen at a temporary URL before merging. Both make deployment no longer scary.

#Conclusion

Episode 20 closes the cycle from code to the world: comparing Vercel, Netlify, Cloudflare Pages, and Astro Cloud, understanding the difference between static and SSR deployment, configuring build output and cache, and designing an automated, production-ready deployment workflow.

The key takeaways:

• Vercel, Netlify, and Cloudflare Pages all support Astro well.
• Astro Cloud is a dedicated option managed by the Astro team.
• Static sites can be hosted anywhere; SSR needs a platform with a runtime.
• The build command npm run build with dist/ output is the standard.
• Apply the caching policies from episode 14 on the platform.
• Automate deploys through CI and take advantage of previews and rollback.

In the next episode 21, we will cover static site generation and SSR: SSG best practices, SSR and hybrid modes, ISR-style incremental updates and previews, and guidelines for when to use static versus SSR. Your rendering model will be chosen deliberately, not by chance.