GitHub

Sites built for developer tools, open-source projects, or engineering teams often need to display live repository data, code samples, and release notes. There's no native connection to any code hosting platform, so repository stats, contributor lists, and changelogs require manual updates or external tooling to stay current.

Connecting GitHub with Webflow lets teams embed syntax-highlighted code directly on pages, pull repository metadata into Webflow CMS collections, and trigger automatic content updates when new releases ship. For full-stack teams, the connection also deploys Next.js and Astro applications from a GitHub repo to Webflow Cloud with zero manual pipeline configuration.

Teams use this integration to publish public changelogs, display project health metrics, manage custom code across multiple sites, and sync documentation from GitHub repositories to docs sites.

How to integrate GitHub with Webflow

What is GitHub? GitHub is a cloud-based platform for storing, sharing, and collaborating on code. It is built on Git, a version control system that tracks changes in files over time. GitHub includes code hosting, version control, CI/CD automation, project management, static site hosting, AI coding assistance, and package hosting within a single platform.

Teams connect GitHub with Webflow when their site needs to reflect live development activity. A developer tool company might sync release notes to a changelog page, while an open-source project displays star counts, contributor lists, and recent commits. Full-stack engineering teams use the connection to deploy applications directly from a GitHub branch.

Connect GitHub to Webflow in four ways:

• GitHub embeds and badges display repository data, code snippets, and contribution graphs on pages without server-side code.
• Webflow Cloud deploys full-stack applications from a GitHub repository with automatic builds on every push.
• Zapier connects explicit GitHub and Webflow workflows, such as new GitHub branches, issues, and releases creating Webflow CMS items, plus new Webflow form submissions creating GitHub issues.
• The Webflow and GitHub APIs give you full control over data sync, CMS writes, and deployment triggers, but require server-side development.

Most implementations combine two or more of these methods depending on the complexity of the setup.

Display GitHub content with embeds and badges

Pages can display GitHub data using embed scripts, image URLs, and client-side JavaScript. These methods work without server-side code and cover the most common display patterns: code snippets, repository stats, contribution graphs, and README content. Several options work with the Image element on any plan, while script-based methods require a Code Embed element on a paid site plan.

Choose the method based on what you need to display and whether your site plan supports custom code.

Embed GitHub Gists for code samples

GitHub Gists generate a <script> tag that renders a syntax-highlighted code block on any page that supports JavaScript. Public Gists update automatically when edited, so embedded code samples stay current without manual changes.

To embed a Gist on a page:

1. Create a public Gist at gist.github.com.
2. Click the clipboard icon next to the embed URL to copy the <script> tag.
3. In the Designer, open the Add panel and drag a Code Embed element onto the canvas.
4. Paste the <script> tag into the code editor, then click Save & Close.
5. Publish the site to see the rendered Gist.

To embed a specific file from a multi-file Gist, append ?file=FILENAME to the script URL:

<script src="https://gist.github.com/USERNAME/GIST_ID.js?file=example.js"></script>

Gist embeds require a paid site plan because they use the Code Embed element. For CMS-driven blog posts, script tags cannot be placed directly in the rich text editor. Store Gist IDs in CMS fields and render them with page-level JavaScript instead.

Add repository badges with Image elements

Shields.io generates SVG badge images showing live GitHub data for public repositories. No API key or authentication is required, and badges work with the Image element on any plan.

To add a GitHub badge:

1. Copy the badge URL for the metric you want to display (stars, forks, license, or last commit):``` https://img.shields.io/github/stars/USERNAME/REPOhttps://img.shields.io/github/forks/USERNAME/REPOhttps://img.shields.io/github/license/USERNAME/REPOhttps://img.shields.io/github/last-commit/USERNAME/REPO

2. Add an Image element to the canvas.
3. Paste the badge URL as the image source.
4. Optionally wrap the Image element in a Link Block pointing to the GitHub repository.

Badges refresh automatically based on Shields.io caching. For clickable badges with HTML markup, paste the following into a Code Embed element instead:

html

Both approaches display live data. The Image element method works without a paid plan.

#### **Display GitHub stats cards and contribution graphs**

Two open-source services generate dynamic SVG images from GitHub profile data. These work as Image element sources, so no paid plan or Code Embed is required.

The [github-readme-stats](https://github.com/anuraghazra/github-readme-stats) project renders profile cards showing stars, commits, PRs, and top languages:

https://github-readme-stats.vercel.app/api?username=USERNAME&show_icons=true&theme=dark

The [ghchart.rshah.org](https://ghchart.rshah.org) service renders the GitHub contribution calendar as a plain image:

https://ghchart.rshah.org/USERNAME

Paste either URL directly into an Image element's source field. Both update automatically based on their respective caching schedules.

#### **Embed README content with client-side JavaScript**

Public GitHub files are accessible at raw URLs without authentication. A short script can fetch a repository's README, convert it from Markdown to HTML, and display it inside a page.

To embed README content:

1. Add a Code Embed element where the README should appear.
2. Paste the following code:

html

3. Replace `USERNAME/REPO` with the repository owner and name.
4. Publish the site.

The rendered content updates automatically when the README changes in the repository. This method requires a paid site plan for the Code Embed element.

### **Deploy full-stack apps with Webflow Cloud**

[Webflow Cloud](https://developers.webflow.com/webflow-cloud/getting-started) deploys full-stack web applications directly from a GitHub repository. It supports Next.js and Astro frameworks, with automatic deployments triggered on every push to a linked branch. Designers work in the Designer while engineers manage application logic in their code editor and push to GitHub. Both workflows converge in a single deployment pipeline.

To connect GitHub with Webflow Cloud:

1. Authenticate with GitHub and install the Webflow Cloud GitHub App.
2. Open a Webflow Cloud project and configure the environment.
3. Select the repository and branch to monitor.
4. Push code to the linked branch. Webflow Cloud builds and deploys automatically.

Webflow Cloud includes these deployment features:

- Automatic builds trigger on every push to the linked branch
- Multi-environment support (production, staging, development) using [different GitHub branches](https://developers.webflow.com/webflow-cloud/environments)
- Zero-downtime deployments where failed builds keep the last successful version live
- Rollback support through Git commit reversion

The official [Webflow-Examples GitHub organization](https://github.com/Webflow-Examples) hosts starter repositories with a "Deploy to Webflow" button, such as the [hello-world-astro](https://github.com/Webflow-Examples/hello-world-astro) template that includes `webflow.json` configuration files for Webflow Cloud. GitHub Actions can also trigger deployments programmatically, run tests before publishing, and manage branch-specific configurations per the [integration documentation](https://webflow.com/integrations/github).

### **Connect with Zapier**

Automation platforms can connect GitHub events to Webflow CMS collections and route Webflow form submissions to GitHub repositories without writing code. Zapier is the documented option here, with explicit Webflow and GitHub trigger/action pairs.

[Zapier](https://webflow.com/integrations/zapier) has six ready-to-use templates for this combination, including:

- New GitHub branch creates a Webflow CMS item
- New GitHub branch creates a live Webflow CMS item
- New GitHub issue creates a Webflow CMS item
- New Webflow form submission creates a GitHub issue

Other supported workflows for this combination include new GitHub commit comments, pull requests, releases, and repositories creating or updating Webflow items.

To set up a Zapier automation:

1. Go to [zapier.com](https://zapier.com) and create a new Zap.
2. Select GitHub as the trigger app and authenticate with your GitHub account.
3. Choose a trigger event (for example, New Release in Repository).
4. Select Webflow as the action app and authenticate with your Webflow account.
5. Choose Create Item or Create Live Item as the action.
6. Map GitHub fields (release name, tag, body, URL) to your Webflow CMS collection fields.
7. Test and activate the Zap.

Zapier's free plan syncs every 15 minutes, with paid plans reducing that to 1 to 5 minutes. Zapier also cannot map reference or multi-reference CMS fields, so complex collection structures may require the API approach.

### **Build with the Webflow and GitHub APIs**

For full control over data sync, CMS writes, and deployment workflows, connect the Webflow Data API and GitHub REST API through server-side code. This approach handles use cases that embeds and automation tools cannot cover, such as syncing contributor lists, building filtered changelog pages, or writing GitHub webhook payloads to CMS collections in real time. It requires server-side development with a middleware layer (Netlify Functions, Vercel Edge Functions, or Cloudflare Workers) to store API tokens securely.

Use the following APIs:

- The [GitHub REST API](https://docs.github.com/en/rest) handles repository data, releases, users, Gists, file contents, and webhook subscriptions
- The [GitHub GraphQL API](https://docs.github.com/en/graphql/reference/queries) fetches multiple related resources in a single request
- The [Webflow Data API](https://developers.webflow.com/data/reference/rest-introduction) handles CMS collections, items, site publishing, and webhook registration
- [Webflow webhooks](https://developers.webflow.com/data/docs/working-with-webhooks) send notifications when CMS items are created, changed, or published
- [GitHub webhooks](https://docs.github.com/en/webhooks/about-webhooks) push HTTP POST payloads when events like releases, pushes, or new issues occur

Never expose GitHub tokens with write permissions in client-side JavaScript. Tokens embedded in custom code are visible to all visitors in browser source tools. Public GitHub data, including public repos, user profiles, and public releases, requires no authentication token, but all write operations and private data access must go through server-side middleware.

#### **Sync GitHub releases to a Webflow CMS changelog**

A common API pattern writes GitHub release data to a Webflow CMS "Releases" collection whenever a new version ships. A serverless function receives the GitHub webhook, converts the Markdown release notes to HTML, and creates a live CMS item.

To implement this:

1. Create a CMS collection with fields for version (Plain Text), release notes (Rich Text), published date (Date), and GitHub URL (Link).
2. Set up a [GitHub webhook](https://docs.github.com/en/webhooks/using-webhooks/creating-webhooks) on your repository. Go to Settings > Webhooks > Add webhook. Set the payload URL to your serverless function endpoint, content type to `application/json`, and select the `release` event.
3. In your serverless function, validate the `X-Hub-Signature-256` header, filter for `action === 'published'`, and convert the `release.body` field from Markdown to HTML using a library like `marked.js`.
4. POST the converted data to the [live items endpoint](https://developers.webflow.com/data/reference/cms/collection-items/live-items/list-items-live):

bash
curl -X POST "https://api.webflow.com/v2/collections/{collection_id}/items/live" \
-H "Authorization: Bearer " \
-H "Content-Type: application/json" \
-d '{
"fieldData": {
"name": "v1.0.0 - Initial Release",
"slug": "v1-0-0-initial-release",
"version": "v1.0.0",
"release-notes": "

What changed

• Feature A

",
"published-date": "2024-01-15T00:00:00Z",
"github-url": "https://github.com/owner/repo/releases/tag/v1.0.0"
}
}'

Filter out items where `draft: true` or `prerelease: true` if only stable releases should appear on the changelog.

#### **Sync repository data to a CMS portfolio collection**

Developer portfolios and open-source project pages can pull repository metadata from the GitHub API and write it to Webflow CMS collections.

To implement this:

1. Fetch repository data from the [GitHub Repositories API](https://docs.github.com/en/rest/repos/repos): `GET /repos/{owner}/{repo}` returns `name`, `description`, `html_url`, `stargazers_count`, `forks_count`, `language`, and `topics`.
2. Map GitHub fields to Webflow CMS `fieldData` keys. For example, `stargazers_count` maps to a Number field, `html_url` maps to a Link field, and `language` maps to a Plain Text field.
3. Create a CMS item via the [Webflow Items API](https://developers.webflow.com/data/reference/cms/collection-items/staged-items/create-items):

bash
curl -X POST "https://api.webflow.com/v2/collections/{collection_id}/items" \
-H "Authorization: Bearer " \
-H "Content-Type: application/json" \
-d '{
"fieldData": {
"name": "Hello-World",
"slug": "hello-world",
"description": "My first repo",
"github-url": "https://github.com/octocat/Hello-World",
"stars": 80,
"language": "JavaScript"
}
}'
```

4. Publish staged items with POST /v2/collections/{collection_id}/items/publish.

For real-time updates, subscribe to the repository webhook event (created or edited actions). For scheduled syncs, a GitHub Actions workflow on a cron schedule can fetch all repos and batch-update CMS items. The open-source portfolio-sync project demonstrates this pattern with a projects.json file as the source of truth.

Fetch contributors and file contents

The Contributors API at GET /repos/{owner}/{repo}/contributors returns contributors sorted by commit count. Map each contributor's login, avatar_url, html_url, and contributions count to CMS item fields for a team or contributors page.

The Contents API at GET /repos/{owner}/{repo}/contents/{path} returns file data as base64-encoded content. Decode it in Node.js with Buffer.from(response.content, 'base64').toString('utf-8') before converting Markdown to HTML for rich text fields.

The Contents API also returns a sha field per file. Store this SHA alongside CMS item IDs to re-sync only changed files on subsequent runs. For high-read-volume use cases, replace api.webflow.com with api-cdn.webflow.com for cached read-only calls that do not count against your plan's API limits.

What you can build with the GitHub Webflow integration

Integrating GitHub with Webflow lets you display live development activity on your site and automate content updates without manual copy-paste between platforms.

• Automated public changelog: Publish a customer-facing changelog page that populates automatically from GitHub releases. Each new release creates a CMS item with version number, release notes, and publication date. A Collection List on the changelog page displays entries in reverse chronological order.
• Open-source project dashboard: Build a project page that shows live star counts, fork numbers, contributor avatars, and recent commits pulled from the GitHub API. Badges from Shields.io update automatically, and a scheduled sync writes contributor data to CMS collections for a team grid layout.
• Developer portfolio with live repo data: Create a projects section where each card pulls its description, primary language, and star count from GitHub. A GitHub Actions workflow runs on a weekly schedule to refresh CMS items, so the portfolio always reflects the latest repository activity.
• Documentation site synced to a GitHub repo: Maintain technical documentation in Markdown files within a GitHub repository. A webhook on the push event triggers a serverless function that converts updated files to HTML and writes them to Webflow CMS items. Engineers edit docs in their preferred code editor while the site updates automatically.

If you need more control over multi-environment deployments or complex data transformations, use the API integration path.