DevOps Daily

A modern, open-source content platform for DevOps professionals, featuring articles, guides, exercises, news and resources to help you level up your DevOps skills.

Visit the live site at devops-daily.com

🌟 About

DevOps Daily is a community-driven platform dedicated to providing high-quality DevOps content. We believe in learning by doing and sharing knowledge with the community. This project powers the devops-daily.com website and is built with modern web technologies, deployed on Cloudflare Pages for optimal performance and reliability.

✨ Features

• 🚀 Modern Tech Stack: Built with Next.js, React and TypeScript
• � Rich Content: Articles, multi-part guides, exercises, quizzes, and interactive games
• �📱 Fully Responsive: Optimized experience across all devices
• 🌓 Dark Mode: Beautiful light and dark theme support
• 🔍 SEO Optimized: Comprehensive meta tags, structured data, and sitemap
• 🖥️ Syntax Highlighting: Beautiful code blocks with highlight.js
• 🗂️ Smart Organization: Content categorized by tags, categories, and authors
• 🎮 Interactive Learning: Quizzes and exercises for hands-on learning
• 📊 RSS Feed: Stay updated with the latest content
• 🎨 Beautiful UI: Built with Tailwind CSS and shadcn/ui components
• 🔧 PWA Support: Install as a Progressive Web App for offline access

💛 Sponsors

DevOps Daily is kept free by its sponsors. If your company wants to reach engineers who choose tools, see the sponsorship page.

• Bitrise: Managed runners for GitHub Actions
• Atomsized: AWS platform engineering and GitOps
• DigitalOcean: Cloud infrastructure for developers
• DevDojo: Developer community & tools
• SMTPfast: Developer-first email API
• QuizAPI: Developer-first quiz platform

Tech Stack

Versions live in package.json; this is the shape of the thing.

• Framework: Next.js (App Router, static export)
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• Icons: Lucide Icons
• Content: Markdown with gray-matter
• Markdown Rendering: marked
• Syntax Highlighting: highlight.js
• Animations: Framer Motion

Getting Started

Prerequisites

• Node.js 22.13.1 or later (below 25)
• pnpm 10 or later (below 11)

Both are enforced by the engines field in package.json.

Installation

1. Clone the repository:

git clone https://github.com/The-DevOps-Daily/devops-daily.git
cd devops-daily

2. Install dependencies:

pnpm install

3. Start the development server:

pnpm dev

4. Open your browser:

Visit http://localhost:3000 to see the site running locally.

That's it! You're ready to start contributing. 🎉

Project Structure

devopsdaily/
├─ app/              # Next.js app directory (routes)
├─ components/       # React components
├─ content/          # Markdown content files
│  ├─ posts/         # Blog posts
│  ├─ guides/        # Multi-part guides
│  ├─ categories/    # Category information
│  ├─ quizzes/       # Quiz content
│  ├─ exercises/     # Exercise content
│  ├─ news/          # News content
│  ├─ checklists/    # Checklists
│  ├─ comparisons/   # Side-by-side tool comparisons
│  ├─ flashcards/    # Flashcard decks
│  ├─ interview-questions/  # Interview question sets
│  ├─ experts/       # Expert directory entries
│  ├─ newsletters/   # Newsletter issues
│  ├─ advent-of-devops/     # Advent calendar content
│  └─ hacktoberfest/ # Hacktoberfest content
├─ lib/              # Utility functions and data fetching
├─ public/           # Static assets
│  ├─ images/        # Image files
│  └─ fonts/         # Font files
└─ scripts/          # Build and generation scripts

Content Management

Content is markdown with YAML frontmatter under content/. Each type has its own required fields, and the templates for all of them live in CONTRIBUTING.md.

Scripts

The project includes several utility scripts:

• pnpm dev: Start development server
• pnpm build: Build the production-ready site
• pnpm generate-feed: Generate the RSS feed
• pnpm generate:images: Generate the OG cover image for new content
• pnpm images:all: Generate covers, convert them to PNG and prune the SVGs
• pnpm generate-search-index: Rebuild the client-side search index

pnpm build runs the image, markdown, search and feed steps for you, so you only need these individually when working on content locally.

🤝 Contributing

We welcome contributions from the community! Whether you want to:

• 📝 Write a new article or guide
• 🐛 Fix a bug or typo
• ✨ Add a new feature
• 📚 Improve documentation
• 🎨 Enhance the design

Please read our Contributing Guide to get started.

Quick Contribution Guide

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Make your changes
4. Run linting and formatting (pnpm run lint && pnpm run format)
5. Commit your changes (git commit -m 'Add some amazing feature')
6. Push to the branch (git push origin feature/amazing-feature)
7. Open a Pull Request

📝 Content Types

DevOps Daily supports multiple content types:

• Posts: Standard blog articles covering DevOps topics
• Guides: Multi-part comprehensive guides for in-depth learning
• Exercises: Hands-on practical exercises to reinforce learning
• Quizzes: Interactive quizzes to test your knowledge
• News: Curated DevOps news and updates
• Games: Interactive simulators and games, built as React components rather than markdown
• Checklists: Step-by-step operational checklists
• Comparisons: Side-by-side tool comparisons
• Flashcards: Spaced-repetition decks
• Interview Questions: Practice questions by topic
• Experts: Directory of engineers and the stacks they work with

🚀 Deployment

This project is deployed on Cloudflare Pages but can be deployed on any platform that supports Next.js static exports:

• Cloudflare Pages (current)
• Vercel
• Netlify
• AWS Amplify
• DigitalOcean App Platform

🐳 Docker

The project ships a multi-stage Dockerfile. The short version:

docker compose up dev     # dev server with hot-reload on :3000
docker compose up prod    # static export served by nginx on :8080

Build arguments, image internals and the full command reference are in docs/docker.md.

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgements

• shadcn/ui - Beautiful and accessible UI components
• Lucide Icons - Icon set
• Tailwind CSS - Utility-first CSS framework
• Next.js - React framework
• All our amazing contributors

💬 Community

• Website: devops-daily.com
• GitHub Issues: Report bugs or request features
• Pull Requests: Contribute to the project

---