hello world

Welcome to this comprehensive demonstration of SSG, a minimal static site generator built with pure Bash! This post showcases all the powerful features available for creating beautiful, fast static websites.

What is SSG?

SSG is a 100% static site generator that combines the simplicity of Bash scripting with modern web development features. It requires no client-side JavaScript for content viewing and produces lightning-fast pages.

Syntax Highlighting

SSG supports Prism.js for beautiful code syntax highlighting across multiple languages. Here are some examples:

Python

def fibonacci(n):
    """Generate Fibonacci sequence up to n terms."""
    a, b = 0, 1
    result = []
    for _ in range(n):
        result.append(a)
        a, b = b, a + b
    return result

# Calculate first 10 Fibonacci numbers
print(fibonacci(10))
# Output: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

JavaScript

// Async function with modern ES6+ syntax
async function fetchUserData(userId) {
    try {
        const response = await fetch(`/api/users/${userId}`);
        const data = await response.json();
        return { success: true, data };
    } catch (error) {
        console.error('Failed to fetch user:', error);
        return { success: false, error: error.message };
    }
}

// Arrow functions and destructuring
const users = ['Alice', 'Bob', 'Charlie'].map(name => ({ name, active: true }));

Bash

#!/bin/bash
# SSG build script example
set -euo pipefail

SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
CONFIG_FILE="$SCRIPT_DIR/config.yaml"

generate_site() {
    local output_dir="$1"
    echo "Building site to: $output_dir"
    
    # Process markdown files
    find md/posts -name "*.md" | while read -r file; do
        pandoc "$file" -o "${file%.md}.html"
    done
}

generate_site "docs"

Rust

use std::collections::HashMap;

// Generic function with trait bounds
fn find_max<T: PartialOrd + Copy>(items: &[T]) -> Option<T> {
    items.iter().max().copied()
}

// Struct with implementation
struct BlogPost {
    title: String,
    content: String,
    tags: Vec<String>,
}

impl BlogPost {
    fn new(title: String) -> Self {
        Self {
            title,
            content: String::new(),
            tags: Vec::new(),
        }
    }
}

Text Formatting Features

SSG supports rich Markdown formatting including:

• Bold text for emphasis
• Italic text for subtle emphasis
• Bold and italic for maximum emphasis
• inline code for technical terms
• Strikethrough for corrections
• External links for references
• Inline images (when you add them to imgs/)

Lists

Unordered lists:

• First level item
• Another first level item
  • Nested second level
  • More nested items
    • Even deeper nesting
• Back to first level

Ordered lists:

1. First step in the process
2. Second step with details
3. Third step
   1. Substep A
   2. Substep B
4. Final step

Blockquotes

“The best way to predict the future is to invent it.”
— Alan Kay

Blockquotes can also contain formatting and code:

echo "Nested code in blockquote"

Tables

SSG renders beautiful tables through Pandoc:

Mathematical Expressions

For technical writing, you can include mathematical formulas using LaTeX syntax (requires KaTeX integration):

Inline math: The quadratic formula is $x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$

Block math:

$$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$

Long Content Sections

This section demonstrates that SSG automatically generates a Table of Contents when your post has 3 or more headings. The TOC appears at the top of the post and makes navigation easy!

Performance Features

SSG includes several performance optimizations:

1. Incremental builds - Only rebuilds changed files
2. Smart caching - Tracks file hashes for efficiency
   
3. Minimal output - No unnecessary JavaScript or CSS
4. Static generation - Everything is pre-rendered HTML

SEO Features

Every page includes:

• OpenGraph meta tags for social sharing
• Canonical URLs for search engines
• Structured keywords and descriptions
• XML sitemap generation
• Robots.txt configuration

Developer Experience

• YAML configuration - Clean, readable config files
• External templates - Easy customization without touching build logic
• Watch mode - Automatic rebuilds during development
• Draft support - Mark posts as work-in-progress
• Tag system - Automatic tag page generation

Customization Options

SSG supports multiple themes out of the box:

• 🌙 Dark theme - Easy on the eyes (default)
• 🎨 Gruvbox theme - Retro terminal aesthetic

You can also toggle features on/off: - Enable/disable syntax highlighting - Configure posts per page - Set custom date formats - Adjust reading time calculation (WPM) - Control TOC generation

Configuration Example

Here’s a sample config.yaml showing all available options:

site:
  name: "your-name"
  description: "A minimal blog"
  url: "https://example.com"
  language: "en"
  base_path: ""

theme:
  name: "dark"  # Options: dark, gruvbox

build:
  posts_per_page: 5
  reading_time: true
  words_per_minute: 200
  toc: true
  toc_min_headings: 3
  syntax_highlighting: true

feed:
  full_content: false
  limit: 20

date_format: "%b %d, %Y"

Creating New Posts

Creating a new post is simple:

# Interactive post creation
./SSG.sh new-post

# Or manually create a markdown file
cat > md/posts/my-new-post.md << 'EOF'

# My New Post

Your content here!
EOF

# Build the site
./SSG.sh build

Deployment

Deploy your generated docs/ folder anywhere:

• GitHub Pages - Free hosting with custom domains
• Netlify - Continuous deployment from Git
• Vercel - Serverless with automatic previews
• Your own server - Just serve static files with nginx/Apache

Since everything is pre-rendered HTML, hosting is simple and incredibly fast!

Conclusion

SSG demonstrates that you don’t need complex frameworks to build a powerful, feature-rich static site. With just Bash, pandoc, and a few utilities, you can create:

✅ Fast, SEO-friendly websites
✅ Beautiful code highlighting
✅ Automatic navigation features
✅ RSS feeds for readers
✅ Mobile-responsive design
✅ Tag-based organization
✅ Developer-friendly workflows

Reading time, syntax highlighting, table of contents, tags, and all the metadata you see on this page are automatically generated by SSG!

Ready to start? Check out the repository and build your own minimal static site today.