GitHub Webhook Integration: 2 Easy Methods

As a Developer, you might have worked or come across GitHub. As of January 2020, GitHub is the world’s largest code hosting platform, with 40 million users and over 190 million repositories. Moreover, you might also have come across the term Webhooks. But have you wondered and tried on GitHub Webhooks? If not, don’t worry. You are on the right page. In this article, you will learn about the marvelous GitHub Webhook. 

As you know, automation has become a part of our lives. Task automation makes your jobs easier and allows you to be more productive at work. So, could coding and deployment of code be separated from this automation? The answer is no. This is where Webhooks come into play and help make deployment a breeze for Developers. GitHub is a favorite among developers, and when integrated with Webhooks, it makes merging code changes across environments easy.

This article will give you a comprehensive overview of GitHub Webhooks. You will explore the key features of GitHub and understand the working of GitHub Webhook. Moreover, you learn 2 methods to create a GitHub Webhook via GitHub User Interface and GitHub API. At the end of this article, you will understand some of the benefits offered by this Integration. So, let’s dive deep into the world of GitHub Webhooks to gain more insights.

Table of Contents

• Prerequisites
• Introduction to GitHub
• Key Features of GitHub
• Introduction to GitHub Webhooks
• Method 1: Set Up GitHub Webhook Using GitHub UI
  • Step 1: Log in to GitHub
  • Step 2: Create a New GitHub Webhook
  • Step 3: Fill in Webhook Details
  • Step 4: Choose Events
  • Step 5: Add GitHub Webhook
• Method 2: Set Up GitHub Webhook Using GitHub API
• Key Benefits of GitHub Webhook
• Conclusion

Prerequisites

To successfully create GitHub Webhook, you need to meet the following requirements:

• A GitHub account with Admin rights.

Introduction to GitHub

GitHub is a web-based graphical interface that enables access control and offers a variety of integrations, including wikis and basic Task Management tools. On GitHub, millions of developers and businesses create, ship, and maintain their software. It was founded in 2008 as a SaaS (Software as a Service) service based on Git, an open-source code management system built by Linus Torvalds to speed up software development.

GitHub makes collaborative development easier by offering a web interface to the Git code repository and management tools. GitHub offers an on-premises version of its software in addition to its well-known SaaS option. Moreover, GitHub Enterprise offers a diverse range of third-party apps and services. From apps that connect GitHub to your Amazon and Google Cloud accounts to project management tools, the platform offers a wide range of connectors for Code Review Automation, Continuous Integration, Code Performance, and Error Monitoring, as well as Task Management.

Key Features of GitHub

GitHub assists developers in maintaining version control and enhances the software development ecosystem as a whole. The following are some of GitHub’s features:

• Diverse Integrations: GitHub integrates with a variety of third-party tools and apps, allowing users to sync data and streamline their workflow. It also works with code editors, allowing you to manage the repository directly from the editor.
• Project Management: Companies can use GitHub to keep track of their software development progress and collaborate with team members.
• Effective Team Management: GitHub keeps everyone in the team on the same page and organized. Issue and Pull Request Locking, for example, help the team focus on the code.
• Simple Code Hosting: Everything is in one spot, including the code and documentation. On GitHub, there are millions of repositories, each with its own set of tools for hosting and releasing code.
• Increased Code Safety: GitHub employs specialized technologies to find and evaluate code flaws that conventional tools are prone to overlook. From start to finish, development teams from all around the world collaborate to safeguard the software supply chain.
• Extended Network and Opportunities: Developers can use GitHub to publish their projects and make them public, allowing others to browse their profiles. Many firms utilize GitHub profiles to assess a developer’s skill level before hiring them.

To explore other amazing features of GitHub, visit GitHub’s Official Website.

Introduction to GitHub Webhooks

A Webhook, also known as a Web Callback or HTTP push API is a mechanism for an application to provide real-time data to other apps. A Webhook sends data to other applications in real-time, so you get it right away. Unlike traditional APIs, you won’t have to poll for data very often to receive real-time results. Webhooks become significantly more efficient for both the provider and the consumer as a result of this. The sole disadvantage of Webhooks is the complexity in putting them up at first.

When specified actions on a repository or organization occur, a GitHub Webhook allows notifications to be sent to an external web server. Webhooks can be triggered anytime a repository or an organization performs a range of actions. You can, for example, set up a Webhook to fire whenever:

• A repository is created and pushed to.
• A pull request has been opened.
• A GitHub Pages site is created.
• A team gets a new member.

GitHub Webhooks allow you to create or set up integrations on GitHub.com, such as GitHub Apps or OAuth Apps, that subscribe to specific events. They will send an HTTP POST payload to the Webhook’s defined URL when one of those events occurs. Webhooks can be placed on a GitHub App, an organization, or a specific repository. The Webhook will be dispatched each time one or more subscribed events occur once it is installed. For each event on each installation target, you can establish up to 20 Webhooks.

Method 1: Set Up GitHub Webhook Using GitHub UI

In this section, you will learn the steps to set up your GitHub Webhook using Github’s User Interface. Follow the steps to create a new GitHub Webhook: 

Step 1: Log in to your GitHub account and go to your desired repository. If you wish to create GitHub Webhook for your organization, then log in to your organization’s GitHub account.

Step 2: Then click on “Settings” that is present on the right side of the GitHub bar. Next, click on the “Webhooks” option as shown below. Click on “Add Webhook”.

Step 3: Now on the next page you will see some of the options that you need to fill in as shown below. 

The fields required in the above screenshot are listed below in detail.

• Payload URL: The payload URL is the server’s URL where the Webhook POST requests will be received.
• Content-Type: Different content formats can be used to deliver webhooks, as listed below:
  • application/json: The JSON payload will be delivered as the body of the POST request.
  • application/x-www-form-urlencoded: The JSON payload will be sent as a form parameter named payload.
• Secret: Setting a Webhook Secret ensures that only GitHub POST requests are routed to the payload URL. When you set a Secret, the Webhook POST request will include the X-Hub-Signature and X-Hub-Signature-256 headers.
• SSL Verification: You will have the ability to configure the SSL verification settings if your “Payload URL” is a secure site (HTTPS). GitHub will not show this option if your “Payload URL” is not secure (HTTP). When providing Webhook payloads, GitHub checks your website’s SSL certificate by default. SSL verification ensures that hook payloads reach your URL endpoint in a secure manner.
• Active: Webhook deliveries are set to “Active” by default. By deselecting “Active,” you can turn off the distribution of Webhook payloads.
• Events: Webhooks are built around events. These Webhooks are triggered whenever a specific action on the repository is performed, which your server’s payload URL intercepts and responds to.

Step 4: In case you want to set up your events, select the option “Let me select individual events”. Now you can choose your events as shown below.

Step 5: After choosing the desired events, click on the “Add Webhook” button.

Bravo!! You have created a new GitHub Webhook for your repository using GitHub UI. In case you wish to create a GitHub Webhook using GitHub API you can read the next section.

Method 2: Set Up GitHub Webhook Using GitHub API

A GitHub Webhook can be used to update an external issue tracker, initiate CI builds, update a backup mirror, or even deploy to your production server via the GitHub API. Follow the steps below to create a GitHub Webhook using GitHub API.

Step 1: Create a new API token. 

Step 2: Next, in your GitHub account, go to the “Personal Access Token Settings”. 

Step 3: To create a new token, select “Generate New Token”. For this, only permissions relating to hooks are required as shown in the screenshot below.

Step 4: Now, after configuring all the token details, click on “Finish”. Store the generated token safely as it will be used further.

Step 5: You must now build a GitHub Webhook. You can now build a new Webhook using cURL in any Organization or Repository to which you have access y entering the following commands.

For Organization

curl -X POST 
  https://api.github.com/orgs/<ORGANIZATION_NAME>/hooks 
  -H 'authorization: token <YOUR_API_TOKEN>' 
  -H 'cache-control: no-cache' 
  -d '{ 
  "config": { 
    "url": "https://logs-github-receiver.sematext.com/github/<LOGS_TOKEN>" 
    # for EU "url": "https://logs-github-receiver.eu.sematext.com/github/<LOGS_TOKEN>" 
  }, 
  "events": [ 
    "issues", 
    "issue_comment", 
    "pull_request", 
    "pull_request_review", 
    "pull_request_review_comment", 
    "commit_comment", 
    "push", 
    "release", 
    "create", 
    "delete" 
  ] 
}'

For Repository

curl -X POST 
  https://api.github.com/repos/<GITHUB_USERNAME>/<REPOSITORY_NAME>/hooks 
  -H 'authorization: token <YOUR_API_TOKEN>' 
  -H 'cache-control: no-cache' 
  -d '{ 
  "config": { 
    "url": "https://logs-github-receiver.sematext.com/github/<LOGS_TOKEN>" 
    # for EU "url": "https://logs-github-receiver.eu.sematext.com/github/<LOGS_TOKEN>" 
  }, 
  "events": [ 
    "issues", 
    "issue_comment", 
    "pull_request", 
    "pull_request_review", 
    "pull_request_review_comment", 
    "commit_comment", 
    "push", 
    "release", 
    "create", 
    "delete" 
  ] 
}'

To read about creating GitHub Webhook using APIs in detail you can refer to GitHub Webhook.

Key Benefits of GitHub Webhook

GitHub makes practically every event in their system public. It’s one of the things that makes Github so awesome. You tell it which events you want to be notified about and which URL you want to be notified about, and GitHub makes a POST request with that data whenever the event occurs.

Using GitHub Webhook you can learn about your organization’s team’s pulse, patterns, metrics, progress, and trends in order to detect possibilities for improvement in the daily workflow. Developers can use GitHub Webhook to automate a certain action when a commit is made to the source code, making the development process go faster. It assists developers in detecting issues and resolving them nearly immediately, allowing the application to be deployed safely.

Conclusion

In this article, you gained a basic understanding of the GitHub Webhook and explored various features of GitHub. In addition, you understood 2 easy methods to create a GitHub Webhook. The first uses GitHub’s User Interface and the second uses GitHub’s API. At the end of this article, you understood the benefits of GitHub Webhook.

Moreover, combining GitHub with Hevo Data will help you boost your business’s productivity. Hevo Data’s data warehousing platform includes GitHub compatibility in addition to access to other Webhooks and data sources. Hevo Data is a No-Code Data Pipeline that offers built-in support for Webhooks and a faster way to move data from 100+ Data Sources including 40+ Free Sources such as GitHub into your Data Warehouse to be visualized in a BI tool. Hevo is fully automated and hence does not require you to code.

VISIT OUR WEBSITE TO EXPLORE HEVO

Want to take Hevo for a spin?

SIGN UP and experience the feature-rich Hevo suite first hand. You can also have a look at the unbeatable pricing that will help you choose the right plan for your business needs.

Share your experience of setting up GitHub Webhook in the comments section below!