CCSSG - Coding Challenges Static Site Generator

A simple yet powerful static site generator built in Node.js. Generate lightning-fast static websites from Markdown content with customizable themes and live reload development server.

!Node.js !License

Features

✅ All Steps Completed

Step 1: Project Initialization

cd 77-static-site-generator

Make CLI Available Globally (Optional)

npm link

Or run directly:

node bin/ccssg.js 

Quick Start

1. Create a New Site

ccssg mysite

This creates:

mysite/
├── content/
│   └── index.md
└── config.json

2. Navigate to Your Site

cd mysite

3. Create a Theme

ccssg new theme mytheme

This creates:

themes/
└── mytheme/
    └── index.html

4. Create Additional Pages

ccssg new page about
ccssg new page contact

This creates:

content/
├── about.md
├── contact.md
└── index.md

5. Build Your Site

ccssg build

This generates:

public/
├── about.html
├── contact.html
└── index.html

6. Start Development Server

ccssg serve

Visit http://localhost:8000 in your browser!

Usage

Commands

| Command | Description | |---------|-------------| | ccssg | Initialize a new site | | ccssg new theme | Create a new theme | | ccssg new page | Create a new page | | ccssg build | Build the static site | | ccssg serve | Start development server | | ccssg help | Show help message |

Detailed Command Usage

#### Initialize a New Site

ccssg myblog
cd myblog

Creates a new site directory with default content and configuration.

#### Create a Theme

ccssg new theme clean

Creates a new theme in themes/clean/ with a default template.

Update config.json to use your theme:

{
  "title": "myblog",
  "theme": "clean",
  "baseURL": "/",
  "languageCode": "en-us"
}

#### Create Pages

ccssg new page blog
ccssg new page projects
ccssg new page portfolio

Each command creates a new Markdown file in the content/ directory.

#### Build Site

ccssg build

- Reads all .md files from content/

ccssg serve

Features:

PORT=3000 ccssg serve

Project Structure

mysite/
├── content/              # Markdown content files
│   ├── index.md
│   ├── about.md
│   └── blog.md
├── themes/               # Custom themes
│   └── mytheme/
│       └── index.html    # Theme template
├── public/               # Generated static site (don't edit!)
│   ├── index.html
│   ├── about.html
│   └── blog.html
└── config.json           # Site configuration

Template System

Template Variables

Templates support variable substitution using {{ VariableName }} syntax:

| Variable | Description | Source | |----------|-------------|--------| | {{ Title }} | Page title | First # Heading in markdown | | {{ Content }} | Page content | Rendered HTML from markdown |

Example Theme Template

    
    
    
    


    

        
    
    

        {{ Content }}
    
    

Default Theme

CCSSG includes a clean, responsive default theme with:

{

| Field | Description | Default | |-------|-------------|---------| | title | Site title | Site directory name | | theme | Theme to use | "default" | | baseURL | Base URL for site | "/" | | languageCode | Language code | "en-us" |

Markdown Support

CCSSG uses the marked library for Markdown parsing, supporting:

Headers

H1 Heading
H2 Heading
H3 Heading

Text Formatting

Bold text
Italic text
~~Strikethrough~~
Inline code

Lists

- Unordered item 1
Unordered item 2
1. Ordered item 1
2. Ordered item 2

Links and Images

Link text
!Alt text

Code Blocks

Blockquotes

> This is a quote
> - Author

Development Workflow

Typical Workflow

1. Create site and theme:

   ccssg myblog
   cd myblog
   ccssg new theme blog-theme
   

2. Edit theme: - Customize themes/blog-theme/index.html - Add CSS, JavaScript, etc.

3. Update config:

   {
     "theme": "blog-theme"
   }
   

4. Start development:

   ccssg serve
   

5. Create content:

   ccssg new page post-1
   

Edit content/post-1.md - see changes instantly!

6. Build for production:

   ccssg build
   

7. Deploy public/ directory to your hosting provider

Deployment

Deploy to GitHub Pages

Build site
ccssg build
Navigate to public directory
cd public
Initialize git (if not already)
git init
git add .
git commit -m "Deploy site"
Push to gh-pages branch
git push -f origin master:gh-pages

Deploy to Netlify

1. Build site: ccssg build 2. Drag and drop public/ folder to Netlify 3. Or connect Git repository with build command: ccssg build

Deploy to AWS S3

Build site
ccssg build
Sync to S3 bucket
aws s3 sync public/ s3://your-bucket-name/ --delete

Deploy to Cloudflare Pages

1. Build site: ccssg build 2. Deploy public/ directory via Cloudflare Pages dashboard 3. Or use Wrangler CLI

Examples

Blog Post Example

content/my-first-post.md:

My First Blog Post
Welcome to my blog! This is my first post.
Why I Started This Blog
I wanted to share my journey learning web development...
What You'll Find Here
- Tutorials
Project showcases
Personal experiences
Stay tuned for more!

About Page Example

content/about.md:

About Me
Hi, I'm John Doe, a web developer passionate about...
Skills
- JavaScript
Node.js
React
Contact
Feel free to reach out at email@example.com

Troubleshooting

Command Not Found

Problem: ccssg: command not found

Solution:

Run directly
node bin/ccssg.js 
Or link globally
npm link

Not in Site Directory

Problem: Error: Not in a site directory

Solution: Navigate to your site directory:

cd mysite
ccssg build

Theme Not Found

Problem: Using default template (theme 'mytheme' not found)

Solutions: 1. Check theme exists: ls themes/mytheme/index.html 2. Verify config.json theme name matches directory name 3. Create theme: ccssg new theme mytheme

Build Errors

Problem: Build fails with error

Solutions: 1. Check markdown syntax in content files 2. Ensure all content files are valid .md files 3. Run with debug: DEBUG=1 ccssg build

Port Already in Use

Problem: Error: Port 8000 already in use

Solution: Use different port:

PORT=3000 ccssg serve

Performance

Build Speed

- Small site (10 pages): < 100ms

bin/ccssg.js          # CLI entry point

File Operations

- Async file I/O (fs.promises)