Exercise - Set up a webhook for a GitHub repository - Training

8 minutes

In this exercise, you'll set up a webhook for a GitHub repository. You'll learn how to listen for specific events (in this case, the Gollum event), and how to make the webhook callback in your function when the event is triggered.

Setup

Using your web browser, sign in to your GitHub account.
Create a new repository by selecting New in the left menu pane. The Create a new repository page appears.
In the Repository name box, enter a meaningful name such as LearnWebhookTest.
Select Public to activate your wiki module, and find it in the menu.
Select Create repository. The Quick setup page appears.
Select the creating a new file link.
In the top menu bar, select Wiki to display the pages in your repository (or repo). A Welcome page appears.
Select Create the first page. The Create new page template appears.
Add some text, and select Save Page. The first page in a Wiki is the Home page.

Add a webhook for the Gollum event

Gollum is the name of a GitHub event that is fired whenever a page in a repository's wiki is created or updated.

On the home page in the Wiki view is a Pages sidebar that lists the pages in your repo. Select Home to display the home page.
On the home page, in the top menu bar, select Settings. The Settings pane appears.
In the Settings sidebar, select Webhooks. The Webhooks pane appears.
On the top right, select Add webhook. GitHub might ask you to confirm your password for GitHub.

On the Webhooks/ Add webhook pane, enter the following values for each setting.

Setting	Value
Payload URL	URL for your Azure function app from the previous exercise. For help, see the following note.
Content type	From the dropdown list, select application/json.
Which events would you like to trigger this webhook?	Select Let me select individual events. In the event list that appears, scroll down and select the Wiki checkbox. Make sure no other checkboxes are selected.
Active	Checked.

Tip

Copy the function URL from the Azure HttpTrigger pane by selecting Get function Url from the command bar. Your URL looks similar to: https://<your-functionapp-name>.azurewebsites.net/api/HttpTrigger1?code=aUjXIpqdJ0ZHPQuB0SzFegxGJu0nAXmsQBnmkCpJ6RYxleRaoxJ8cQ==

Select Add webhook. The Webhooks pane appears.
Verify that your new webhook appears. It should have (gollum) at the end of its name.

Test the webhook

In GitHub, in the top menu bar, select Wiki. The Home page that you created earlier appears.
Select Edit. The Editing Home pane appears.
In the text area of the pane, enter the following text:
```
Testing Webhook
```
Select Save Page. The Home page reappears.
In the top menu bar, select Settings. The Settings pane appears.
In the sidebar, select Webhooks. The Webhooks pane appears.
Select Edit. The Webhooks/Manage webhook pane appears.
Select the Recent Deliveries tab (you might need to scroll to the bottom of the page).

In the list, select the top (latest) delivery entry by selecting the ellipsis (...).

You'll see the Headers section, including the Event:

Request URL: https://testwh123456.azurewebsites.net/api/HttpTrigger1?code=aUjXIpqdJ0ZHPQuB0SzFegxGJu0nAXmsQBnmkCpJ6RYxleRaoxJ8cQ%3D%3D
Request method: POST
Accept: */*
content-type: application/json
User-Agent: GitHub-Hookshot/16496cb
X-GitHub-Delivery: 9ed46280-6ab3-11e9-8a19-f1a14922a239
X-GitHub-Event: gollum
X-GitHub-Hook-ID: 312141005
X-GitHub-Hook-Installation-Target-ID: 394459163
X-GitHub-Hook-Installation-Target-Type: repository

You'll also see that the Payload section contains information indicating that your wiki page was edited. The payload contains pages, repository, and sender sections, which should look something like the following example:

    "pages": [
        {
            "page_name": "Home",
            "title": "Home",
            "summary": null,
            "action": "edited",
            "sha": "04d012c5f92a95ae3f7721173bf9f2b1b35ea22f",
            "html_url": "https://github.com/.../wiki/Home"
        }
    ],
    "repository" : {
        "id": 176302421,
        "node_id": "MDEwOlJlcG9zaXRvcnkxNzYzMDI0MjE=",
        "name": "tieredstorage",
        ...
    },
    "sender" : {
        ...
    }

Under the Recent Deliveries tab, select the Response tab.

You'll see the response message generated by the Azure function. For this example, the body should contain the message. This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response.

Continue

Exercise - Set up a webhook for a GitHub repository

Setup

Add a webhook for the Gollum event

Test the webhook

Feedback