Skip to main content
This Astro portfolio template is designed to be easily deployed to various hosting platforms. This guide covers the build process, output structure, and available deployment options.

​
Build Process

The portfolio uses Astro’s static site generation to create optimized HTML, CSS, and JavaScript files.

​
Build Command

pnpm install
pnpm run build
The build process:
  1. Content Processing: Compiles MDX files and content collections
  2. Component Rendering: Processes React components and Astro components
  3. Asset Optimization: Optimizes images using Sharp, bundles CSS/JS
  4. Static Generation: Generates static HTML pages for all routes

​
Build Configuration

Key configuration from astro.config.ts: 
export default defineConfig({
  site: "https://vaibhu.com",
  integrations: [
    react(),
    tailwind({ applyBaseStyles: false }),
    mdx(),
  ],
});
Make sure to update the site URL in astro.config.ts and package.json to match your production domain.

​
Build Output

The build creates a dist/ directory containing:
  • HTML files: Pre-rendered pages for all routes
  • Assets: Optimized CSS, JavaScript, and images in _astro/
  • Static files: Public assets (favicon, images, etc.)

​
Output Structure

dist/
├── index.html
├── projects/
│   └── [project-slug].html
├── posts/
│   └── [post-slug].html
├── _astro/
│   ├── [hashed-files].css
│   ├── [hashed-files].js
│   └── [optimized-images]
└── [static-assets]
The output directory is fully static and can be served from any static hosting provider.

​
Deployment Options

This template supports multiple deployment platforms: Primary platform with optimal configuration. Includes automatic deployments, preview URLs, and analytics integration.
  • Zero-config deployment
  • Automatic HTTPS
  • Built-in analytics and speed insights
  • Git integration
Learn more →

​
Netlify

Popular alternative with excellent performance and features.
  • Continuous deployment
  • Form handling
  • Serverless functions support
  • Custom domains
Learn more →

​
Static Hosting

Generic static hosting platforms like GitHub Pages, CloudFlare Pages, or any CDN.
  • Simple deployment
  • Custom configurations
  • Works with any static host
Learn more →

​
Pre-deployment Checklist

Before deploying, ensure you’ve completed these steps:
1

Update Site Configuration

Update the site URL in astro.config.ts and package.json to your production domain.
2

Customize Content

Replace placeholder content with your own projects, posts, and profile data.
3

Test Build Locally

Run pnpm run build and pnpm run preview to verify everything works.
4

Configure Analytics (Optional)

The template includes Vercel Analytics. Remove or replace with your preferred analytics solution.

​
Environment Variables

If you add features that require environment variables:
  1. Create .env file locally (already in .gitignore)
  2. Add variables to your hosting platform’s environment settings
  3. Use Astro’s import.meta.env to access them
const apiKey = import.meta.env.PUBLIC_API_KEY;
Never commit sensitive credentials to your repository. Use platform environment variables instead.

​
Performance Optimization

The template includes several performance optimizations:
  • Image Optimization: Sharp integration for responsive images
  • Asset Bundling: CSS and JavaScript minification
  • Content Collections: Efficient content loading
  • Tailwind CSS: Purged and optimized styles

​
Next Steps

Choose a deployment platform and follow the specific guide:

Deploy to Vercel

Recommended platform with zero-config setup

Deploy to Netlify

Alternative platform with great features

Static Hosting

Deploy to any static host or CDN

Build docs developers (and LLMs) love

Get started for freeTalk to us