It is possible to add GitHub projects to a Minimal Mistakes blog in a way that is more interactive than just a simple link. Since Minimal Mistakes is a Jekyll-based theme, you can use several methods to fetch data from GitHub or embed interactive elements directly into your pages. Here are the best ways to achieve this:
- Embed Interactive “GitHub Cards” Instead of a text link, you can embed a visual, interactive card that shows your project’s stars, forks, and description in real-time. GitHub Readme Stats: You can embed a live-updating card for any repository using a simple image link in your Markdown file. GitHub Repo Cards: A small JavaScript snippet that renders a beautiful, interactive card for your projects.
- Live “Playable” Demos with GitHub Pages
If your projects have a front-end (HTML/JS) or are web-based, the best way to let users interact is to host them via GitHub Pages.
Enable GitHub Pages on your project repository.
In your Minimal Mistakes blog post, use an
<iframe>to embed the live demo directly into the page. html
<iframe src="https://yourusername.github.io" width="100%" height="500px"></iframe>
Use code with caution.
-
Automatically Fetch Repositories via Jekyll If you want a dedicated “Portfolio” page that automatically lists your latest GitHub projects with their metadata: Jekyll GitHub Metadata: This is a plugin supported by GitHub Pages by default. It allows you to use Liquid tags to pull in your repository list, descriptions, and language stats automatically. Minimal Mistakes Collections: You can create a Collection named _projects and use the theme’s built-in Archive layouts to display them as a grid with “Teaser” images. GitHub Docs GitHub Docs
-
Interactive Code Snippets If the “interaction” you want is for users to play with the code: GitHub Gists: Embed Gists directly into your posts. Minimal Mistakes handles Gist embedding natively. CodeSandbox or Repl.it: If your project is a script or small app, you can embed an interactive editor/environment where visitors can actually run and edit your code without leaving your blog. GitHub Docs GitHub Docs
Recommendation: For a professional portfolio look, I suggest using Minimal Mistakes Collections to create the gallery and then embedding a GitHub Card or Live Demo inside each project’s individual page.
custom portfolio layout that loops through GitHub repos automatically: