Welcome to Your New Blog!

Welcome to your new Jekyll blog! This template comes packed with modern features to help you create a fast, SEO-optimized, and maintainable blog.

What You Get Out of the Box

This isn’t just another Jekyll template. It’s a complete blogging solution with:

Performance First

• Automated image optimization with WebP conversion
• Responsive images for different screen sizes
• Lazy loading for better Core Web Vitals
• Lighthouse CI monitoring your site’s performance

Modern Design

• Dark theme with Minima
• Mobile-first responsive design
• Accessible components and markup
• SEO optimized meta tags and structure

Automated Workflows

• GitHub Actions for deployment
• Performance monitoring with every push
• Link checking to prevent broken links
• Dependency updates to keep things secure

Getting Started

1. Customize Your Configuration

Edit the _config.yml file with your information:

title: Your Blog Title
author: Your Name
email: your.email@example.com
description: Your blog description

2. Create Your First Post

Follow the structured approach:

# Create the post file
touch _posts/2024-01-16-my-first-post.markdown

# Create image directory
mkdir -p assets/images/posts/my-first-post

# Add your images and optimize them
./scripts/optimize-images.sh

3. Use Optimized Images

The template includes a powerful image optimization system. Here’s how it works:

Key Features Explained

Image Optimization System

The scripts/optimize-images.sh script automatically:

1. Converts to WebP for 50-70% size reduction
2. Generates responsive versions for hero images
3. Maintains fallbacks for browser compatibility
4. Cross-platform support (macOS, Linux, Windows)

Performance Monitoring

Every push triggers Lighthouse CI with these thresholds:

• Performance: 80% minimum
• Accessibility: 90% minimum
• Best Practices: 80% minimum
• SEO: 90% minimum

SEO Optimization

Built-in features include:

• Meta tags for social sharing
• Structured data for search engines
• XML sitemaps for better indexing
• Atom feeds for RSS readers

Writing Your First Post

Here’s a complete example of a well-structured post:

---
layout: post
title: "My Awesome Tutorial"
excerpt: Learn how to build something amazing step by step
date: 2024-01-16 14:30:00 -0500
categories: [tutorial, development]
tags: [javascript, react, tutorial]
author: Your Name
image: /assets/images/posts/my-awesome-tutorial/hero-image.jpg
---

Your content here...

Image Best Practices

For hero images, use this responsive pattern:

<picture>
  <source media="(max-width: 480px)" srcset="/path/to/image-400.jpg">
  <source media="(max-width: 768px)" srcset="/path/to/image-800.jpg">
  <img src="/path/to/image-1200.jpg" alt="Description" loading="eager">
</picture>

For regular content images:

<picture>
  <source srcset="/path/to/image.webp" type="image/webp">
  <img src="/path/to/image.jpg" alt="Description" loading="lazy">
</picture>

Next Steps

1. Customize your _config.yml file
2. Create your first real post
3. Add your own images and run the optimization script
4. Push to GitHub and watch the magic happen
5. Monitor your site’s performance in the Actions tab

Need Help?

• Read the full guide: _docs/WRITING_POST.md
• Troubleshooting: Check the README.md
• Ideas: Look at the example posts for inspiration

---

Ready to start sharing your knowledge with the world? Delete this post and create your first real one! 🚀

Happy blogging!