Take advantage of Github Actions custom workflow script and more build minutes to deploy a website to Netlify.

Deploy a Website on Netlify using Github Actions

Ravgeet Dhillon

Ravgeet Dhillon

Updated on Oct 08, 2021 in Automation

⏱ 8 min read

Blog banner for Deploy a Website on Netlify using Github Actions

Although you can connect your GitHub branch directly to Netlify and deploy your website using a build command, sometimes you may want to use Github Actions for building your website and then deploy on Netlify. One of the strongest reason to do is that you get 2000 free build minutes in Github Actions as compared to 300 free build minutes in Netlify. If you are updating your website frequently, you may soon run out of these build minutes (Of course, you can buy the Pro pack on Netlify).

In this article, you will:

  • Build your website on Github Actions
  • Push the build directory to the website-build branch
  • Configure Netlify to use the website-build branch to deploy your website
Contents

Creating a Demo Website

You’ll be using Jekyll to create a website for this demo. You can use any framework to build your website because, in the end, you will just create a build directory that you will push to another branch on your Github repository.

# create a boilerplate jekyll website
jekyll new my-awesome-site

# change the directory
cd my-awesome-site

# git add all the unstaged files
git add .

# give a good commit message
git commit -m "feat: first website commit"

# push to the origin
git push origin master
Setting up master branch on Github
Setting up master branch on Github

Alright. Now you have your website code in your Github Repo.

Creating a Build Branch

Since you are going to push your website build to the website-build branch, first you need to create a new branch. In your terminal, run the following commands:

# create a new branch
git checkout --orphan website-build

# remove all files from the staging area
git rm -rf .

# create an empty commit to initialize branch
git commit --allow-empty -m "root commit"

# push branch to origin
git push origin website-build
Setting up website-build branch on Github
Setting up website-build branch on Github

Building Website using Github Actions

Now that your branch and website are set up, the next step is to write a Github Action. In your terminal, run the following commands:

# switch back to master branch
git checkout master

# create a directory for github actions
mkdir -p .github/workflows

# create a workflow file for github actions
touch .github/workflows/netlify.yml

Add the following script in netlify.yml:

name: Build

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v2
        with:
          ref: master

      - name: Set up Ruby
        uses: actions/setup-ruby@v1
        with:
          ruby-version: 2.7

      - name: Install Dependencies
        run: |
          gem install bundler
          bundle install

      - name: Create Build
        run: bundle exec jekyll build -d public

      - name: Upload artifacts
        uses: actions/upload-artifact@v1
        with:
          name: public
          path: public

  commit-build:
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Clone the repoitory
        uses: actions/checkout@v2
        with:
          ref: website-build

      - name: Configure Git
        run: |
          git config --global user.email ${GITHUB_ACTOR}@gmail.com
          git config --global user.name ${GITHUB_ACTOR}

      - name: Download website build
        uses: actions/download-artifact@v1
        with:
          name: public
          path: public

      - name: Commit and Push
        run: |
          if [ $(git status --porcelain=v1 2>/dev/null | wc -l) != "0" ] ; then
            git add -f public
            git commit -m "gh-actions deployed a new website build"
            git push --force https://${GITHUB_ACTOR}:$@github.com/${GITHUB_REPOSITORY}.git HEAD:website-build
          fi

The above action does two jobs.

In the build job, you check out your current repository, set up Ruby since you are using Jekyll, install dependencies, build the website, and add upload the public directory as an artifact.

In the commit-build job, you wait for the build job to finish, then check out the website-build branch, configure Git settings, download your build artifact, and finally push the public directory if any changes are found.

Next, execute the following commands in your terminal to push this Github Action to the upstream repository.

# add the new files
git add .

# create a new commit with a descriptive message
git commit -m "feat: added netlify build workflow"

# push github actions workflow file to the origin
git push origin master

Once the git operation is complete, visit the Actions tab on Github.

Website build created successfully
Website build created successfully
Website build pushed to website-build branch successfully
Website build pushed to website-build branch successfully
Contents of website-build branch
Contents of website-build branch

Configuring Netlify

The final thing you need to do is to configure Netlify. You need to change two things to make sure everything runs smoothly.

First, change your Branch to Deploy to website-build. Second, update your Publish Directory to artifacts. Now, whenever a push will be made to the website-build branch, Netlify will automatically deploy your website from the website-build branch.

Netlify settings to deploy website
Netlify settings to deploy website

Results

Website deployed successfully on Netlify
Hooray! Website deployed on Netlify

So that was easy. Using this workflow, you can also deploy your websites on Github Pages. There are a lot of developers complaining about issues with Jekyll plugins that are not supported by Github Pages. You can use Github Actions and commit your build to another branch and configure Github Pages to use that branch for deploying your website.

📫

Loved this post? Join our Newsletter.

We write about React, Vue, Flutter, Strapi, Python and Automation. We don't spam.

Please add a valid email.
By clicking submit button, you agree to our privacy policy.
Thanks for subscribing to our newsletter.
There was some problem while registering your newsletter subscription. Please try again after some time or notify the owners at info@ravsam.in

ABOUT AUTHOR

Ravgeet Dhillon

Ravgeet is a Co-Founder and Developer at RavSam. He helps startups, businesses, open-source organizations with Digital Product Development and Technical Content Writing. He is a fan of Jamstack and likes to work with React, Vue, Flutter, Strapi, Node, Laravel and Python. He loves to play outdoor sports and cycles every day.

TAGGED WITH

Got a project or partnership in mind?

Let's Talk

Contact Us ->