Quick Start Guide
π Running Locally
Prerequisites Check
ruby --version # Should be 2.6+
gem --version # Should be installed
bundle --version # Install with: gem install bundler
Start Development Server
# Install dependencies (first time only)
bundle install
# Start local server
bundle exec jekyll serve
# Access at: http://localhost:4000
Alternative: Static Demo
# If Jekyll has issues, use the static demo
open index.html
π Adding Content
New Page
# Create new page
touch about.md
# Add front matter
---
layout: default
title: "About Us"
description: "Learn about our platform"
---
New Blog Post
# Create posts directory
mkdir -p _posts
# Create new post
touch _posts/2024-01-15-my-post.md
# Add front matter
---
layout: post
title: "My Post Title"
date: 2024-01-15
author: "Your Name"
categories: ["Category"]
tags: ["tag1", "tag2"]
---
New Course
# Create new course
touch _courses/my-course.md
# Add front matter
---
layout: course
title: "Course Title"
description: "Course description"
price: 99
instructor: "Instructor Name"
rating: 4.8
duration: "8 weeks"
level: "Beginner"
---
π οΈ Common Commands
# Start development server
bundle exec jekyll serve
# Build for production
bundle exec jekyll build
# Clean and rebuild
bundle exec jekyll clean && bundle exec jekyll serve
# Serve with drafts
bundle exec jekyll serve --drafts
# Serve with future posts
bundle exec jekyll serve --future
π§ Troubleshooting
Jekyll Wonβt Start
# Check Ruby version
ruby --version
# Reinstall dependencies
bundle install
# Clear cache
bundle exec jekyll clean
Page Not Updating
- Clear browser cache
- Restart Jekyll server
- Check file permissions
Sass Errors
- Use
index.html
static demo as fallback - Check CSS syntax in
assets/css/main.css
π File Structure
qastudy.online/
βββ _config.yml # Site configuration
βββ _layouts/ # Page templates
βββ _includes/ # Reusable components
βββ _courses/ # Course files
βββ _posts/ # Blog posts
βββ assets/
β βββ css/main.css # Styles
β βββ js/main.js # JavaScript
βββ index.md # Homepage
βββ index.html # Static demo
π¨ Quick Customization
Change Colors
Edit assets/css/main.css
:
:root {
--color-primary-500: #your-color; /* Main purple */
}
Add New Component
- Create HTML in
_includes/
- Add CSS to
assets/css/main.css
- Add JS to
assets/js/main.js
π± Testing
# Test responsive design
# Open browser dev tools and resize window
# Test mobile
# Use browser dev tools mobile view
π Deployment
GitHub Pages
git add .
git commit -m "Update site"
git push origin main
# Enable GitHub Pages in repo settings
Netlify/Vercel
- Connect repository
- Build command:
bundle exec jekyll build
- Publish directory:
_site
Need help? Check the full README.md for detailed documentation!