Exercise - Set up a webhook for a GitHub repository

Completed

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 your webhook callback to your function when the event is triggered.

Setup

  1. Using your web browser, sign in to your GitHub account.

  2. Create a new repository by selecting New in the left menu pane. The Create a new repository page appears.

  3. In the Repository name box, enter a meaningful name such as LearnWebhookTest.

  4. Select Public to activate your wiki module, and find it in the menu.

  5. Select Create repository. The Quick setup page appears.

  6. Select the creating a new file link.

  7. In the top menu bar, select Wiki to display the pages in your repository (or repo). A Welcome page appears.

  8. Select Create the first page. The Create new page template appears.

  9. 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.

  1. 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.

  2. On the home page, in the top menu bar, select Settings. The Settings pane appears.

  3. In the Settings sidebar, select Webhooks. The Webhooks pane appears.

  4. On the top right, select Add webhook. GitHub may ask you to confirm your password for GitHub.

  5. 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==

  6. Select Add webhook. The Webhooks pane appears.

  7. Verify that your new webhook appears. It should have (gollum) at the end of its name.

Test the webhook

  1. In GitHub, in the top menu bar, select Wiki. The Home page that you created earlier appears.

  2. Select Edit. The Editing Home pane appears.

  3. In the text area of the pane, enter the following text:

    Testing Webhook
    
  4. Select Save Page. The Home page reappears.

  5. In the top menu bar, select Settings. The Settings pane appears.

  6. In the sidebar, select Webhooks. The Webhooks pane appears.

  7. Select Edit. The Webhooks/Manage webhook pane appears.

  8. Select the Recent Deliveries tab (you may need to scroll to the bottom of the page).

  9. 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" : {
            ...
        }
    
  10. 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.