Webbo3 Data Analysis Bootcamp · Web Development Module · Lesson 1

Deployment with Netlify: Hosting, Domain Setup, and Automated Publishing

A practical lesson covering what web hosting and deployment mean, how to deploy a static site to Netlify using two methods, how to set up a custom domain, and how to choose between drag-and-drop and Git-based auto-deployment.

You have built a website. It looks good on your computer. The HTML is clean, the CSS is polished, and the JavaScript works in your browser. But a website that only lives on your laptop is not a website. It is a file. Deployment is the process of moving that file from your local machine to a server that is connected to the internet twenty-four hours a day, so anyone in the world can type a URL and see what you built. This lesson teaches you to deploy using Netlify, one of the most popular hosting platforms for static sites. You will learn what hosting actually means, how to get your site live in under a minute, how to connect your own custom domain, and how to set up automatic deployment so your site updates itself every time you change your code. By the end, you will have a live URL you can share with anyone.

1. What Is Web Hosting and Deployment?

These two terms are related but not identical. Understanding the distinction matters when you talk to clients, employers, or other developers.

Web hosting is the service of storing your website files on a server. A server is just a computer that is always on, always connected to the internet, and configured to respond when someone requests your website. When a visitor types your URL into their browser, their browser sends a request across the internet to your hosting server. The server finds the right files, HTML, CSS, JavaScript, images, and sends them back. The browser assembles those files into the page the visitor sees. Without hosting, there is no server to respond, and your website is invisible to the world.

Deployment is the act of moving your files to that server. It is the bridge between your development environment, your laptop, and the production environment, the live internet. Deployment can be manual, like copying files to a server with an FTP program, or automatic, like pushing code to GitHub and watching your hosting platform pull the changes, build the site, and publish it without you touching anything else. The method you choose affects how fast you can iterate, how reliably your site stays up, and how easily you can roll back to a previous version if something breaks.

Static versus dynamic hosting. A static site consists of fixed files: HTML pages, CSS stylesheets, JavaScript files, and images. The server delivers these files exactly as they are stored. There is no server-side processing, no database queries, and no user-specific content generated on the fly. A dynamic site, by contrast, builds pages in real time using a server-side language like PHP, Python, or Node.js, often pulling data from a database. Static hosting is simpler, faster, and cheaper because the server does less work. Netlify specializes in static hosting, though it also supports serverless functions for lightweight dynamic behavior. For the projects in this bootcamp, static hosting is sufficient and ideal.

CDN and why it matters. Netlify does not host your site on a single server in one location. It distributes your files across a global Content Delivery Network, a CDN. When a visitor in Lagos requests your site, the CDN serves the files from the edge server closest to Lagos, not from a data center in California. This reduces load time from seconds to milliseconds. When a visitor in London requests the same site, the London edge server responds. This geographic distribution is automatic on Netlify and is one reason it outperforms traditional single-server hosting for static content.

2. Deploying a Static Site to Netlify: Drag-and-Drop

Netlify offers multiple ways to deploy. The fastest, requiring no account setup or command-line knowledge, is drag-and-drop. This is called Netlify Drop. It is perfect for beginners, quick prototypes, and situations where you need a live URL in under sixty seconds.

Step one: prepare your site files. Ensure your project has an index.html file at the root level. This is the entry point Netlify serves when someone visits your URL. Your folder structure should look something like this:

my-website/
├── index.html
├── about.html
├── css/
│ └── styles.css
├── js/
│ └── script.js
└── images/
    └── logo.png

The index.html file must be at the top level of the folder, not buried inside a subfolder. If it is inside a folder named src or dist, Netlify will not find it automatically and your site will show a "Page Not Found" error.

Step two: go to Netlify Drop. Open your browser and navigate to app.netlify.com/drop. You do not need to log in or create an account for this to work, though creating an account later lets you manage and update the site.

Step three: drag and drop your folder. Click and drag your entire project folder from your file explorer or Finder and drop it onto the designated area on the Netlify Drop page. Netlify immediately begins uploading your files. Within seconds, you see a progress indicator, and once complete, Netlify assigns your site a random URL like random-name-123456.netlify.app.

Step four: visit your live site. Click the URL Netlify provides. Your site is now live on the internet. You can share this link with anyone. It works on mobile, desktop, and any browser. The deployment is instant because there is no build process for pure static HTML, CSS, and JavaScript.

Updating a drag-and-drop site. If you make changes to your site, you cannot simply edit the live files directly. You must rebuild your project locally, then drag the updated folder back to the deploy dropzone on your site's Deploys page in the Netlify dashboard. This creates a new deployment. The old deployment remains accessible in your deploy history, so you can roll back to a previous version if the new one breaks. However, this manual update process is tedious for ongoing projects, which is why Git-based auto-deployment is the preferred method for anything beyond a one-time demo.

3. Deploying a Static Site to Netlify: Git Auto-Deploy

For real projects, you want deployment to happen automatically. Every time you push a change to your Git repository, Netlify should detect it, build your site if needed, and publish the new version. This is called continuous deployment, and it is the professional standard for web development workflows.

Prerequisites: Git and a GitHub account. You need your project stored in a Git repository, hosted on GitHub, GitLab, or Bitbucket. If you have not used Git before, the bootcamp's Git module covers it in detail. For now, the essential steps are: initialize a Git repository in your project folder with git init, commit your files with git add . and git commit -m "Initial commit", create a repository on GitHub, and push your code with git push origin main.

Step one: log in to Netlify and create a new site. Go to app.netlify.com and log in with your GitHub account. This is the simplest authentication method because Netlify can then access your repositories directly. Once logged in, click Add new site and choose Import an existing project.

Step two: connect your Git provider. Netlify shows options for GitHub, GitLab, and Bitbucket. Click GitHub. Netlify requests permission to access your repositories. Grant access. You can choose to give Netlify access to all repositories or only specific ones. For security, select only the repository you intend to deploy.

Step three: select your repository. Netlify displays a list of your GitHub repositories. Find and select the one containing your website. Netlify reads the repository and analyzes its contents.

Step four: configure build settings. For a pure static site with no build step, leave the build command blank and set the publish directory to the folder containing your index.html file. If your index.html is at the repository root, the publish directory is a single dot, representing the root. If you are using a static site generator like Jekyll, Hugo, or Eleventy, Netlify often auto-detects the framework and fills in the appropriate build command and publish directory. You can override these if needed.

Step five: deploy. Click Deploy site. Netlify begins the deployment process. It clones your repository, runs the build command if one is specified, and publishes the output files to its global CDN. For a simple static site with no build command, this takes under a minute. You see a progress log in real time. Once complete, Netlify assigns a random subdomain like random-name-123456.netlify.app.

Step six: verify auto-deployment. Make a small change to your index.html file on your local machine. Commit the change with git commit -m "Update heading", and push it with git push origin main. Within seconds, Netlify detects the push, starts a new deploy, and updates your live site automatically. You can watch this happen in real time on your site's Deploys page in the Netlify dashboard. This is the power of continuous deployment. Your live site always reflects your latest committed code.

Deploy previews for pull requests. One of Netlify's most powerful features is automatic deploy previews. When you or a teammate opens a pull request on GitHub, Netlify builds the site from that branch and generates a unique preview URL. You can share this URL with stakeholders to review changes before merging them into the main branch. The production site remains untouched until the pull request is merged. This workflow is standard in professional development teams and prevents broken code from reaching your live site.

4. Custom Domain Setup

A netlify.app URL is fine for testing and sharing with teammates, but for a professional project, portfolio, or client deliverable, you need your own domain. Netlify makes this straightforward, whether you buy the domain through Netlify or already own one from a registrar like Namecheap, GoDaddy, or Google Domains.

Adding a custom domain you already own.

1. In your Netlify site dashboard, go to Domain management in the left sidebar.

2. Click Add custom domain, then Add a domain you already own.

3. Type your domain, for example yourname.com, and click Verify. Netlify checks that the domain is registered.

4. Click Add domain to confirm.

5. Netlify now shows DNS configuration instructions. You have two options: use Netlify DNS, where Netlify manages your domain's DNS records entirely, or use external DNS, where you keep your current DNS provider and only point specific records to Netlify.

Option A: Netlify DNS (recommended for simplicity). If you delegate your domain to Netlify DNS, you update your domain registrar's name servers to point to Netlify's name servers. Netlify then handles all DNS management, including automatic SSL certificate provisioning, subdomain configuration, and branch deploy subdomains. To set this up, click Set up Netlify DNS in the domain management panel. Netlify provides four name server addresses. Log in to your domain registrar, find the DNS or name server settings, and replace the existing name servers with the four Netlify provides. Changes can take up to 48 hours to propagate globally, though they often take just a few hours.

Option B: External DNS (recommended if you have other services on the same domain). If you use your domain for email, subdomains pointing to other services, or complex DNS records you do not want to migrate, keep your existing DNS provider and add only the records Netlify needs. For an apex domain like yourname.com, create an A record pointing to Netlify's load balancer IP address, 75.2.60.5. For a www subdomain like www.yourname.com, create a CNAME record pointing to your-site-name.netlify.app, replacing your-site-name with your actual Netlify subdomain. If your DNS provider supports ALIAS or ANAME records, also called CNAME flattening, use an ALIAS record for the apex domain pointing to apex-loadbalancer.netlify.com instead of the A record. This provides better CDN performance for the root domain.

Automatic HTTPS with Let's Encrypt. Once your domain is connected and DNS has propagated, Netlify automatically provisions a free SSL certificate from Let's Encrypt. This encrypts traffic between your visitors and your site, which is essential for security and search engine ranking. The certificate renews automatically every ninety days. You do not need to do anything. In your domain management panel, you can check the certificate status. If it says "SSL certificate provisioned," your site is secure. If it is pending, wait a few minutes and refresh. If it fails after several hours, check that your DNS records are correct and that your domain registrar's DNS settings have propagated.

Buying a domain through Netlify. If you do not already own a domain, you can purchase one directly through Netlify. Go to your site's Domain management panel, click Add custom domain, then Buy and register a new domain. Search for available names, select one, and complete the purchase. Netlify automatically configures DNS, SSL, and all settings. This is the fastest path from no domain to a live, secure website, because there is no registrar setup or name server migration to manage.

5. Netlify Drag-and-Drop versus Git Auto-Deploy: When to Use Each

Both deployment methods get your site live. The difference is in workflow, maintainability, and collaboration. Choosing the right method for your project saves time and prevents headaches later.

Use drag-and-drop when: You need a live URL immediately for a demo, prototype, or one-time event. You are not using Git and do not plan to. You want to test Netlify without creating an account or connecting repositories. You are deploying a site someone else built, and you only have the built files, not the source repository. The trade-off is manual updates. Every change requires you to rebuild locally and re-upload the entire folder. There is no version history beyond what Netlify keeps in deploy logs. Collaboration is difficult because there is no shared codebase.

Use Git auto-deploy when: You are actively developing the site and expect frequent updates. You are working with a team and need version control, code review, and rollback capabilities. You want deploy previews for pull requests before merging changes to production. You are using a static site generator or build tool that requires a build step. You want your deployment process to be documented, repeatable, and automated. The trade-off is a small upfront investment in setting up Git, connecting the repository, and understanding the build configuration. Once set up, it saves enormous time and reduces human error.

A practical decision framework. For bootcamp assignments and quick experiments, drag-and-drop is perfectly fine. For your portfolio site, a client project, or anything you intend to maintain over time, use Git auto-deploy. The five minutes spent connecting your repository pays for itself the first time you push an update and see it go live automatically. In a professional environment, Git-based continuous deployment is the only acceptable method. Drag-and-drop is considered a temporary or emergency deployment path, not a standard workflow.

Netlify CLI as a middle ground. For developers who prefer the command line, Netlify offers a CLI tool that provides manual deployment without requiring Git integration. Install it with npm install -g netlify-cli, then run netlify deploy --prod in your project folder. This uploads your files directly from the terminal, similar to drag-and-drop but scriptable. You can also deploy anonymously with netlify deploy --allow-anonymous, which creates a temporary site without logging in, useful for quick shares. However, for ongoing projects, the CLI is still inferior to Git auto-deploy because it lacks automatic builds, preview deploys, and team collaboration features.

6. Environment Overview: Production, Deploy Previews, and Branch Deploys

Netlify automatically creates multiple environments for your site, each serving a different purpose in the development lifecycle. Understanding these prevents you from accidentally showing unfinished work to the public.

Production environment. This is your live site, accessible at your custom domain or your netlify.app subdomain. It reflects the latest successful deploy from your main branch, or whatever branch you have designated as the production branch in your site settings. This is what visitors see. Protect it. Do not push experimental code directly to the production branch without review.

Deploy previews. Every pull request against your production branch gets its own unique URL, like deploy-preview-123--your-site.netlify.app. This environment contains the exact code from that pull request, built and deployed in isolation. Stakeholders, designers, and QA testers can review changes without affecting the live site. Once the pull request is merged or closed, the deploy preview is deactivated. This is one of Netlify's most valuable features for team workflows.

Branch deploys. If you configure Netlify to deploy additional branches, each branch gets its own permanent URL. For example, a staging branch might deploy to staging--your-site.netlify.app. This is useful for long-running feature branches, A/B testing, or maintaining a staging environment that mirrors production. You configure branch deploys in your site settings under Build and deploy, then Branches.

Environment variables. Sometimes your site needs different configuration for different environments. For example, an API key for a testing service in deploy previews, and a different key for the live production site. Netlify lets you set environment variables in your site settings, and you can scope them to specific deploy contexts: all deploys, production only, deploy previews only, or branch deploys only. This keeps sensitive keys out of your code repository while ensuring each environment uses the correct configuration.

Rollback. If a deploy breaks your production site, you can roll back to any previous successful deploy with one click. Go to your site's Deploys page, find the last good deploy, click the three dots next to it, and select Publish deploy. Netlify instantly switches the production URL to point to that older version. Your broken code is still in the deploy history, but visitors see the working version. This is your emergency brake. Know where it is before you need it.

Using AI to Move Faster in Deployment

The deployment process itself is straightforward, but AI can help with the surrounding tasks: generating configuration files, debugging build errors, and managing DNS records.

1. Use AI to generate Netlify configuration files.
For projects that need custom build settings, redirect rules, or environment variables, Netlify uses a netlify.toml file in your repository root. Instead of memorizing the syntax, describe your needs to Copilot: "Write a netlify.toml file for a static site with a build command of npm run build, a publish directory of dist, and a redirect from /old-page to /new-page." AI generates the correct TOML syntax, which you can paste into your repository and commit. This is especially useful for complex redirect rules, header configurations, and plugin setups.

2. Debug build failures with AI.
When Git auto-deploy fails, Netlify shows a build log with the error message. These logs can be long and technical. Copy the relevant error section and paste it into an AI assistant: "My Netlify build failed with this error. What does it mean and how do I fix it?" AI can identify missing dependencies, incorrect build commands, path issues, and framework-specific problems far faster than manual searching through documentation. Always include the full error message and a few lines of surrounding context for the most accurate diagnosis.

3. Generate DNS record instructions for your registrar.
DNS configuration is a common stumbling block because every registrar has a different interface. Tell AI: "I bought my domain from Namecheap and I want to point it to Netlify using external DNS. What exact records do I need to create, and where in the Namecheap dashboard do I find the DNS settings?" AI will provide step-by-step instructions tailored to Namecheap's current interface, including screenshots descriptions and the specific record values to enter. This removes the guesswork from navigating unfamiliar registrar dashboards.

4. Draft deployment documentation for clients and teams.
If you are handing a project to a client or onboarding a teammate, you need clear documentation of how the site is deployed and updated. Ask AI: "Write a one-page deployment guide for a static site hosted on Netlify with Git auto-deploy from GitHub. Include how to push updates, how to view deploy previews, and how to roll back a broken deploy." Use the draft as a starting point, then customize it with your specific repository URL, site name, and any custom build steps. Professional documentation sets you apart from developers who only write code.

5. Verify AI-generated configurations before committing.
AI can write netlify.toml files and suggest DNS records, but it does not know your actual repository structure or your registrar's current interface. Always check that the build command matches what is in your package.json. Confirm that the publish directory exists and contains an index.html file after building. Test DNS changes with a tool like dig or an online DNS checker before assuming they worked. AI accelerates the setup, but the final verification is always your responsibility, especially when a wrong DNS record can take hours to propagate and correct.

A habit worth building from this lesson onward: every time you start a new web project, set up Git auto-deploy from day one, even if the site is just a placeholder. It takes five minutes and establishes the correct workflow immediately. A project that starts with proper deployment practices does not need a painful migration later when it grows from a prototype into a production application. Netlify's free tier is generous enough for personal projects, portfolios, and small client sites, so there is no excuse for leaving your work stranded on your local machine.

Next lesson: HTML structure, semantic elements, and building your first multi-page website.