A personal blog homepage built using a Grafana-inspired dashboard UI.

This project uses GitHub Pages + Jekyll to power a static blog and displays a dynamic Grafana-style dashboard as the homepage. The dashboard automatically updates to show:

• 📄 Latest blog posts
• 🧁 Posts by category (donut chart)
• 📅 Calendar with post dates
• 🟩 GitHub commit activity (from commits.json)
• ℹ️ “About Me” panel with image
• 🔄 Auto-refreshing data panels

Everything is generated on the client side using JavaScript, with Jekyll providing valid JSON feeds (posts.json and tags.json) directly from the _posts folder. A GitHub Actions workflow can also generate and commit commits.json for reliable commit stats.

Main Layout:

Scaling:

Panels update automatically every 60 seconds. No backend required.

When you add a new blog post in _posts/, the dashboard automatically updates:

• Total post count
• Tag/category count
• Donut chart
• Latest 5 posts list
• Calendar highlighting post dates

Shows the total commits made in your repository over the last 7 days, using commits.json generated by a workflow and a backup via your GitHub commit history (though you may hit API limits so the commits.json is a handy backup optopn to always display content.)

Circular profile picture + text panel, centered and styled to match the dashboard theme.

No plugins needed. Just HTML, CSS, JavaScript, and Jekyll’s built-in Liquid templating (for auto-generating JSON feeds).

/
├── index.html          # Grafana-style homepage dashboard
├── style.css           # Dashboard styles
├── script.js           # JS logic for charts, refresh, GitHub API, etc.
├── posts.json          # Auto-generated by Jekyll (blog posts, must be valid JSON)
├── tags.json           # Auto-generated by Jekyll (tag counts, must be valid JSON)
├── commits.json        # Auto-generated by workflow (commit stats)
├── _posts/             # Your actual blog posts (Markdown files)
└── assets/
    └── blog            # Images attatched to posts are stored here, you can use subdirectories for posts which avoids nameing collisions
    └── profile.jpg     # About panel profile picture

All blog posts live in the _posts/ folder using standard Jekyll formatting:

_posts/
  2025-01-01-my-post.md
  2025-01-02-another-post.md

Each post contains YAML front matter:

layout: post
title: My Example Post
date: 2025-12-20
tags: developer, personal # You can use as many as you wish and the doughnut will show each

Jekyll automatically parses posts and generates:

• posts.json — metadata for all posts
• tags.json — tag counts Your dashboard fetches these and updates panels automatically ✨

Managed in script.js. They read data from:

• posts.json
• commits.json
• tags extracted from posts These update every 60 seconds via:

setInterval(updateDashboard, REFRESH_INTERVAL);

You can modify or add new panels in three steps:

Each panel is a .panel element:

<div class="panel text-panel">
  <div class="panel-title">Latest Blog Posts</div>
  <ul id="postsList"></ul>
</div>

Create new panels by duplicating this block. Give each panel a unique ID or class so JavaScript can target it.

Each data source is handled in updateDashboard(). Examples:

• List latest posts
• Limit posts to 5
• Update stats
• Build charts
• Mark dates on the calendar
• Fetch GitHub commits

To create a new panel, write JavaScript that outputs into the HTML container:

document.getElementById("myPanel").textContent = "Hello!";

Or create new Chart.js panels, tables, etc.

Panels use reusable styles:

.panel { background:#242424; padding:20px; border-radius:6px; }
.panel-title { text-transform: uppercase; font-size: 13px; }

You can modify the look or create custom classes:

.my-custom-panel { background:#303030; }

✔ Quote Panel

<div class="panel" id="quotePanel">
  <div class="panel-title">Quote of the Day</div>
  <p id="quoteText"></p>
</div>

document.getElementById("quoteText").textContent = "Stay curious.";

Use Chart.js + post dates.

Generate a visual tag cloud sized by tag frequency.

Update GitHub API URL in script.js if you use direct API calls:

fetch("https://api.github.com/repos/<USERNAME>/<REPO>/commits")

Replace with your GitHub username and repo name, this is also noted in script.js which currently uses my github as an example.

1. Push the project to GitHub
2. Go to Settings → Pages
3. Set:

Source: main branch
Folder: root (/)

4. Save
5. Your site appears at:

https://<USERNAME>.github.io/<REPO>/

This project combines:

• Jekyll (for blog content)
• JavaScript (for dashboard logic)
• Chart.js (for charts)
• GitHub Pages (for hosting)
• GitHub Actions (for commit stats)