An example outline of a custom public front-end for your Buildkite builds

kiteviewer.js

// ┌───────────────────────────┐     ┌────────────┐    ┌─────────────────────────┐
// │  github.com/org/project   │     │ Buildkite  │    │   https://kiteviewer    │
// └───────────────────────────┘     └────────────┘    └─────────────────────────┘
//               │                          │                       │
//               ├────────PR opened / ──────▶                       │
//               │         fork push        │       Events via      │
//               │          webhook         └────────webhooks───────▶
//               │                                                  │
//               │                      POST                        │
//               ◀─────────────────────commit ──────────────────────┤
//               │                     status                       │
//               │                                                  │
//               │                 Contributor can                  │
//               └───────────────click through or go ───────────────▶
//                                   directly to
// 
// Buildkite handles jobs dispatching, running agents, streaming logs, capturing
// artifacts etc.
// 
// Kiteviewer is a Node app that:
// - Receives Buildkite webhooks, posts commit status to GitHub
// - Display builds using Buildkite REST or GraphQL API (can use artifacts and
// meta-data to instrument/customize the build results)
// - Serves up dynamic build badges based on Buildkite build info

const express = require('express');
const bodyParser = require('body-parser');

const buildkiteApiToken = process.env.BUILDKITE_API_TOKEN;
const githubApiToken = process.env.GITHUB_API_TOKEN;

const app = express();
app.use(bodyParser.json());

app.get('/', function (req, res) {
  // TODO A pretty landing page
});

app.post('/webhook/buildkite', function (req, res) {
  // TODO Post to Github commit status API
  // https://developer.github.com/v3/repos/statuses/#create-a-status
  //
  // {
  //   "state": "pending",
  //   "target_url": "https://kiteviewer/b/some-pipeline/1234"
  //   "description": "Build #1234"
  //   "context": "kiteviewer"
  // }
});

app.get('/b/:pipeline/:build_number', function (req, res) {
  // TODO Fetch Build info from Buildkite REST or GraphQL API
  // https://buildkite.com/docs/api/builds#get-a-build
});

app.listen(process.env.PORT || 3000, function() {
  console.log('Kiteviewer listening on port', this.address().port)
});