Integrating GitHub API with Website
GitHub API exposes data from public and private repositories: commits, PRs, issues, releases, contributors. Used for developer portfolios, project documentation, displaying status of open-source libraries.
Authentication
import { Octokit } from '@octokit/rest';
const octokit = new Octokit({ auth: process.env.GITHUB_TOKEN });
Personal Access Token or GitHub App for higher rate limits (5,000 req/hr vs 60 req/hr for unauthenticated).
Common Scenarios
Displaying Open Source Project Activity:
async function getRepoStats(owner: string, repo: string) {
const [repoData, contributors, releases] = await Promise.all([
octokit.repos.get({ owner, repo }),
octokit.repos.listContributors({ owner, repo, per_page: 10 }),
octokit.repos.listReleases({ owner, repo, per_page: 5 }),
]);
return {
stars: repoData.data.stargazers_count,
forks: repoData.data.forks_count,
openIssues: repoData.data.open_issues_count,
contributors: contributors.data.map(c => ({
login: c.login,
avatar: c.avatar_url,
commits: c.contributions,
})),
latestRelease: releases.data[0]?.tag_name,
};
}
Auto-Updating Changelog from GitHub Releases:
async function getChangelog(owner: string, repo: string): Promise<Release[]> {
const releases = await octokit.repos.listReleases({ owner, repo, per_page: 20 });
return releases.data
.filter(r => !r.prerelease && !r.draft)
.map(r => ({
version: r.tag_name,
date: r.published_at!,
description: r.body ?? '', // Markdown
url: r.html_url,
}));
}
GitHub Webhooks
Route::post('/webhooks/github', function (Request $request) {
$signature = $request->header('X-Hub-Signature-256');
$payload = $request->getContent();
$expected = 'sha256=' . hash_hmac('sha256', $payload, config('services.github.webhook_secret'));
if (!hash_equals($expected, $signature)) abort(401);
$event = $request->header('X-GitHub-Event');
match($event) {
'push' => HandleGithubPush::dispatch($request->json()),
'release' => UpdateChangelog::dispatch($request->json()),
'pull_request' => NotifyPRActivity::dispatch($request->json()),
default => null,
};
return response('ok');
});
Timeline
Displaying repository statistics: 1–2 days. Full integration with webhooks: 3–4 days.