ModernBlog - Gatsby TypeScript Blog Template

A beautiful, modern blog template built with Gatsby, TypeScript, and styled-components.

✨ Features

• ⚡ Lightning Fast - Built with Gatsby for optimal performance
• 📱 Fully Responsive - Beautiful on all devices and screen sizes
• 🔧 TypeScript - Full type safety and better developer experience
• 📝 Markdown Support - Write posts in Markdown with frontmatter
• 🎯 SEO Optimized - Built-in SEO optimization and meta tags
• ♿ Accessible - WCAG compliant with proper ARIA labels
• 🚀 Modern Stack - React 18, styled-components, and latest dependencies

🚀 Quick Start

1. Install dependencies

   npm install

2. Start development server

   npm run develop

3. Open your browser Navigate to http://localhost:8000

📁 Project Structure

gatsby-blog-template/
├── src/
│   ├── components/          # Reusable React components
│   │   ├── Header.tsx
│   │   ├── Footer.tsx
│   │   └── Layout.tsx
│   ├── pages/              # Page components
│   │   ├── index.tsx       # Home page
│   │   ├── blog.tsx        # Blog listing page
│   │   └── about.tsx       # About page
│   ├── templates/          # Page templates
│   │   └── blog-post.tsx   # Individual blog post template
│   ├── content/blog/       # Blog posts in Markdown
│   ├── styles/            # Global styles and theme
│   └── images/            # Static images
├── gatsby-config.ts       # Gatsby configuration
├── gatsby-node.ts         # Gatsby Node APIs
└── package.json

📝 Writing Blog Posts

Create new blog posts by adding Markdown files to src/content/blog/. Each post should have frontmatter:

---
title: "Your Post Title"
date: "2024-01-15"
description: "A brief description of your post"
tags: ["tag1", "tag2", "tag3"]
---

# Your post content here

Write your content in Markdown...

🎨 Customization

Colors and Theme

Edit src/styles/GlobalStyles.ts to customize colors, typography, and spacing:

// Update gradient colors
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

// Update text colors
color: rgba(255, 255, 255, 0.8);

Site Metadata

Update site information in gatsby-config.ts:

siteMetadata: {
  title: `Your Blog Name`,
  description: `Your blog description`,
  author: `@yourusername`,
  siteUrl: `https://your-blog.com`,
},

🚀 Static Hosting & Deployment

This template generates 100% static files and can be hosted on any static hosting service.

Build for Production

npm run build

This creates a public/ folder with all static files ready for deployment.

Deployment Options

1. Netlify (Recommended)

# Build settings:
Build command: npm run build
Publish directory: public

2. Vercel

npm i -g vercel
vercel --prod

3. GitHub Pages

• Push to GitHub
• Enable GitHub Actions (included in .github/workflows/)
• Your site will be available at https://username.github.io/repository-name

4. Manual Static Hosting

Upload the contents of public/ folder to any web server:

• AWS S3 + CloudFront
• Firebase Hosting
• Surge.sh
• Any traditional web hosting

🌐 Why Static Hosting Works

• No server required - Just HTML, CSS, JS files
• Lightning fast - Served from CDN edge locations
• Highly secure - No server-side vulnerabilities
• Cost effective - Many free hosting options
• Scalable - Handles traffic spikes effortlessly

📦 Available Scripts

• npm run develop - Start development server
• npm run build - Build for production
• npm run serve - Serve production build locally
• npm run clean - Clean Gatsby cache
• npm run type-check - Run TypeScript type checking

🛠 Built With

• Gatsby - Static site generator
• React - UI library
• TypeScript - Type safety
• styled-components - CSS-in-JS styling
• GraphQL - Data querying

📄 License

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

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

⭐ Show Your Support

If this project helped you, please give it a ⭐ star on GitHub!