Blog Feature Implementation Summary

Overview

A comprehensive blog system has been successfully implemented for the website, featuring a modern card grid layout, tag filtering, pagination, reading time estimation, and full dark mode support.

What Was Implemented

✅ Added “Blogs” link to the navigation bar in _config.yml
✅ Created /blogs/ directory with index.html for the blog listing page
✅ Set up /_posts/ directory for blog post content
✅ Updated pagination from 5 to 10 posts per page
✅ Configured paginate_path: "/blogs/page:num/"

2. Blog Listing Page (`/blogs/index.html`)

Features:

Card Grid Layout: Responsive 2-3 column grid (1 column on mobile)
Each Card Displays:
- Thumbnail image (or gradient placeholder if no image)
- Post title
- Publication date
- Reading time estimate (auto-calculated)
- Summary/excerpt (30-word limit)
- Tags (up to 3 displayed, “+X more” if additional)
Tag Filtering: Interactive filter buttons to show posts by tag
Pagination: Shows 10 posts per page with page numbers
Clickable Cards: Entire card is clickable, links to full post
Search Integration: Existing navbar search works with blog posts

3. Blog Post Layout (`/_layouts/post.html`)

Enhanced with:

Post meta information bar (date, reading time, author)
Improved typography and spacing
Automatic table of contents support
Previous/Next post navigation
Tag display with links
Social sharing (LinkedIn enabled)
Dark mode support

4. Styling & Design

Created CSS Files:

/assets/css/blogs.css - Blog listing page styles
- Card grid layout
- Tag filter buttons
- Pagination controls
- Hover effects
- Dark mode variants
/assets/css/post.css - Individual blog post styles
- Typography enhancement
- Code block styling
- Table of contents formatting
- Blockquote styling
- Image styling
- Table styling
- Dark mode support

Design Features:

Consistent with existing site theme
Smooth transitions and hover effects
Professional box shadows and borders
Responsive design (desktop, tablet, mobile)
Full dark mode support matching site theme

5. Blog Post Template

Required Front Matter:

---
layout: post
title: "Your Article Title"
date: YYYY-MM-DD
summary: "A short 1–2 sentence overview"
tags: [tag1, tag2, tag3]
thumbnail-img: /assets/img/blog/your-image.jpg
author: Praveen K Palaniswamy
---

Recommended Structure:

## Summary
Brief overview of the post

---

## Table of Contents
- [Section 1](#section-1)
- [Section 2](#section-2)

---

## Section 1
Content here...

## Section 2
More content...

## Conclusion
Wrap up...

6. Documentation Created

/_posts/README.md: Complete guide for writing blog posts
/_posts/TEMPLATE.md: Template file with full structure
/assets/img/blog/README.md: Image guidelines and optimization tips
/_posts/2025-12-05-welcome-to-my-blog.md: Sample blog post

7. Automatic Features

✅ Reading Time Calculation: Auto-calculates based on word count (200 words/min)
✅ Tag Extraction: Automatically extracts and displays all unique tags
✅ Search Integration: Blog posts searchable via existing navbar search
✅ RSS Feed: Blog posts included in feed.xml
✅ Sitemap: Blog posts included in sitemap.xml
✅ Mobile Responsive: Fully responsive across all devices
✅ Dark Mode: Complete dark mode support
✅ Pagination: Automatic pagination at 10 posts per page

File Structure

yourspraveen.github.io/
├── _config.yml                          # Updated with blog settings
├── _posts/                               # Blog posts directory
│   ├── README.md                         # Blog writing guide
│   ├── TEMPLATE.md                       # Post template
│   └── 2025-12-05-welcome-to-my-blog.md # Sample post
├── blogs/                                # Blog listing
│   └── index.html                        # Main blog page
├── assets/
│   ├── css/
│   │   ├── blogs.css                     # Blog listing styles
│   │   └── post.css                      # Individual post styles
│   └── img/
│       └── blog/                         # Blog images directory
│           └── README.md                 # Image guidelines
└── _layouts/
    └── post.html                         # Enhanced post layout

Configuration Changes

`_config.yml` Updates:

navbar-links:
  Posts: "posts"
  Blogs: "blogs"      # NEW
  Appointments: "appointments"
  Recognitions: "achievements"
  Contact: "contact"

paginate: 10          # Changed from 5
paginate_path: "/blogs/page:num/"  # NEW

defaults:
  # ... existing defaults ...
  -
    scope:
      path: "_posts"
      type: "posts"
    values:
      layout: "post"
      css: "/assets/css/post.css"  # NEW

How to Create a New Blog Post

Step 1: Create Post File

Create a new file in _posts/ with the naming format:

YYYY-MM-DD-post-title.md

Example: 2025-12-06-getting-started-with-python.md

Step 2: Add Front Matter

---
layout: post
title: "Getting Started with Python"
date: 2025-12-06
summary: "A beginner's guide to Python programming with examples and best practices."
tags: [python, tutorial, programming]
thumbnail-img: /assets/img/blog/python-tutorial.jpg
author: Praveen K Palaniswamy
---

Step 3: Add Thumbnail Image

Create or find an image (800x400px recommended)
Optimize for web (< 200KB)
Save to /assets/img/blog/
Reference in front matter

Step 4: Write Content

Follow the template structure:

Start with ## Summary
Add ## Table of Contents
Use ## for main sections
Include code samples with syntax highlighting
Add images with descriptive alt text

Step 5: Preview Locally

bundle exec jekyll serve
# View at http://localhost:4000/blogs

Step 6: Publish

git add .
git commit -m "Add blog post: Your Title"
git push origin master

Features Breakdown

Tag Filtering

All unique tags automatically extracted from posts
“All Posts” button shows everything
Click any tag to filter posts by that tag
Active tag highlighted
Filtered posts update instantly (no page reload)

Pagination

10 posts per page
Shows: First, Previous, Page Numbers, Next, Last
Current page highlighted
URLs: /blogs/, /blogs/page2/, etc.

Reading Time

Calculated automatically
Based on 200 words per minute
Displayed on listing cards and post pages
Format: “X min read”

Responsive Design

Desktop (>768px): 2-3 column grid
Tablet (576-768px): 2 column grid
Mobile (<576px): Single column
All elements resize appropriately

Dark Mode

All blog elements support dark mode
Automatic theme switching
Consistent with site theme
No flash of unstyled content

Best Practices

Images

Required: Every post must have a thumbnail image
Dimensions: 800x400px (2:1 ratio) for thumbnails
Format: JPEG, PNG, or WebP
Size: < 200KB (optimize before uploading)
Location: /assets/img/blog/

Content

Use descriptive headings
Include code examples with language specification
Add alt text to all images
Link to relevant resources
Keep paragraphs concise

Testing Checklist

Before publishing, verify:

Troubleshooting

Post Not Showing

Check filename format: YYYY-MM-DD-title.md
Verify date is not in the future
Ensure front matter is valid YAML
Check that thumbnail image exists

Pagination Not Working

Ensure blogs/index.html exists (not blogs.html)
Verify paginate_path in _config.yml
Rebuild site after config changes

Tags Not Filtering

Check tag names are lowercase and consistent
Verify tags array format: [tag1, tag2]
Clear browser cache

Images Not Loading

Verify image path is correct
Check image file exists
Ensure proper file permissions

Future Enhancements

Potential additions:

Support

For issues or questions:

Check /_posts/README.md for detailed documentation
Review sample post: 2025-12-05-welcome-to-my-blog.md
Refer to Jekyll documentation
Contact: praveen.palaniswamy@gmail.com

Implementation Date: December 2025 Status: ✅ Complete and Functional Test Status: ✅ All features tested and working