Jekyll Local Development Setup

Your Jekyll site is now set up for local development! 🎉

Quick Start

Your site is currently running at: http://localhost:4000

Essential Commands

Start Development Server

bundle exec jekyll serve --livereload

• Starts Jekyll server on http://localhost:4000
• --livereload automatically refreshes browser when you make changes
• Use Ctrl+C to stop the server

Build Site (without serving)

bundle exec jekyll build

• Builds site to _site/ directory
• Useful for production builds

Clean Build Cache

bundle exec jekyll clean

• Removes _site/ and .jekyll-cache/ directories
• Useful when things seem cached incorrectly

File Structure

├── _config.yml          # Jekyll configuration
├── _layouts/            # Your layout templates
│   ├── default.html     # Main layout with sidebar
│   └── blog.html        # Blog post layout
├── _posts/              # Blog posts (YYYY-MM-DD-title.md)
├── Gemfile              # Ruby dependencies
├── index.html           # Homepage
├── about.html           # About page
└── _site/               # Generated site (don't edit)

Development Workflow

1. Make changes to your files
2. Save - Jekyll will automatically rebuild (with --livereload)
3. Refresh browser to see changes (or it auto-refreshes)
4. Commit and push when ready to deploy

Creating New Blog Posts

1. Create file: _posts/YYYY-MM-DD-title.md
2. Add front matter: ```yaml — layout: blog title: “Your Post Title” date: 2024-12-20 og_title: “Your Post Title - Jeba’s Blog” og_description: “Description for social media” og_image: “https://graydot.ai/images/post-image.png” tags: [“tag1”, “tag2”] —

Your content here…

## Creating New Pages

1. Create file: `new-page.html` or `new-page.md`
2. Add front matter:
```yaml
---
layout: default
title: "Page Title"
og_title: "Page Title - Jeba's Site"
og_description: "Page description for social media"
---

Your content here...

Environment-Specific Content

Use Jekyll conditionals for different environments:

  <!-- Only shows on GitHub Pages -->

Debugging Tips

Site Won’t Build?

• Check _config.yml for syntax errors
• Look for YAML front matter errors in posts
• Run bundle exec jekyll doctor for diagnostics

Changes Not Showing?

• Try Ctrl+F5 for hard refresh
• Restart Jekyll server
• Run bundle exec jekyll clean then restart

Ruby/Gem Issues?

• Make sure Ruby 3.4.4 is active: ruby --version
• Reinstall gems: bundle install
• Update gems: bundle update

Testing OpenGraph Meta Tags

Use these tools to test your social media previews:

• Twitter: https://cards-dev.twitter.com/validator
• Facebook: https://developers.facebook.com/tools/debug/
• LinkedIn: https://www.linkedin.com/post-inspector/

GitHub Pages vs Local

• Local: Uses Jekyll ~3.10.0 (GitHub Pages compatible)
• Production: GitHub Pages automatically builds your site
• Same output: Your local site matches production exactly

Common Jekyll Commands

# Install dependencies
bundle install

# Update dependencies
bundle update

# Start server (basic)
bundle exec jekyll serve

# Start with live reload
bundle exec jekyll serve --livereload

# Start with drafts
bundle exec jekyll serve --drafts

# Build for production
JEKYLL_ENV=production bundle exec jekyll build

# Clean and rebuild
bundle exec jekyll clean && bundle exec jekyll build

Next Steps

1. Edit content in your layouts and pages
2. Add blog posts in _posts/
3. Test social media previews with the tools above
4. Push changes to GitHub - they’ll auto-deploy to GitHub Pages

Happy coding! 🚀