Deploying with Git: Connecting to Automated Platforms

From Code to Live Site: Understanding Continuous Deployment

Before we start clicking buttons, let's clarify the concept. Continuous Deployment is an automated process that takes the code from your version control system (GitHub), builds it into a functional website, and deploys it to a hosting server every time you push an update.

The workflow looks like this:

1. You make changes to your site locally.
2. You git push those changes to your main branch on GitHub.
3. A service like Netlify detects this push.
4. Netlify automatically runs your build command (e.g., hugo) in a clean environment.
5. It takes the output (your public folder) and publishes it to its global network.
6. Your site is live with the new changes.

This automated pipeline is the industry standard for modern web development. Let's set it up.

Step 1: Connecting Netlify to Your GitHub Account

First, we need to create a Netlify account and authorize it to access your GitHub repositories. Netlify is a popular platform for hosting static sites, known for its generous free tier and ease of use.

Once you've signed up and are logged into your Netlify dashboard, you're ready to deploy your first site.

Step 2: Importing and Configuring Your Hugo Project

Now we'll tell Netlify which repository to build and how to build it. The following video provides a complete, Hugo-specific walkthrough of this entire process, from selecting the repository to seeing the final deployed site.

After you select your repository, Netlify will present you with the build configuration screen. This is the most critical step.

Here are the settings you need for a standard Hugo project:

• Branch to deploy: main (or master, depending on your repository's default). This tells Netlify to only build and deploy changes that are pushed to this primary branch.
• Build command: hugo --gc --minify
  • hugo is the basic command to build your site.
  • --gc (garbage collection) cleans up unused cache files.
  • --minify optimizes your HTML, CSS, and JS files for faster loading.
• Publish directory: public
  • This tells Netlify where to find the generated static site after the build command runs. For Hugo, this is always the public directory.

These settings are also summarized concisely in the HugoBlox deployment guide.

Once you've entered these settings, click Deploy site. Netlify will now pull your code from GitHub, run the build command, and deploy the contents of the public folder. You'll be taken to a dashboard where you can see the deployment progress. In a minute or two, your site will be live at a randomly generated Netlify URL!

Step 3: A More Robust Method with netlify.toml

Setting build configurations in the UI works, but a more professional and robust method is to define them in a configuration file within your repository itself. This file is named netlify.toml.

Why use netlify.toml?

• Version Controlled: Your build settings are now part of your Git history.
• Portable: Anyone who clones your repository has the build settings.
• Explicit Dependencies: You can lock in specific versions of tools, like Hugo, preventing unexpected build failures.

Let's create this file in the root of your local Hugo project.

Your netlify.toml file should look similar to this:

[build.environment]
HUGO_VERSION = "0.124.1" # Use the version you have locally

[build]
publish = "public"
command = "hugo --gc --minify"

Crucially, you should change HUGO_VERSION to match the version you are using for local development. You can find your local version by running hugo version in your terminal. This prevents a common issue where Netlify's default Hugo version is different from yours, causing the build to fail or render incorrectly.

Now, add, commit, and push this new file to your GitHub repository:

git add netlify.toml
git commit -m "feat: Add Netlify build configuration"
git push

Netlify will detect this push and start a new build, this time using the settings from your netlify.toml file.

Step 4: Witnessing the Automated Workflow

This is the moment everything comes together. With the connection established, every git push to your main branch will now automatically update your live site.

Conclusion

You have now successfully implemented a complete Continuous Deployment pipeline. Your Hugo project, managed in a Git repository on GitHub, is now automatically built and deployed by Netlify whenever you push an update. This powerful, automated workflow is the backbone of modern web development, freeing you up to focus on what matters most: creating and refining your site's content and structure.

Key Takeaways:

• Continuous Deployment (CD) automates the process of building and publishing your site from a Git repository.
• Netlify is a platform that connects to your GitHub account to enable CD for static sites like Hugo.
• The three critical build settings are the branch to deploy (main), the build command (hugo --gc --minify), and the publish directory (public).
• Using a netlify.toml file in your repository is the best practice for managing build settings and locking the HUGO_VERSION to prevent build failures.

Preview of the next lesson:
Your site is now live and updating automatically. But what happens when a deployment fails? In our final lesson, we will learn how to trigger, verify, and troubleshoot an automated deployment from a Git push. You'll learn how to read deployment logs and diagnose common issues, completing your skill set for managing a site from initial idea to live deployment and maintenance.