probot.github.io/quickstarts.html

---
layout: default
title: Quickstarts
---
<div class="container-lg px-3">
  <header class="py-6">
    <div class="pb-0 pt-md-4 py-lg-6">
      <div class="d-md-flex flex-md-items-center flex-md-row-reverse flex-md-justify-center gutter-md-spacious">
        <div class="col-md-8 text-center text-md-left">
          <h1 class="alt-h2 text-uppercase lh-condensed text-brand-blue">Probot</h1>
          <h2 class="alt-h2 lh-condensed">
            GitHub Apps to automate <br>and improve your workflow
          </h2>
          <p class="alt-lead text-gray-light mt-2 lh-condensed" style="opacity: 0.6">
            Use pre-built apps to extend GitHub,<br>
            and easily build and share your own.
          </p>
        </div>
        <div class="col-3 mx-auto mx-md-0 offset-md-1 text-center text-md-right">
          <img src="/assets/logo.png" class="width-fit" alt="Probot logo">
        </div>
      </div>
    </div>
  </header>
</div>

<div id="explore" class="bg-gray-light border-top border-gray-light">
  <div class="container-lg px-3 page-section">
    <h2 class="alt-h1 text-center">Explore</h2>
    <p class="lead text-center col-md-7 col-sm-10 mx-auto">
      Check out these hosted apps that extend your project on GitHub. They're all open source and free to use on any project.
    </p>

    <div class="d-md-flex flex-wrap gutter flex-auto">
      {% assign apps = site.apps | sort: 'installations' | reverse %}
      {% for app in apps limit:6 %}
        {% include app.html app=app %}
      {% endfor %}
    </div>

    <div class="text-center my-6">
      <p class="lead mx-auto col-md-8">
        Discover dozens of apps that extend GitHub and improve your workflow.
      </p>
      <a class="btn btn-outline btn-large" href="/apps/">
        {% octicon telescope class:"mr-2" %}
        Explore more apps
      </a>
    </div>
  </div>
</div>

<div id="build" class="border-top page-section f4">
  <div class="container-lg px-3">
    <h2 class="alt-h1 text-center lh-condensed">Quickstarts</h2>
    <p class="alt-lead text-center mb-6">Get started with a basic app.</p>
    <p class="text-center mb-6">
      <a class="btn btn-outline btn-large" href="/docs/">
        {% octicon tools class:"mr-2" %}
        Browse Quickstarts
      </a>
    </p>

    <div class="page-section d-flex flex-column flex-md-row gutter flex-items-center flex-md-items-center">
      <div class="col-md-7">
        <img alt="" src="https://github.com/probot.png" height="44" width="44" class="avatar rounded-1 float-left">
        <div class="timeline-comment box rounded-2 border bg-white" style="margin-left: 60px;">
          <div class="bg-gray px-3 py-2 border-bottom">
            <strong>@probot</strong> commented
          </div>
          <p class="m-0 p-3">Hello World!</p>
        </div>
      </div>
      <div class="col-md-6">
        <h3 class="alt-h3 mb-2">Comment on an Issue</h3>
        <p class="">
          Get started with an app that will post a comment any time an issue is opened.
        </p>
        <p class="mt-3">
          <a href="/docs/">Get started with this app {% octicon chevron-right %}</a>
        </p>
      </div>
    </div>

    <div class="page-section d-flex flex-column flex-md-row gutter flex-items-center flex-md-items-center">
      <div class="col-md-6">
        <h3 class="alt-h3 mb-2">Create a Check</h3>
        <p class="">
          Get started with an app that creates successful checks on pull requests.
        </p>
        <p class="mt-3">
          <a href="/docs/">Get started with this app {% octicon chevron-right %}</a>
        </p>
      </div>

      <div class="col-md-7 hide-md">
          <img alt="" src="/assets/checks.png" class="width-fit">
      </div>
    </div>

    <div class="page-section d-flex flex-column flex-md-row gutter flex-items-center flex-md-items-center">
      <div class="col-md-7 hide-md">
          <img alt="" src="/assets/comment.png" class="width-fit">
      </div>
      <div class="col-md-6">
        <h3 class="alt-h3 mb-2">Comment on an Issue</h3>
        <p class="">
          Get started with an app that will post a comment any time an issue is opened.
        </p>
        <p class="mt-3">
          <a href="/docs/">Get started with this app {% octicon chevron-right %}</a>
        </p>
      </div>
    </div>
  </div>
</div>