Simple SSG

Simple SSG is a comprehensive and flexible framework designed to simplify the creation and management of static sites and dynamic web applications. Built with Express and React, it now supports a full range of features, including a web app for the admin panel, dynamic middleware management, REST API support, and seamless integration with Sequelize for database management.

Features

• Static Site Generation: Easily generate static pages from React components and Markdown files without the need for Webpack.
• Admin Panel: Integrated web application for managing content and data through a user-friendly admin panel.
• Seamless Sequelize Integration: Simplifies the creation of controllers and management of database operations using Sequelize.
• Dynamic Middleware Management: Add and manage server middleware dynamically based on your needs.
• REST API Management: Full support for creating and managing REST APIs, making it easier to handle dynamic content and interactions.
• File Uploads: Supports file uploads and management using multer, enabling easy handling of media and other file types.
• Modular Architecture: Flexible and extendable with custom modules and middleware.
• Full Website Management: Provides tools for not only generating static sites but also managing the entire website, including content, data, REST API, and display.

Ongoing Development

Simple SSG is actively being developed with the goal of providing a fully integrated framework that simplifies the creation and management of static sites and dynamic web applications. We are continuously adding new features and improvements to ensure that the framework meets the needs of modern web development. While it is already a powerful tool, the development is ongoing until our vision of a complete, all-in-one solution is fully realized.

Upcoming Features

• CLI: A command-line interface (CLI) is currently in development, which will provide an easier and more streamlined way to interact with Simple SSG.
• npx Support: Support for initializing projects with templates using npx is also in the works, making it even easier to get started with Simple SSG.

Installation

Install Simple SSG via npm:

npm install simplessg

Example Project Structures

Simple Implementation

A basic project structure without middleware, database, API, or admin panel:

.
├── dist
├── package.json
├── public
├── scripts
│   └── serve.js
├── simplessg.config.js
└── src
    ├── _posts
    │   ├── first-article.md
    │   └── second-article.md
    ├── components
    │   └── index.jsx
    ├── content
    │   ├── 404.md
    │   ├── posts
    │   │   ├── index.md
    │   │   ├── author
    │   │   │   ├── [id].md
    │   │   │   └── index.md
    │   │   ├── [slug].md
    │   │   └── tag
    │   │       ├── [id].md
    │   │       └── index.md
    │   ├── about.md
    │   └── index.md
    ├── site.json
    └── templates
        ├── posts.jsx
        ├── default.jsx
        ├── home.jsx
        ├── index.css
        ├── index.js
        ├── not-found.jsx
        ├── author.jsx
        └── tag.jsx

Complex Implementation

A more detailed project structure that includes middleware, routers, database controllers and models, client and admin scripts, and a more complex public assets structure:

.
├── dist
├── middlewares
│   ├── db
│   │   ├── controllers
│   │   │   └── index.js
│   │   ├── index.js
│   │   └── models
│   │       └── index.js
│   ├── index.js
│   ├── routers
│   │   └── index.js
│   └── server-mw
│       └── index.js
├── package.json
├── public
│   └── assets
│       ├── css
│       ├── js
│       └── media
├── scripts
│   └── serve.js
├── simplessg.config.js
└── src
    ├── admin-scripts
    │   └── index.js
    ├── _posts
    │   ├── first-article.md
    │   └── second-article.md
    ├── client-scripts
    │   └── index.js
    ├── components
    │   └── index.jsx
    ├── content
    │   ├── 404.md
    │   ├── posts
    │   │   ├── index.md
    │   │   ├── author
    │   │   │   ├── [id].md
    │   │   │   └── index.md
    │   │   ├── [slug].md
    │   │   └── tag
    │   │       ├── [id].md
    │   │       └── index.md
    │   ├── about.md
    │   ├── index.md
    │   └── login.md
    ├── site.json
    └── templates
        ├── posts.jsx
        ├── default.jsx
        ├── home.css
        ├── home.jsx
        ├── index.js
        ├── login.jsx
        ├── not-found.css
        ├── not-found.jsx
        ├── author.jsx
        └── tag.jsx

Configuration

Example package.json

Below is an example of a package.json file that includes simplessg as a dependency, along with other dependencies like sequelize for database management:

{
	"name": "mywebsite",
	"private": true,
	"version": "1.0.0",
	"main": "server.js",
	"dependencies": {
		"mysql2": "^3.10.1",
		"sequelize": "^6.37.3",
		"simplessg": "^1.2.0"
	},
	"scripts": {
		"start": "node scripts/serve.js"
	}
}

Example simplessg.config.js

This configuration file is used to define various settings for Simple SSG, such as paths, middleware, session handling, and localization:

const {defineLocale} = require('./scripts/locale');
const root = __dirname;
const cssBundlePath = distPath + '/assets/css/bundle.css';

module.exports = {
	root,
	cssBundlePath,
	clientScriptExternal: {react: 'React', 'react-dom/client': 'ReactDOM'},
	useInternalRouters: true,
	useAdminPanel: true,
	adminFavicon: '/assets/media/si-icon-32.png',
	adminPanelStyles: ['/assets/css/alegreya-v35-latin/font.css'],
	reactUri: '/assets/js/react.production.min.js',
	reactDomUri: '/assets/js/react-dom.production.min.js',
	useCookieParser: true,
	useSession: true,
	session: {
		secret: '...',
		cookie: {
			secure: false, // Set secure to true if using HTTPS
		},
	},
	defineLocale,
	locale: 'id',
	useRedis: true,
	// setting redis, optional. Currently used only for session management
	redis: {
		host: 'localhost',
		port: 6379,
	},
};

Example serve.js

This script initializes the Simple SSG instance, applies middleware, generates static content, watches for changes, and serves the application:

const config = require('../simplessg.config');
const {SimpleSSG} = require('simplessg');
const appMiddleware = require('../middlewares');

const start = async () => {
	const ss = new SimpleSSG(config);
	await ss.use(appMiddleware);
	await ss.generate();
	ss.watch(true);
	ss.serve();
};

start();

Documentation

More detailed documentation on using Sequelize, handling file uploads, authentication, customizing the admin panel, managing client-side JavaScript, and other topics may be covered later or in separate documentation. For now, we are still focused on completing the features.

Contributing

Contributions are welcome! If you find a bug or have a feature request, please open an issue on GitHub.

License

Simple SSG is licensed under the MIT License.