OpenSecFlow Website

A high-performance, SEO-optimized website built with Astro v5, TypeScript, and Tailwind CSS.

Features

• ⚡ High Performance: Built with Astro v5 for optimal Core Web Vitals
• 🔍 SEO Optimized: Comprehensive SEO setup with sitemaps, robots.txt, and semantic HTML
• 📚 Content Collections: Type-safe content management for blog posts and videos
• 🎨 Modern Design: Beautiful UI with Tailwind CSS and responsive design
• 🚀 Developer Friendly: Clean architecture and excellent developer experience

Tech Stack

• Astro v5 - The web framework for content-driven websites
• TypeScript - Type-safe JavaScript
• Tailwind CSS - Utility-first CSS framework
• MDX - Markdown with JSX support

Getting Started

Prerequisites

• Node.js 18+ and npm

Installation

npm install

Development

Start the development server:

npm run dev

Visit http://localhost:4321 to see your site.

Build

Build your site for production:

npm run build

The built files will be in the dist directory.

Preview

Preview the production build:

npm run preview

Project Structure

├── public/          # Static assets
├── src/
│   ├── components/  # Reusable Astro components
│   ├── content/     # Content collections (blog, videos)
│   ├── layouts/     # Page layouts
│   └── pages/       # File-based routing
├── astro.config.mjs # Astro configuration
└── package.json

Content Management

Blog Posts

Blog posts are managed using Astro Content Collections. Add new posts in src/content/blog/ as markdown files.

Videos

Videos are stored in src/content/videos/videos.json. Add new videos by updating the JSON file.

SEO

The site includes comprehensive SEO features:

• Meta tags and Open Graph tags
• Sitemap generation (@astrojs/sitemap)
• Robots.txt (astro-robots-txt)
• Semantic HTML structure
• Canonical URLs

License

ISC

OpenSecFlow