Finishing up & Deployment

Running a Performance Audit

Before deploying, open Chrome DevTools and navigate to the Lighthouse tab. Run an audit for Performance, Accessibility, Best Practices, and SEO. Astro sites typically score 95 or above out of 100 in all categories. If any scores are lower, review the suggestions and fix any issues such as missing alt text on images or unoptimized assets.

Optimizing Images

Replace large PNG images with modern formats like WebP or AVIF for smaller file sizes. Astro has a built-in Image component that automatically optimizes images at build time. Import it from astro:assets and use it in place of standard img tags for all local images.

Building for Production

When your site is complete and ready to go live, run the build command:

npm run build

This generates a fully static set of HTML, CSS, and JavaScript files inside the dist/ directory. These files are ready to be served by any static hosting provider with no server-side runtime required.

Setting Up Git

Initialize a Git repository, stage all files, and make your first commit:

git init
git add .
git commit -m "Initial commit - portfolio site"

Create a new repository on GitHub and push your code to it. This makes your project accessible for deployment platforms to pull from.

Deploying to Vercel

Go to vercel.com and sign in with your GitHub account. Click "Add New Project" and select the repository you just pushed. Vercel will automatically detect that it is an Astro project and configure the build settings. Click "Deploy" and wait a few moments. Vercel will provide you with a live URL where your site is now publicly accessible.

Final Verification

Visit the live URL and test every section of the website. Click all navigation links. Resize the browser window to verify the responsive design works on mobile and tablet sizes. Compare the live site with your original Figma design to ensure they match. Congratulations, your portfolio is live!