Hero Image

Project Structure

This document describes the directory structure and file organization of the Jekyll blog project.

📁 Root Directory

movever.github.io/
├── _config.yml                    # Jekyll configuration file
├── _layouts/                      # Layout templates directory
│   ├── default.html              # Default layout template
│   └── post.html                 # Post layout template
├── _posts/                        # Blog posts directory
│   └── 2024-01-15-master-youtube-video-summaries-with-ai.md
├── assets/                        # Static assets directory
│   └── images/                   # Image files
│       └── hero-image.png        # Hero section image
├── _site/                         # Generated site (auto-created)
├── index.html                     # Homepage
├── dev.md                         # Development guide page
├── icons.md                       # Icon examples page
├── Gemfile                        # Ruby dependencies
├── Gemfile.lock                   # Locked dependency versions
└── README.md                      # Project documentation

📋 File Descriptions

Configuration Files

  • _config.yml - Main Jekyll configuration file
    • Site metadata (title, description, author)
    • Build settings (markdown engine, permalink structure)
    • Plugin configuration
    • Default layout settings
  • Gemfile - Ruby dependency management
    • Jekyll version specification
    • Plugin dependencies
    • Platform-specific gems

Layout Templates (_layouts/)

  • default.html - Base layout template
    • HTML structure and meta tags
    • Tailwind CSS integration
    • Lucide icons setup
    • Custom scrollbar styles
    • Footer with GitHub link
  • post.html - Blog post layout
    • Article structure
    • Post title and date display
    • Prose styling for content

Content Files

  • index.html - Homepage
    • Hero section with image
    • Articles list
    • Products section
    • Development links
  • dev.md - Development guide
    • Local setup instructions
    • Deployment guide
    • Troubleshooting tips
  • icons.md - Icon examples
    • Lucide icon showcase
    • Usage examples
    • Code snippets

Blog Posts (_posts/)

  • 2024-01-15-master-youtube-video-summaries-with-ai.md
    • Blog post about AI video summarization
    • Front matter with metadata
    • Markdown content

Static Assets (assets/)

  • images/hero-image.png - Hero section image
    • Used in homepage hero section
    • Optimized for web display

Generated Files (_site/)

  • Auto-generated by Jekyll
  • Contains compiled HTML, CSS, and assets
  • Deployed to GitHub Pages
  • Should not be edited manually

🔧 Build Process

  1. Jekyll reads _config.yml for configuration
  2. Processes markdown files in _posts/ and root directory
  3. Applies layouts from _layouts/ directory
  4. Generates static HTML files in _site/ directory
  5. GitHub Pages serves content from _site/ directory

📝 Naming Conventions

  • Posts: YYYY-MM-DD-title.md format
  • Pages: page-name.md or page-name.html
  • Layouts: layout-name.html
  • Assets: Organized in subdirectories by type

🚀 Deployment

  • GitHub Pages automatically builds and deploys
  • Source: Repository root directory
  • Output: _site/ directory
  • URL: https://movever.github.io/

🛠️ Development

  • Local server: bundle exec jekyll serve
  • Build: bundle exec jekyll build
  • Clean: bundle exec jekyll clean

📚 Key Technologies

  • Jekyll - Static site generator
  • Tailwind CSS - Utility-first CSS framework
  • Lucide Icons - Icon library
  • GitHub Pages - Hosting platform
  • Ruby - Programming language for Jekyll