Deploy Your First Website

From code to live site

You've learned that GitHub is a platform for code storage — but GitHub doesn't show your website to the world. It just stores the files. To make your website accessible on the internet, where anyone can visit it in a browser, you need a hosting service.

Think of it this way: GitHub is your warehouse — where your code is stored and organized. A hosting service is your storefront — where visitors actually come to see what you've built. You need both.

The journey from code to a live website goes like this: you write code on your computer, push it to GitHub, and then a hosting service reads that code from GitHub, builds it into something a browser can display, and makes it available at a URL. This process of publishing your website is called deployment.

Why Vercel

There are many hosting platforms out there — Netlify, GitHub Pages, AWS, and traditional options like Bluehost. But the one we'll use in this course is Vercel, and there are good reasons for that.

Vercel is one of the most popular hosting platforms for modern web projects. It's especially great for frontend work, static websites like portfolios, and projects built with frameworks like React, Next.js, and Astro. For someone learning to work with code, Vercel is ideal because it's beginner-friendly: the free tier is generous, there's no server configuration needed, and it comes with a fast global CDN, automatic HTTPS, and support for custom domains.

Automatic deployment

The most powerful feature of Vercel is automatic deployment. When you connect Vercel to your GitHub account, it watches your repositories for changes. Every time you push new code to GitHub, Vercel automatically pulls it, runs the build process (which transforms your source code into optimized, production-ready files), and deploys the result. Your live website updates within seconds, without you doing anything. This is called continuous deployment.

Every deployment gets a unique URL — something like your-project.vercel.app. You can customize this later or connect your own custom domain. And if something goes wrong, Vercel keeps all your previous deployments, so you can roll back instantly.

Environments and static sites

This is your first taste of the development environment versus production environment distinction. When you're working on your own machine (which we'll set up in the next exercises), that's the development environment — it's for building and testing. What Vercel hosts is the production environment — the optimized, live version that real users see. The workflow connects them: you develop locally, push to GitHub, and Vercel handles the rest.

The developer experience that Vercel provides — seamless deployment, instant previews, zero configuration — is a big part of why modern web development feels so different from what it used to be. And it's especially relevant for designers moving into code: you can go from zero to a live website in minutes, which is exactly what you're about to do.

Even a static website — one made of fixed HTML, CSS, and JavaScript files with no dynamic server-side processing — needs to be hosted somewhere. Vercel handles static sites effortlessly, which makes it perfect for the portfolio template you're about to deploy.