StackQuest - DevOps Knowledge Platform

Interactive knowledge platform for DevOps, SRE, and Cloud engineering with curated questions and hands-on challenges

Published on Oct 25, 2025

Reading time: 6 minutes.

Github
Live Demo

Built with

JavaScript
HTML5
CSS3
GitHub Actions
GitHub Pages

What is the significance of this?

  • Interactive Learning Platform: A quest-based knowledge platform for mastering DevOps, SRE, and Cloud engineering concepts
  • Curated Content: High-quality questions and challenges across 12+ categories covering essential DevOps skills
  • Session Tracking: Intelligent system prevents question repetition for focused learning
  • Zero Infrastructure: Static site deployed on GitHub Pages with automatic CI/CD
  • Open Source Community: Contributions welcome to expand the knowledge base
  • Mobile Responsive: Works seamlessly on desktop and mobile devices

How is automation accomplished?

  • GitHub Actions CI/CD: Automated deployment to GitHub Pages on every push to main branch
  • Static Site Architecture: No server-side dependencies, fast loading times
  • JavaScript-powered: Client-side question randomization and session management
  • Markdown-based Content: Easy content management through markdown files
  • Category-based Organization: Structured content across multiple technology domains
  • Session Persistence: Browser localStorage for tracking answered questions

Prerequisites

  • Web browser (Chrome, Firefox, Safari, or Edge)
  • No installation or setup required - works directly in browser

Source Code

https://github.com/Lforlinux/StackQuest

How to contribute?

Getting Started

  1. Fork the repository to your GitHub account
  2. Clone your fork locally: git clone https://github.com/yourusername/StackQuest.git
  3. Create a feature branch: git checkout -b feature/your-feature
  4. Make your changes (add questions, fix bugs, improve UI, etc.)
  5. Test locally by opening index.html in your browser
  6. Commit and push your changes: git push origin feature/your-feature
  7. Create a Pull Request on the original repository
  8. GitHub Actions will automatically deploy your changes once merged

Deployment

The project uses GitHub Actions for automatic deployment to GitHub Pages:

  • When changes are pushed to the main branch, GitHub Actions automatically deploys to GitHub Pages
  • Access your forked StackQuest via https://yourusername.github.io/StackQuest/

Manual Local Setup

1
2
3
4
5
6
7
8

# Clone the repository
git clone https://github.com/Lforlinux/StackQuest.git
cd StackQuest

# Open index.html in your browser
# Or use a local server:
python3 -m http.server 8000
# Then visit http://localhost:8000

GitHub Pages Configuration

  1. Go to repository Settings → Pages
  2. Select source branch: main
  3. Select folder: / (root)
  4. GitHub Pages will automatically build and deploy

Architecture

Static Site Components

  • HTML Structure: Semantic HTML5 with responsive design
  • CSS Styling: Modern gradient design with mobile-first approach
  • JavaScript Logic: Question randomization, session tracking, and UI interactions
  • Markdown Content: Organized question files by category
  • Asset Management: Images and stylesheets for branding

Content Structure

StackQuest/
├── index.html          # Main application interface
├── styles.css          # Responsive styling
├── script.js           # Core functionality
├── page.png            # Project screenshot
├── Random-Questions/   # Category-based questions
│   ├── linux.md
│   ├── networking.md
│   ├── docker.md
│   ├── kubernetes.md
│   └── ...
└── Challenge/          # Hands-on challenges
    ├── devops-challenges.md
    ├── SRE-challenge.md
    ├── aws-challenge.md
    └── kubernetes-challenge.md

Key Features

Question Categories

  • Linux: Command-line operations, system administration, shell scripting
  • Networking: TCP/IP, DNS, load balancing, network protocols
  • Git: Version control, branching strategies, workflows
  • Cloud: AWS, Azure, cloud architecture patterns
  • Terraform: Infrastructure as Code, state management
  • Docker: Containerization, Dockerfile optimization, orchestration
  • Kubernetes: Pods, services, deployments, cluster management
  • CI/CD: Pipeline automation, deployment strategies
  • Config Management: Ansible, Puppet, Chef patterns
  • DevOps: Best practices, culture, tooling
  • System Design: Architecture patterns, scalability
  • Security: DevSecOps, vulnerability management

Challenge Types

  • DevOps Challenges: Real-world scenarios and problem-solving
  • SRE Challenges: Reliability engineering, monitoring, incident response
  • AWS Challenges: Cloud infrastructure, services, best practices
  • Kubernetes Challenges: Container orchestration, cluster operations

User Experience Features

  • Random Question Mode: Get random questions from selected categories
  • Challenge Mode: Practice with hands-on scenarios
  • Category Selection: Choose specific topics to focus on
  • Session Tracking: Prevents seeing the same question twice
  • Responsive Design: Works on all device sizes
  • Loading Indicators: Smooth user experience with visual feedback

Content Management

Adding Questions

  1. Navigate to the appropriate category file in Random-Questions/
  2. Add questions in markdown format: 
    1
2
3
4
5
6
7

    ## Question Title

Question text here?

**Answer:**

Detailed answer explanation...
  3. Commit and push - GitHub Actions will deploy automatically

Adding Challenges

  1. Navigate to the appropriate challenge file in Challenge/
  2. Add challenge scenarios with solutions: 
    1
2
3
4
5
6
7

    ## Challenge Title

Scenario description...

**Solution:**

Step-by-step solution...
  3. Commit and push for automatic deployment

GitHub Actions Workflow

Automated Deployment Pipeline

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

name: Deploy to GitHub Pages

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./

This workflow automatically:

  • Triggers on push to main branch
  • Deploys static files to GitHub Pages
  • Updates the live site within minutes

Browser Compatibility

Supported Browsers

  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Edge (latest)
  • Mobile browsers (iOS Safari, Chrome Mobile)

Features Used

  • ES6 JavaScript: Modern JavaScript features
  • CSS Grid/Flexbox: Modern layout techniques
  • LocalStorage API: Session persistence
  • Fetch API: Content loading
  • CSS Gradients: Visual design

Performance Optimization

Loading Strategy

  • Lazy Loading: Questions loaded on-demand
  • Minimal Dependencies: No external libraries required
  • Static Assets: Fast CDN delivery via GitHub Pages
  • Caching: Browser caching for improved performance

Best Practices

  • Minimal JavaScript: Only essential functionality
  • CSS Optimization: Efficient selectors and properties
  • Image Optimization: Compressed images for faster loading
  • Semantic HTML: Better accessibility and SEO

Security Considerations

Client-Side Security

  • No Server-Side Code: Reduced attack surface
  • Content Security: All content is static and verified
  • XSS Prevention: Proper input sanitization
  • HTTPS: GitHub Pages provides SSL by default

Troubleshooting

Common Issues

  1. Questions Not Loading

    • Check browser console for errors
    • Verify markdown files are properly formatted
    • Ensure GitHub Pages deployment succeeded

  2. Session Tracking Not Working

    • Check browser localStorage permissions
    • Clear browser cache and try again
    • Verify JavaScript is enabled

  3. Styling Issues

    • Clear browser cache
    • Check CSS file is loading correctly
    • Verify responsive breakpoints

  4. Deployment Issues

    • Check GitHub Actions workflow status
    • Verify repository settings for Pages
    • Check branch protection rules

Future Enhancements

Major Feature: LLM Integration

The primary focus for future development is LLM (Large Language Model) Integration to revolutionize the learning experience:

  • AI-Powered Question Generation: Instead of static markdown files, LLM will dynamically generate contextually relevant questions based on selected categories
  • Intelligent Answer Generation: AI will provide comprehensive, detailed explanations tailored to each question
  • Adaptive Learning: LLM will adjust question difficulty and topics based on user performance and learning patterns
  • Interactive Q&A Sessions: Real-time conversation with AI to clarify concepts, provide examples, and answer follow-up questions
  • Personalized Learning Paths: AI-driven recommendations for what to study next based on knowledge gaps
  • Context-Aware Responses: LLM understands the full context of DevOps/SRE/Cloud engineering to provide accurate, industry-relevant answers
  • Multi-Model Support: Integration with various LLM providers (OpenAI, Anthropic, local models) for flexibility

Additional Planned Features

  • User Progress Tracking: Track learning progress across sessions with AI-powered insights
  • Difficulty Levels: Beginner, intermediate, advanced categorization with dynamic adjustment
  • Search Functionality: AI-enhanced semantic search for questions by keywords and concepts
  • Export/Import: Save progress and share with others
  • Dark Mode: Theme toggle for better viewing
  • Statistics Dashboard: Track learning metrics with AI-generated recommendations

Technical Improvements

  • LLM API Integration: Connect with OpenAI, Anthropic, or self-hosted LLM services
  • Progressive Web App: Offline support and installability with cached AI responses
  • Service Worker: Caching for offline access and AI response optimization
  • Vector Database: Semantic search capabilities for enhanced question matching
  • Multi-language Support: Internationalization with LLM-powered translation
  • Advanced Analytics: User engagement metrics with AI-driven insights

Contributing

Development Setup

  1. Fork the repository
  2. Create feature branch: git checkout -b feature/your-feature
  3. Make changes and test locally
  4. Commit changes: git commit -m "Add your feature"
  5. Push to branch: git push origin feature/your-feature
  6. Create Pull Request

Contribution Guidelines

  • Question Quality: Ensure questions are clear and accurate
  • Answer Completeness: Provide detailed explanations
  • Format Consistency: Follow existing markdown structure
  • Category Appropriateness: Place questions in correct categories
  • Testing: Test locally before submitting PR

Code Standards

  • HTML: Semantic markup and accessibility
  • CSS: Mobile-first responsive design
  • JavaScript: ES6+ features, clean code
  • Markdown: Consistent formatting and structure
  • Documentation: Clear README and comments

Conclusion

StackQuest demonstrates modern web development practices for creating interactive learning platforms, showcasing:

  • Static Site Excellence with zero infrastructure overhead
  • Automated CI/CD with GitHub Actions and Pages
  • User-Centric Design with responsive and accessible interface
  • Content Management through markdown-based structure
  • Community-Driven open-source knowledge sharing

The project serves as both a functional learning tool and a comprehensive example of modern web development, making it an excellent addition to any DevOps engineer’s portfolio.

Live Demo: StackQuest
Source Code: https://github.com/Lforlinux/StackQuest

Comments