Skip to main content

📝 Blog Directory

· 4 min read

This directory contains the blog content for the Shutiye Dev website. The blog features technical tutorials, programming guides, and development best practices.

🧭 Navigation Guide​

Accessing the Blog​

When you visit the website, you can access the blog through:

  1. Main Navigation Bar → Click "Blog" in the top navigation
  2. Blog Homepage → View all posts at /blog
  3. Tag Pages → Filter posts by technology/topic
  4. Author Pages → Browse posts by author
  5. RSS Feed → Subscribe to updates at /blog/rss.xml

Blog Features​

  • Search: Use the search bar to find specific topics or keywords
  • Filters: Browse by tags like java, python, react, backend, frontend
  • Categories: Posts organized by programming languages and frameworks
  • Archives: Browse posts chronologically
  • Dark Mode: Comfortable reading in any lighting condition
  • Mobile Friendly: Responsive design for reading on any device

📂 Directory Structure​

blog/
├── YYYY-MM-DD-post-slug.md    # Blog post files
├── authors.yml                # Author information and profiles
├── tags.yml                   # Tag definitions and descriptions
└── README.md                  # This navigation guide

File Naming Convention​

Blog posts follow the format: YYYY-MM-DD-post-slug.md

  • YYYY-MM-DD: Publication date
  • post-slug: URL-friendly post identifier

✍️ Content Organization​

Front Matter​

Each blog post includes metadata at the top:

---
slug: unique-post-identifier
title: Post Title for Display
authors: shutiye
tags: [topic1, topic2, topic3]
---

Post Structure​

  • Title: Clear, descriptive heading
  • Introduction: Brief overview before <!-- truncate -->
  • Main Content: Detailed tutorial or guide
  • Code Examples: Syntax-highlighted code blocks
  • Conclusion: Summary and next steps

🏷️ Tag System​

Tags help readers find related content. Available categories include:

Programming Languages:

  • java, python, javascript, nodejs

Frameworks & Libraries:

  • spring-boot, fastapi, express, react

Development Areas:

  • backend, frontend, web-development, rest-api

Content Types:

  • tutorial, guide, best-practices

All tags are defined in tags.yml with descriptions and permalinks.

🎨 Design & Styling​

The blog uses custom styling for optimal reading experience:

  • Typography: Readable fonts and proper line spacing
  • Code Blocks: Syntax-highlighted with copy buttons
  • Tables: Clean, responsive table layouts
  • Dark Mode: Automatic theme switching
  • Responsive: Mobile-first design approach
  • Accessibility: WCAG compliant for all users

Custom styles are defined in /src/css/blog-custom.css

📖 Reading Features​

Interactive Elements​

  • Table of Contents: Quick navigation to sections
  • Code Copying: One-click code snippet copying
  • Social Sharing: Share posts on social media
  • Related Posts: Discover similar content
  • Reading Time: Estimated time to read each post
  • Breadcrumbs: Know where you are in the site
  • Previous/Next: Navigate between posts
  • Back to Top: Quick return to page top
  • Search: Find specific topics instantly

🔍 Finding Content​

By Technology​

Visit tag pages to filter by technology:

  • /blog/tags/java - Java tutorials
  • /blog/tags/python - Python guides
  • /blog/tags/react - React tutorials
  • /blog/tags/backend - Backend development
  • /blog/tags/frontend - Frontend development

By Date​

  • Blog Archive: /blog/archive - View all posts by date
  • Recent Posts: Main blog page shows newest content first

Use the search bar in the navigation to find:

  • Specific topics or keywords
  • Code examples
  • Tutorial series
  • Technology guides

📱 Mobile Experience​

The blog is fully optimized for mobile devices:

  • Touch-friendly navigation
  • Readable font sizes
  • Responsive code blocks
  • Fast loading times
  • Offline reading (PWA support)

🔗 Quick Links​

Main Site Navigation​

  • Home: / - Landing page and site overview
  • Documentation: /docs - Learning curriculum and courses
  • Blog: /blog - Technical tutorials and guides
  • About: /about - About Shutiye Dev

Blog Sections​

  • All Posts: /blog - Complete blog post list
  • Archives: /blog/archive - Posts by publication date
  • Tags: /blog/tags - Browse by topic
  • Authors: /blog/authors - Posts by author
  • RSS Feed: /blog/rss.xml - Subscribe to updates

📊 Content Updates​

The blog is regularly updated with:

  • New Tutorials: Step-by-step programming guides
  • Framework Guides: Deep dives into popular frameworks
  • Best Practices: Industry-standard approaches
  • Code Examples: Real-world implementation samples

🌐 Community​

Connect with Shutiye Dev:

Happy Reading! 📚