🐧 LinuxID - Modern Static Site Generator

A professional static site generator built with Next.js that transforms markdown content into beautiful, fast, SEO-optimized websites. Features modern UI design with Lucide React icons, full-width featured images, and consistent styling throughout.

✨ Key Features

🎨 Modern Design System - Lucide React icons, glass-morphism UI, professional typography
📝 Markdown-Based Content - Blog posts, pages, reviews with frontmatter metadata
🖼️ Full-Width Featured Images - Edge-to-edge image display with SVG fallbacks
🎯 Consistent Styling - Unified design across featured and regular content sections
🔄 Random Featured Content - Dynamic featured post selection for each visitor
🌈 Color-Coded Sections - Distinct visual themes for different content types
⚡ Static Export - Pure HTML/CSS/JS for any CDN or static hosting
🔍 Client-Side Search - Real-time search across all content types
📱 Fully Responsive - Mobile-first design with adaptive layouts
🚀 Zero Configuration - No database, no APIs, no server required

🎨 Modern UI Features

Professional Icon System

Lucide React Icons - Consistent, scalable icons throughout
Semantic Usage - Search, calendar, navigation, social media icons
Perfect Alignment - Proper sizing (16px navigation, 14px content, 12px small)
Accessibility - Screen reader friendly icons with proper labels

Featured Images System

Full-Width Display - Edge-to-edge images spanning complete card width
Smart Fallbacks - Custom SVG default image for posts without featured images
Optimized Loading - Next.js Image component with explicit dimensions
Responsive Design - Images adapt to all screen sizes

Content Sections

Featured Tutorials - Highlighted content with #F38181 coral background
All Solutions & Insights - Regular content with teal-to-dark gradient
Random Selection - Featured posts randomly selected per visitor
Consistent Layout - Same grid system and typography across sections

🚀 Quick Start

1. Clone & Install

git clone https://github.com/geek-id/linuxid-project.git
cd linuxid-project/headless-cms
npm install

2. Configure Your Site

# Copy environment configuration
cp env.example .env.local

# Edit with your site details
nano .env.local

3. Start Development

npm run dev
# Visit http://localhost:3000

4. Add Your Content

Create .md files in content/ directories:

content/
├── posts/          # Blog posts with featured image support
├── pages/          # Static pages 
└── reviews/        # Product reviews with ratings

5. Add Images

public/static/img/  # Place your images here
├── featured/       # Featured images for posts
├── gallery/        # Gallery images
└── default-post.svg # Automatic fallback image

6. Build for Production

npm run build
# Static site generated in 'out/' directory

📝 Content Management

Post Structure with Featured Images

---
title: "Complete Guide to Linux System Administration"
slug: "linux-system-admin-guide"
excerpt: "Comprehensive guide covering essential Linux administration skills"
featured: true                    # Shows in Featured Tutorials
published: true
publishedAt: "2024-05-24T10:00:00Z"
author: 
  name: "LinuxID Team"
  email: "[email protected]"
category: "System Administration"
tags: ["linux", "sysadmin", "tutorials"]

# Featured Image (optional)
featuredImage:
  url: "/static/img/featured/linux-admin.jpg"
  alt: "Linux system administration dashboard"

# SEO Configuration
seo:
  title: "Linux System Administration Guide | LinuxID"
  description: "Learn essential Linux system administration skills"
  keywords: ["linux", "system administration", "devops"]
---

# Your Markdown Content

Write your content here with full markdown support.
Images automatically display edge-to-edge with fallback support.

![Example Image](/static/img/example.jpg)

Content Types

📝 Blog Posts (content/posts/)

Full-width featured images or SVG fallback
Random featured post selection
Category and tag organization
Reading time calculation

⭐ Reviews (content/reviews/)

Star ratings (1-5) with visual display
Product evaluation with pros/cons
Featured image support
Detailed review structure

📄 Pages (content/pages/)

Static content pages
Custom layouts
Featured image support

🎨 Design System

Color Schemes

Featured Tutorials: Solid #F38181 (coral) background
All Solutions & Insights: Teal-to-dark gradient (#08D9D6 to #252A34)
Footer Tags: Light hover effects with proper font weight changes

Typography

Primary Font: Inter (300, 400, 500, 600, 700 weights)
Code Font: JetBrains Mono (400, 500 weights)
Responsive Scaling: Mobile-first approach with proper hierarchy

Icons

Icon Library: Lucide React
Usage: Navigation, content types, social media, actions
Sizing: Consistent scaling across all components
Accessibility: Proper alt text and semantic usage

🖼️ Image Management

Featured Images

# Recommended structure
public/static/img/
├── featured/              # Post featured images
│   ├── linux-guide.jpg
│   └── docker-tutorial.jpg
├── gallery/               # Content images
│   ├── screenshots/
│   └── diagrams/
└── default-post.svg       # Automatic fallback

Image Optimization

Format Support: JPG, PNG, WebP, SVG
Automatic Optimization: Next.js Image component
Responsive Sizing: Adapts to container width
Lazy Loading: Performance optimization
SVG Fallback: Custom Linux-themed default image

🚀 Deployment

Build Process

npm run build
# Generates optimized static files:
# - HTML pages for all content
# - Optimized CSS with design system
# - JavaScript with Lucide icons
# - Static assets and images
# - SEO files (sitemap, robots.txt)

Hosting Options

🔥 Recommended: Cloudflare Pages

# Build settings:
# - Build command: npm run build
# - Output directory: out
# - Node.js version: 18+

⚡ Vercel

npx vercel --prod

🌐 Netlify

# Drag & drop 'out' folder or connect GitHub

📄 GitHub Pages

git subtree push --prefix out origin gh-pages

🛠️ Development

Project Structure

headless-cms/
├── src/
│   ├── app/
│   │   ├── page.tsx              # Homepage with featured content
│   │   ├── posts/page.tsx        # Blog listing with search
│   │   ├── reviews/page.tsx      # Reviews with ratings
│   │   └── globals.css           # Design system & styling
│   ├── components/
│   │   ├── Footer.tsx            # Footer with Lucide icons
│   │   ├── ThemeToggle.tsx       # Dark/light mode
│   │   └── SearchBox.tsx         # Client-side search
│   ├── lib/
│   │   ├── content/parser.ts     # Markdown processing
│   │   └── config/site.ts        # Site configuration
│   └── types/content.ts          # TypeScript definitions
├── content/                      # Markdown content
│   ├── posts/                    # Blog posts
│   ├── pages/                    # Static pages
│   └── reviews/                  # Product reviews
├── public/
│   ├── static/img/               # Images & assets
│   │   └── default-post.svg      # Fallback image
│   └── favicon.ico
└── out/                          # Generated static site

Available Scripts

npm run dev          # Development server with hot reload
npm run build        # Generate static site
npm run start        # Preview production build
npm run lint         # Code quality check
npm run type-check   # TypeScript validation

📊 Performance Features

Optimization

Static Generation: All pages pre-rendered at build time
Image Optimization: Automatic Next.js image processing
Code Splitting: Minimal JavaScript bundles
CSS Optimization: Tailwind CSS purging
Icon Tree-Shaking: Only used Lucide icons included

SEO Features

Meta Tags: Automatic generation for all pages
Open Graph: Social media sharing optimization
Structured Data: JSON-LD schema markup
Sitemap: Automatic XML sitemap generation
Canonical URLs: Proper URL structure

Performance Metrics

⚡ Build Time: ~30 seconds for typical content
📦 Bundle Size: ~180KB (gzipped) with icons
🚀 Page Load: ~200ms from CDN
🎯 Lighthouse: 100/100 performance potential
🔍 Search: Sub-millisecond client-side filtering

🎯 Current Features

✅ Implemented

Modern UI with Lucide React icons
Full-width featured images with SVG fallbacks
Consistent styling across all sections
Random featured post selection
Color-coded content sections
Responsive design with mobile-first approach
Footer with proper hover effects
Client-side search functionality
Static site generation with Next.js
Markdown content management
TypeScript for type safety

🎨 Design Highlights

Professional icon system throughout
Edge-to-edge featured images
Smooth hover effects and transitions
Consistent typography and spacing
Modern glass-morphism navigation
Accessible color schemes
Mobile-optimized touch interfaces

📚 Documentation

Environment Setup - Configuration template
Content Guide - Markdown structure
Design System - Colors, typography, icons
Deployment - Hosting options and CI/CD
Changelog - Version history and updates

🤝 Contributing

Fork the repository
Create feature branch: git checkout -b feature/amazing-feature
Test with npm run build
Submit Pull Request

📄 License

MIT License - see LICENSE file for details.

🐧 Built for Linux enthusiasts with Next.js 14, TypeScript, and Lucide React
⚡ Modern static generation with professional design
🎨 Full-width images, consistent styling, beautiful icons
🚀 Deploy anywhere - CDN-optimized and infinitely scalable
🔍 Instant search without servers or databases

⚙️ Environment Configuration

LinuxID uses environment variables for centralized site configuration. This eliminates hardcoded values and provides clean, deployment-friendly settings.

Quick Configuration

# Basic site information (.env.local)
NEXT_PUBLIC_SITE_NAME=Your Site Name
NEXT_PUBLIC_SITE_DESCRIPTION=Your site description for SEO
NEXT_PUBLIC_SITE_URL=https://yourdomain.com
NEXT_PUBLIC_SITE_KEYWORDS=keyword1,keyword2,keyword3
NEXT_PUBLIC_SITE_AUTHOR=Your Name

Advanced Settings

# Social media integration
NEXT_PUBLIC_TWITTER_HANDLE=@yourusername
NEXT_PUBLIC_GITHUB_URL=https://github.com/your-repo

# Analytics (optional)
NEXT_PUBLIC_GA_TRACKING_ID=G-XXXXXXXXXX
NEXT_PUBLIC_PLAUSIBLE_DOMAIN=yourdomain.com

📖 Complete Configuration Guide →

Name		Name	Last commit message	Last commit date
Latest commit History 92 Commits
.github/workflows		.github/workflows
content		content
docs		docs
public		public
src		src
.gitignore		.gitignore
.lighthouserc.json		.lighthouserc.json
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
_headers		_headers
env.example		env.example
eslint.config.mjs		eslint.config.mjs
next.config.js		next.config.js
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

License

geek-id/linuxid-headless-cms

Folders and files

Latest commit

History

Repository files navigation