Skip to content

Latest commit

 

History

454 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

AjaxCMS

A lightweight, database-free CMS powered by JavaScript and Node.js

AjaxCMS is a modern content management system that generates dynamic websites from static files. No database required, no complex setup - just pure JavaScript magic with animated themes and powerful content helpers.

✨ Perfect for AI/LLM-Assisted Development - Simple architecture, well-documented code, and clear patterns make it ideal for creating content and themes with AI assistants like Claude Code.

🌐 Live Demo • 📖 Documentation • 🤖 AI Development Guide

What is AjaxCMS?

AjaxCMS is a single-page application (SPA) that dynamically builds websites from directory structures. It uses a Node.js backend to serve JSON directory listings, which the front-end JavaScript transforms into beautiful, navigable websites.

Think of it as a static site generator that runs in real-time, with the flexibility of a CMS.

Key Features

No Database - Content lives in simple HTML and Markdown files 🚀 Multi-Site Ready - Host unlimited sites from one installation 🎨 Animated Themes - Canvas-based backgrounds with 15+ built-in themes 📝 Markdown Support - Write content in Markdown or HTML 🔧 Helper Syntax - Custom {{helper}} tags for dynamic content 🌐 Single Page App - Fast navigation with smooth transitions 📱 Responsive - Built with Bootstrap, works on all devices 🎯 Blog Support - Built-in blog functionality with pagination 🔄 Resource Sharing - Share JavaScript, themes, and images across all sites ⚡ Fast Setup - Get running in minutes, not hours

Quick Start

Development Mode (HTTP only, port 3000)

# 1. Install dependencies
npm install

# 2. Create your first site
mkdir -p sites/mysite.com
cp -r index.html pages/ sites/mysite.com/

# 3. Start the development server
./start-dev.sh

Visit http://localhost:3000 to see the sites index!

Production Mode (SSL with Let's Encrypt, ports 80 & 443)

# 1. Install dependencies
npm install
npm install -g pm2

# 2. Edit the SSL startup script with your email
nano start-ssl.sh
# Change MAINTAINER_EMAIL="your@email.com" to your actual email

# 3. Make sure your domain DNS points to your server's IP

# 4. Start with SSL (requires sudo for ports 80/443)
sudo ./start-ssl.sh

Visit http://yourdomain.com (redirects to HTTPS automatically)

Features:

  • ✅ Automatic SSL certificate provisioning via Let's Encrypt
  • ✅ Auto-discovers and registers all site domains from sites/ directory
  • ✅ HTTP (port 80) automatically redirects to HTTPS (port 443)
  • ✅ Certificates auto-renew before expiration
  • ✅ Sites index available at /sites on any domain

How It Works

┌─────────────────────────────────────────────────────────┐
│  Browser requests page                                  │
│  ↓                                                       │
│  Node.js server serves JSON directory listings          │
│  ↓                                                       │
│  JavaScript builds navigation from file structure       │
│  ↓                                                       │
│  Content loaded dynamically with smooth transitions     │
│  ↓                                                       │
│  Helpers processed (links, images, blogs, etc.)         │
│  ↓                                                       │
│  Markdown converted to HTML                             │
│  ↓                                                       │
│  Animated theme renders in background                   │
└─────────────────────────────────────────────────────────┘

Why AjaxCMS?

🎯 Perfect For

  • Portfolio sites - Showcase your work with stunning themes
  • Documentation - Organize docs with automatic navigation
  • Blogs - Built-in blog functionality with date-based sorting
  • Multi-tenant hosting - One server, unlimited sites
  • Learning projects - Simple architecture, easy to understand

💡 Benefits

  • Zero Configuration - Drop files in folders, they appear in menus
  • Easy Deployment - Just copy files, no database migrations
  • Version Control Friendly - All content in Git-friendly text files
  • Low Resource Usage - Static files = minimal server requirements
  • Offline Development - Test locally without complicated setup
  • Theme Flexibility - Override any theme per-site or share globally

⚡ What Makes It Different

Unlike traditional CMSs (WordPress, Drupal) or static generators (Jekyll, Hugo):

  • ✅ No build step required
  • ✅ No database to manage
  • ✅ Changes appear immediately
  • ✅ Multi-site built-in from day one
  • ✅ Dynamic content from static files
  • ✅ Shared resources (js/, themes/, images/) across sites

Content Management

AjaxCMS has no backend editor or admin interface. Content is managed by directly editing files on the filesystem. This design keeps the system simple, version-controllable, and secure.

How to Edit Your Content

Git-Based Workflow (Recommended)

# Make changes locally
vim sites/mysite.com/pages/about.md

# Commit and push
git add .
git commit -m "Update about page"
git push

# On server
git pull

Other Methods:

  • GitHub Web UI - Edit files in browser, then git pull on server
  • SSH/SFTP - Edit files directly on server with vim/nano or upload via FileZilla/Cyberduck
  • Remote IDE - Use VSCode Remote SSH or JetBrains Gateway
  • CI/CD - Auto-deploy with GitHub Actions or git hooks
  • rsync - Sync local changes: rsync -avz ./sites/mysite/ user@server:/path/to/sites/mysite/

Why No Backend Editor?

  • Version Control - All content in Git for history and collaboration
  • Security - No admin login to hack, no database to inject
  • Simplicity - One less thing to learn, maintain, or break
  • Flexibility - Use your favorite editor/IDE with all your shortcuts
  • Backup - Git commits are automatic backups
  • Speed - No WYSIWYG editor overhead

Directory Structure

AjaxCMS/
├── server.js              # Node.js multi-site server
├── sites-index.html       # Sites directory index
├── js/                    # Shared JavaScript (all sites)
├── themes/                # Shared themes (all sites)
├── images/                # Shared images (all sites)
└── sites/                 # Your sites
    ├── mysite.com/
    │   ├── index.html     # Site config
    │   ├── description.md # Shows on index
    │   ├── pages/         # Your content
    │   │   └── menus/     # Auto-discovered navigation
    │   └── images/        # Site images
    └── blog.com/
        └── ...

Content Helpers

AjaxCMS includes powerful helpers for dynamic content:

<!-- Links -->
{{a | about}}  <!-- Auto-finds pages/about.html -->

<!-- Images -->
{{i | logo}}   <!-- Auto-finds images/logo.png -->

<!-- Carousels -->
{{carousel:5000 | img1:alt1:caption1 | img2:alt2:caption2}}

<!-- Blogs -->
{{blog | ./pages/posts | 0 | 5}}  <!-- First 5 posts -->

<!-- File Lists -->
{{filelist | ./pages/docs}}  <!-- Auto-generated file tree -->

Themes

Choose from 15+ animated canvas themes or create your own:

  • network - Animated network connections
  • gears - Spinning mechanical gears
  • kaleidoscope - Colorful geometric patterns
  • bubbles - Floating bubble animation
  • cityscape - Parallax city skyline
  • And many more!

Set per-site in index.html:

var default_background = "gears";

Multi-Site Setup

Host multiple sites from one installation:

# Create sites
mkdir -p sites/portfolio.com sites/blog.com

# Copy templates
cp -r index.html pages/ sites/portfolio.com/
cp -r index.html pages/ sites/blog.com/

# Add descriptions
echo "My portfolio site" > sites/portfolio.com/description.md
echo "My blog" > sites/blog.com/description.md

Access via:

  • Path: http://localhost:3000/portfolio.com/
  • Domain: http://portfolio.com:3000 (with hosts file)

Documentation

  • QUICKSTART.md - Complete setup guide with deployment instructions
  • CLAUDE.md - Architecture and development guide

Production Deployment

Option 1: Built-in SSL (Recommended)

Use the included start-ssl.sh script for automatic SSL with Let's Encrypt:

# Edit email in start-ssl.sh, then run:
sudo ./start-ssl.sh

This automatically:

  • Discovers all site domains from sites/ directory
  • Provisions SSL certificates via Let's Encrypt
  • Sets up pm2 to restart on boot
  • Listens on ports 80 (HTTP → HTTPS redirect) and 443 (HTTPS)

Option 2: Reverse Proxy with Nginx

See nginx-ajaxcms.conf for a sample nginx configuration.

Option 3: Manual PM2 Setup

# Development mode (port 3000)
./start-dev.sh

# Or customize manually:
PORT=3000 pm2 start server.js --name ajaxcms
pm2 save
pm2 startup

Full deployment instructions in QUICKSTART.md.

Requirements

  • Node.js 14+
  • npm or yarn

That's it! No database, no complex dependencies.

License

See LICENSE file for details.

Contact

Questions? Contact bhoult@gmail.com


Built with ❤️ for developers who love simplicity

About

Javascript based front-end CMS with static file backend.

Resources

Stars

2 stars

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages