A modern React Static Site Generator that combines the power of React, Vite, Esbuild, and Tailwind CSS for building lightning-fast, SEO-optimized websites.
A modern React Static Site Generator that combines the power of React, Vite, Esbuild, and Tailwind CSS for building lightning-fast, SEO-optimized websites.
- ā” Blazing Fast - Leverage Vite's ultra-fast development server and optimized production builds
- š SEO Optimized - Pre-rendered HTML makes your content immediately available to search engines
- āļø Zero Config - Works out of the box with sensible defaults
- š Array-based Routing - Automatic route generation with lazy loading
- š
CSS Support - Built-in support for Tailwind CSS, CSS modules, and Sass
- š¼ļø Image Optimization - Automatic image optimization and lazy loading
- š± Modern Stack - React + Vite + Tailwind CSS
Install RS-SSG globally:
``bashUsing npm
npm install -g rs-ssg
$3
bash
rs-ssg init my-project
cd my-project
`$3
bash
Using npm
npm run devUsing yarn
yarn devUsing pnpm
pnpm devOr using global command
rs-ssg dev
`Your site will be available at
Project Structure
my-project/
āāā dist/ # Generated static files
āāā public/ # Static assets
āāā src/
ā āāā components/ # Reusable React components
ā āāā pages/ # Page components
ā āāā App.jsx # Main application component
ā āāā client.jsx # Client-side hydration entry
ā āāā index.css # Global styles
ā āāā routes.js # Route definitions
āāā index.html # HTML template
āāā ssg.config.js # RS-SSG configuration
āāā package.json
Routing
RS-SSG uses an array-based routing system with automatic code splitting:
javascript
// src/routes.js
import { lazy } from "react";const routes = [
{
path: '/',
component: lazy(() => import('./pages/Home.jsx')),
entry: "./src/pages/Home.jsx",
},
{
path: '/about',
component: lazy(() => import('./pages/About.jsx')),
entry: "./src/pages/About.jsx",
},
{
path: '/blogs/:slug',
component: lazy(() => import('./pages/BlogPost.jsx')),
entry: "./src/pages/BlogPost.jsx",
},
];
export default routes;
`$3
Create dynamic routes using parameter notation:
javascript
// Route configuration
{
path: '/blogs/:slug',
component: lazy(() => import('./pages/BlogPost.jsx')),
entry: "./src/pages/BlogPost.jsx",
}
`javascript
// src/pages/BlogPost.jsx
export default function BlogPost({ data }) {
const slug = data?.id;
return (
{data.title}
);
}// Generate static paths for all blog posts
export async function getStaticPaths() {
const posts = await fetchAllPosts();
return {
paths: posts.map(post => ({
params: { id: post.id }
})),
fallback: false
};
}
// Fetch data for specific blog post
export async function getStaticProps({ params }) {
const post = await fetchPostById(params.id);
return {
props: { post }
};
}
`SEO Optimization
RS-SSG includes a powerful SEO component for managing meta tags:
javascript
import { Seo } from "rs-ssg";function MyPage() {
return (
<>
My Page Title
{/ Your page content /}
);
}
`Configuration
Configure RS-SSG using
:`javascript
// ssg.config.js
export default {
outputDir: 'dist',
port: 4173,
devPort: 3000,
siteName: 'My App',
siteUrl: 'https://mysite.com',
seo: {
title: 'My Site',
description: 'My awesome static site',
keywords: 'react, ssg, static',
author: 'Your Name',
ogImage: '/og-image.jpg',
themeColor: '#000000',
icons: {
favicon: '/favicon.ico',
appleTouchIcon: '/apple-touch-icon.png',
}
}
};
`Build & Deploy
$3
bash
npm run build
`$3
bash
npm run preview
or
rs-ssg preview
`$3
The built files in the
directory can be deployed to any static hosting service:- Vercel:
vercel --prod
- Netlify: Drag and drop folder
- GitHub Pages: Push dist contents to gh-pages branch
- Firebase: firebase deployExamples
$3
javascript
// src/pages/About.jsx
import React from 'react';
import { Seo } from 'rs-ssg';function About() {
return (
About Us - My Site
About Us
Learn more about our company.
);
}export default About;
`$3
javascript
// src/components/Navigation.jsx
import React from 'react';const Navigation = () => {
const navItems = [
{ href: '/', label: 'Home' },
{ href: '/about', label: 'About' },
{ href: '/blog', label: 'Blog' },
];
return (
);
};
export default Navigation;
``- NPM Package: https://www.npmjs.com/package/rs-ssg
- Documentation: https://rs-ssg1.web.app/docs
- GitHub: https://github.com/rasel-mahmud-dev/rs-ssg
- Node.js 20+
- npm, yarn, or pnpm
---
Built with ā¤ļø using React, Vite, Esbuild, and Tailwind CSS