Logo

Publishing

Setup Part 3: Netlify and GitHub Integration - A Match Made in the Cloud

In this post, we’ll explore the harmonious union of Netlify and GitHub, two essential tools for modern web development. By integrating these platforms, you can automate your deployment process and streamline your publishing experience.

Step 1: Push Your Hugo Site to GitHub

Before integrating Netlify and GitHub, ensure that your Hugo site is pushed to a GitHub repository:

% git add .
% git commit -m "Initial commit of Hugo site"
% git push

Step 2: Create a Netlify Account

If you haven’t already, create a Netlify account by signing up with your preferred method (e.g., email, GitHub, GitLab, or Bitbucket).

Step 3: Connect Your GitHub Repository to Netlify

  1. Once logged in to Netlify, click the “New site from Git” button on the dashboard.
  2. Select “GitHub” as the Git provider and authorise Netlify to access your GitHub account.
  3. Choose the repository containing your Hugo site.

Step 4: Configure Your Site Build Settings

After selecting your repository, you’ll need to configure your site’s build settings:

  1. Set the “Build command” to hugo.
  2. Set the “Publish directory” to public.
  3. In “Advanced settings,” add a new environment variable named HUGO_VERSION and set its value to the current version of Hugo installed on your system (e.g., 0.91.2). This ensures that Netlify uses the correct version of Hugo for building your site.

Click “Deploy site” to initiate the build and deployment process.

Step 5: Celebrate Your Successful Integration

Your site will now automatically deploy whenever you push changes to your GitHub repository. The power of Continuous Integration and Continuous Deployment (CI/CD) is now at your fingertips. Enjoy the ease and convenience that comes with automating your publishing workflow, courtesy of Netlify and GitHub.

In our next post, we’ll delve into configuring DNS settings, further solidifying your site’s presence on the web. Stay tuned!