A high-performance, SEO-optimized clone of dev.to built with Gatsby, designed to rank #1 on Google and Bing search engines. This platform aggregates developer content from the dev.to API and presents it in an optimized, fast-loading interface.
- Comprehensive SEO Strategy: Implements all best practices from the included SEO guidelines
- Structured Data: Rich snippets with JSON-LD for articles, organizations, and website data
- Meta Tags: Optimized title tags, meta descriptions, Open Graph, and Twitter Cards
- Sitemap Generation: Automatic XML sitemap generation with proper priority and change frequency
- Robots.txt: Optimized for search engine crawling
- Canonical URLs: Proper canonicalization to avoid duplicate content issues
- Schema Markup: Article, Organization, WebSite, and FAQ schemas
- Core Web Vitals Optimized: Excellent LCP, FID, and CLS scores
- Image Optimization: Gatsby Image with WebP/AVIF support and lazy loading
- Code Splitting: Automatic code splitting for optimal loading
- Preloading: Critical resource preloading and DNS prefetching
- Caching: Intelligent caching strategies for API responses
- Progressive Web App: PWA capabilities with offline support
- Responsive Design: Mobile-first approach with perfect mobile experience
- Dark Mode: System preference detection with manual toggle
- Fast Search: Intelligent search with suggestions and filters
- Accessibility: WCAG compliant with proper ARIA labels and keyboard navigation
- Loading States: Smooth loading animations and skeleton screens
- Real-time Content: Fetches latest articles from dev.to API
- Smart Categorization: Intelligent tagging and categorization system
- Related Articles: AI-powered content recommendations
- Reading Time: Automatic reading time calculation
- Social Sharing: Native and custom sharing options
- Framework: Gatsby 5 (React-based static site generator)
- Styling: CSS Custom Properties with responsive design
- API: Dev.to REST API integration
- Deployment: Cloudflare Pages (configured with Wrangler)
- Analytics: Google Analytics 4 integration
- Performance: Lighthouse CI for continuous performance monitoring
├── src/
│ ├── components/ # Reusable React components
│ │ ├── layout.js # Main layout component
│ │ ├── seo.js # SEO component with structured data
│ │ └── article-card.js # Article display component
│ ├── pages/ # Gatsby pages
│ │ ├── index.js # Homepage
│ │ ├── articles.js # Articles listing page
│ │ ├── search.js # Search functionality
│ │ ├── tags.js # Tags browsing page
│ │ ├── about.js # About page
│ │ ├── privacy.js # Privacy policy
│ │ └── terms.js # Terms of service
│ ├── templates/ # Dynamic page templates
│ │ ├── article.js # Individual article pages
│ │ └── tag.js # Tag-specific pages
│ ├── services/ # API and utility services
│ │ └── devto-api.js # Dev.to API integration
│ ├── images/ # Static images and assets
│ └── style.css # Global styles and CSS variables
├── static/ # Static assets
│ └── robots.txt # Search engine directives
├── gatsby-config.js # Gatsby configuration
├── gatsby-node.js # Build-time page generation
├── gatsby-browser.js # Browser-specific code
├── gatsby-ssr.js # Server-side rendering config
└── wrangler.jsonc # Cloudflare deployment config
- Node.js 18+
- npm or yarn or bun
- Git
-
Clone the repository
git clone https://github.com/your-username/devhub.git cd devhub -
Install dependencies
npm install # or yarn install # or bun install
-
Start development server
npm run develop # or yarn develop # or bun run develop
-
Open your browser Navigate to
http://localhost:8000
npm run build
# or
yarn build
# or
bun run buildnpm run deploy
# or
yarn deploy
# or
bun run deployCreate a .env file in the root directory:
GATSBY_SITE_URL=https://your-domain.com
GATSBY_GA_MEASUREMENT_ID=G-XXXXXXXXXX
DEV_TO_API_KEY=your-dev-to-api-key (optional)Update gatsby-config.js with your site metadata:
siteMetadata: {
title: `Your Site Title`,
description: `Your site description`,
siteUrl: `https://your-domain.com`,
social: {
twitter: `your-twitter`,
github: `your-github`,
},
}- ✅ XML Sitemap with proper structure
- ✅ Robots.txt optimization
- ✅ Canonical URLs
- ✅ Meta robots tags
- ✅ Structured data (JSON-LD)
- ✅ Open Graph tags
- ✅ Twitter Card tags
- ✅ Breadcrumb navigation
- ✅ Internal linking strategy
- ✅ Core Web Vitals optimization
- ✅ Image optimization and lazy loading
- ✅ Code splitting and bundling
- ✅ Critical CSS inlining
- ✅ Resource preloading
- ✅ Caching strategies
- ✅ Keyword-optimized titles and descriptions
- ✅ Header tag hierarchy (H1-H6)
- ✅ Alt text for images
- ✅ Content freshness indicators
- ✅ Reading time calculation
- ✅ Related content suggestions
- ✅ Mobile-first responsive design
- ✅ Fast loading times
- ✅ Accessibility compliance
- ✅ Clear navigation structure
- ✅ Search functionality
- ✅ Error handling and 404 pages
Based on the comprehensive SEO guidelines included in this project:
- Mobile-first indexing optimization
- Core Web Vitals excellence
- E-A-T (Expertise, Authoritativeness, Trustworthiness) signals
- Semantic HTML and structured data
- User engagement optimization
- Exact keyword matching in strategic locations
- Desktop version parity with mobile
- Social signals integration
- Structured data emphasis
- Meta keywords tag inclusion
Target performance scores:
- Lighthouse Performance: 95+
- Lighthouse SEO: 100
- Lighthouse Accessibility: 95+
- Lighthouse Best Practices: 100
- Core Web Vitals: All green
- Smart Search: Searches through titles, descriptions, and tags
- Tag Filtering: Browse content by programming languages and topics
- Trending Topics: Dynamic trending tags based on popularity
- Search Suggestions: Intelligent search suggestions
- Advanced Filters: Filter by date, popularity, and content type
- Modern UI: Clean, professional design
- Dark Mode: System preference detection with manual toggle
- Responsive: Perfect experience on all devices
- Loading States: Smooth animations and skeleton screens
- Accessibility: WCAG 2.1 AA compliant
- Offline Support: Basic offline functionality
- App-like Experience: Native app feel
- Push Notifications: (Optional) Article update notifications
- Install Prompt: Add to home screen functionality
- Privacy Policy: Comprehensive privacy policy
- Terms of Service: Clear terms and conditions
- Security Headers: Proper security headers implementation
- GDPR Compliance: Privacy-focused design
- Content Security Policy: XSS protection
- Connect your GitHub repository to Cloudflare Pages
- Set build command:
npm run build - Set output directory:
public - Deploy automatically on push
- Netlify: Works out of the box
- Vercel: Gatsby support included
- GitHub Pages: Static deployment ready
- Google Analytics 4: User behavior tracking
- Search Console: SEO performance monitoring
- Core Web Vitals: Performance monitoring
- Error Tracking: Built-in error boundaries
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Dev.to for providing the API and inspiration
- Gatsby for the amazing framework
- The developer community for continuous inspiration and feedback
For support, email hello@devhub.dev or create an issue in this repository.
Built with ❤️ for the developer community