CI/CD with Git: From Commit to Deploy

1. What is Continuous Deployment?

At its core, CI/CD is a method to frequently deliver apps to customers by introducing automation into the stages of app development. The two main parts are:

• Continuous Integration (CI): The practice of automating the integration of code changes from multiple contributors into a single software project. Developers push code to a central repository (like GitHub), which then triggers an automated build and test sequence.
• Continuous Deployment (CD): An extension of CI that automatically deploys every code change that passes the automated tests to the production environment, making it visible to your users.

For our project, the workflow will look like this:

1. You make a change to your website (e.g., add a new blog post).
2. You commit and push this change to your GitHub repository.
3. GitHub notifies your hosting provider (Vercel or Netlify).
4. The hosting provider automatically pulls the latest code, runs the build command (astro build), and deploys the new version of your site to production.

This automated pipeline ensures your live site is always in sync with your main branch.

2. Setting Up CI/CD with Your Hosting Provider

The fantastic news is that if you followed the last two lessons and deployed your site to Vercel or Netlify by importing a Git repository, you have already set up CI/CD! These platforms are designed around this Git-centric workflow. Let's formalize our understanding of how it works.

When you link a GitHub repository to a Vercel or Netlify project, the platform installs a "webhook." This is what allows GitHub to send an automatic notification every time you push a new commit.

The official Astro documentation provides a great summary of this process for Vercel.

This process gives you two powerful features out of the box:

• Production Deployments: Every push to your main branch (e.g., main or master) updates your live website.
• Preview Deployments: If you push code to any other branch and open a pull request, Vercel creates a unique preview URL with those changes. This is incredibly useful for reviewing new features with team members or clients before merging them into production.

3. The CI/CD Workflow in Action: A Practical Demo

Let's see just how seamless this is. The following video walks through adding a new blog post to an Astro site, pushing it to GitHub, and watching Netlify automatically update the live site. The process is identical for Vercel.

Now, try it yourself with the project you deployed:

1. Open your project in your code editor.
2. Make a small, visible change. For example, open src/pages/index.astro and change some of the heading text.
3. Save the file.
4. Commit and push your change to GitHub:

   git add .
   git commit -m "Test automatic deployment"
   git push origin main
   

5. Open your Vercel or Netlify dashboard. You should see a new build in progress, triggered by your commit.
6. Once the build completes (it should only take a minute or two), refresh your live website. Your change will be there!

This simple, powerful workflow is the core benefit of modern hosting platforms.

4. Advanced Control with GitHub Actions

While the built-in CI/CD is perfect for most projects, sometimes you need more control. You might want to run automated tests, check for code quality, or perform security scans before a deployment goes live. This is where GitHub Actions comes in.

GitHub Actions allows you to build custom, automated workflows directly within your GitHub repository. You define these workflows in a YAML file located in the .github/workflows/ directory.

While we won't implement a full GitHub Actions pipeline in this lesson, understanding the concept is valuable for your continued growth as a developer. It gives you ultimate control over your CI/CD process.

The key idea is that instead of relying on Vercel's built-in build process, you are instructing GitHub to perform the build itself and then simply upload the finished product (.vercel/output folder) to Vercel for hosting.

This approach, detailed in Vercel's documentation under "Using GitHub Actions", is the standard for complex projects or when deploying from environments that don't support native Git integrations.

Conclusion

You have now mastered the final and most crucial step in modern web deployment: automation. By setting up continuous deployment, you have created an efficient, reliable, and error-resistant workflow for maintaining and updating your website.

Key Takeaways:

• Continuous Deployment (CI/CD) automates your deployment pipeline, making your workflow faster and more reliable.
• Modern hosting platforms like Vercel and Netlify provide built-in CI/CD by default when you connect a Git repository.
• Every git push to your main branch automatically updates your production site, while pushes to other branches create isolated preview deployments.
• For advanced control, GitHub Actions allows you to build custom pipelines that can include testing, linting, and other quality checks before deployment.

Up Next:

Congratulations on completing the deployment module! Your website is now fully deployed, hosted on a custom domain, secured with SSL, and features an automated deployment pipeline. The final piece of the puzzle for a production site is understanding your audience. In the next lesson, we will learn how to integrate a web analytics service to track user behavior, giving you valuable insights into how people are using your website.