Since you want all the options to make your Astro site a GitHub powerhouse, I’ve categorized every major method available in 2026. This ranges from simple “copy-paste” images to deeply integrated API solutions.
1. Visual Status & Statistic Widgets (No-Code)
These are dynamic SVGs that update automatically. You simply drop the URL into an <img> tag or Markdown file.
-
GitHub Readme Stats: The industry standard. Shows stars, commits, PRs, and “rank.”
-
GitHub Language Stats: A horizontal bar showing your most used programming languages.
-
GitHub Extra Pins: Allows you to “pin” more than the 6-repo limit GitHub imposes on your profile.
-
GitHub Trophy: Gamifies your stats into gold, silver, and bronze trophies.
-
Star History: Embed a live line graph of a repo’s growth over time using
api.star-history.com. -
GitClear Snap Changelog: Generates a “visual pulse” of your recent work history (great for showing “momentum”).
2. Activity & Contribution Graphs
Beyond the standard green square grid, these options provide more flavor:
-
GitHub Metrics (by Lowlighter): The most powerful tool in this list. It can generate isometric calendars, music habits (via Spotify integration), and 3D “Skyline” views of your commits.
-
GitHub Contribution Graph (SVG): Uses
github-contribution-graph.vercel.appto embed your exact contribution grid on any site. -
Activity Graph: A smoother, curvy line graph version of your daily contributions.
3. Component-Based Embeds (Astro-Native)
These are packages specifically built to work with Astro’s architecture.
-
astro-embed: A collection of components including<Gist />. It renders the Gist’s HTML at build time so there is zero client-side JavaScript. -
astro-expressive-code: While not a “widget,” it allows you to pull code directly from a GitHub URL and render it with beautiful terminal-style frames and syntax highlighting. -
Octokit (GitHub’s SDK): * Method: Install
@octokit/rest.-
Use Case: Fetching live “Star” counts, “Followers,” or “Latest Release” versions inside your
.astrofrontmatter. -
Benefit: The data is fetched during the build, so your site stays 100% static and lightning-fast.
-
4. Interactive & Social Widgets
These add “Social Proof” and allow users to interact with your GitHub presence without leaving your site.
-
GitHub Button: The classic “Star,” “Fork,” or “Follow” buttons from
buttons.github.io. -
Utterances / Giscus: Turns GitHub Issues (Utterances) or GitHub Discussions (Giscus) into a commenting system for your blog posts.
-
Repo Cards: Small interactive cards that show a repo’s description, language, and star count (e.g.,
tarptaeya/repo-card). -
GitHub Issue/PR Embeds: Using tools like Embetty, you can embed a specific Issue or PR thread with a preview card.
5. Feed & Timeline Scripts
If you want to show a “Live Feed” of what you are doing right now.
-
RSS to HTML: GitHub provides an atom feed for user activity (
github.com/username.atom). You can use an Astro fetcher to turn this into a “Recent Activity” timeline. -
Social-Gems: A script that aggregates your GitHub activity into a clean, “social media style” feed.
Comparison for Astro Users
| Feature | Best Option | Performance Impact |
|---|---|---|
| Quick Profile Stats | GitHub Readme Stats | Zero (Image-based) |
| Code Snippets | astro-embed (Gist) | Zero (SSG) |
| Live Star/Follower Counts | Octokit API | Zero (Build-time fetch) |
| Blog Comments | Giscus | Low (Loads on interaction) |
| Heavy Visuals/3D | GitHub Metrics | Low (Generated SVG) |
Which one would you like a code snippet for first? (I’d recommend starting with the Octokit API fetch for the best performance.)
https://metrics.lecoq.io/insights/jubilancy
All pages updated to demonstrate this site is now clean.
https://astro-nano-apg.pages.dev/
