champs-libres/chill.social
7
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f210dc7dcc3abfc5a4170c8207ddf2b00a0232ac
chill.social/themes/chill-theme/docs
History

README.md

Hugo Saasify Theme Documentation

Welcome to the complete documentation for Hugo Saasify Theme - a modern, high-performance Hugo theme built specifically for SaaS websites.

📚 Documentation Overview

This documentation is organized into focused guides to help you get started quickly and master every aspect of the theme.

Getting Started

Start here if you're new to the theme:

  1. Installation Guide - Set up the theme and its dependencies
  2. Configuration Guide - Configure your site settings
  3. Content Creation Guide - Create pages and blog posts

Core Concepts

Learn about the theme's architecture and features:

  1. Layouts Guide - Understanding layout templates and structure
  2. Shortcodes Reference - Complete guide to all 21 shortcodes
  3. Styling Guide - TailwindCSS configuration and customization

Deployment & Production

Ready to go live?

  1. Deployment Guide - Deploy to Netlify, Vercel, GitHub Pages, and more
  2. Troubleshooting Guide - Common issues and solutions

🚀 Quick Start

Get your site running in 5 minutes:

# 1. Create new Hugo site
hugo new site my-saas-site
cd my-saas-site

# 2. Add theme as submodule
git init
git submodule add https://github.com/chaoming/chill-theme themes/chill-theme

# 3. Copy example site
cp -r themes/chill-theme/exampleSite/* .

# 4. Install dependencies
npm install

# 5. Start development server
npm run start

Visit http://localhost:1313 to see your site!

📖 Documentation Guides

Installation Guide

Learn how to install and set up the Hugo Saasify Theme:

  • System requirements (Hugo Extended, Node.js)
  • Installation methods (new site vs. existing site)
  • Configuration setup
  • Troubleshooting installation issues
  • Updating the theme

Start here if: You're installing the theme for the first time.

Configuration Guide

Complete reference for all configuration options:

  • Basic site configuration
  • Header and footer customization
  • Call-to-action (CTA) settings
  • Blog configuration
  • Social media links
  • Google Analytics and Tag Manager
  • Menu configuration
  • Build settings

Start here if: You need to customize site settings.

Layouts Guide

Understanding the theme's layout system:

  • Layout architecture overview
  • Base template structure
  • Default layouts (single, list, etc.)
  • Page templates (pricing, company, careers, features)
  • Partial components
  • Creating custom layouts
  • Layout variables reference

Start here if: You want to understand or modify page templates.

Shortcodes Reference

Complete documentation for all 21 shortcodes:

Hero & Layout:

  • hero - Hero sections with gradient backgrounds
  • hero-image - Simple hero images
  • section-container - Section wrappers
  • features-section - Feature collection containers

Features & Benefits:

  • feature - Feature displays with images
  • features-list - Vertical feature lists
  • benefits-grid - Benefit card grids
  • value-card - Company value cards

Social Proof:

  • testimonials - Customer testimonial carousels
  • client-logos - Animated logo carousels
  • stat - Statistics display

Pricing:

  • pricing-table-1 - Simple pricing tables
  • pricing-table-2 - Advanced pricing tables

Team & Company:

  • team-member - Team member cards
  • investor-logo - Investor/partner logos
  • case-study-card - Case study cards

Content:

  • cta - Call-to-action sections
  • faq - FAQ accordions
  • toc - Table of contents
  • figure - Images with captions
  • code - Code blocks with syntax highlighting

Start here if: You're building pages with shortcodes.

Styling Guide

Everything about the theme's styling system:

  • TailwindCSS integration and configuration
  • Color system (primary and secondary palettes)
  • Typography (Inter and Plus Jakarta Sans)
  • Custom components (buttons, cards, etc.)
  • Responsive design patterns
  • Syntax highlighting themes
  • Custom CSS and utilities
  • Performance optimization

Start here if: You want to customize colors, fonts, or styles.

Content Creation Guide

Learn how to create and organize content:

  • Content structure and organization
  • Front matter options
  • Page types (homepage, features, pricing, etc.)
  • Creating blog posts
  • Creating documentation pages
  • Using taxonomies (categories and tags)
  • Media management and image optimization
  • SEO best practices
  • Markdown formatting
  • Draft and scheduled content

Start here if: You're ready to add content to your site.

Deployment Guide

Deploy your site to production:

  • Building for production
  • Platform-specific guides:
    • Netlify
    • Vercel
    • GitHub Pages
    • Cloudflare Pages
    • AWS S3 + CloudFront
  • Custom server deployment (Nginx, Apache)
  • Environment variables
  • Performance optimization
  • Continuous deployment
  • Testing before deployment

Start here if: You're ready to launch your site.

Troubleshooting Guide

Solutions to common problems:

  • Installation issues
  • Build errors
  • Styling problems
  • Content issues
  • Deployment problems
  • Performance issues
  • Browser compatibility
  • Getting help and reporting issues

Start here if: You're experiencing issues.

🎯 Common Tasks

How do I...?

...install the theme? → See Installation Guide

...customize colors? → See Styling Guide - Color System

...create a blog post? → See Content Creation - Blog Posts

...add a pricing page? → See Shortcodes - Pricing Tables

...configure the header menu? → See Configuration - Menu Configuration

...deploy to Netlify? → See Deployment - Netlify

...add team members? → See Shortcodes - Team Member

...enable Google Analytics? → See Configuration - Analytics

...customize fonts? → See Styling - Typography

...fix build errors? → See Troubleshooting - Build Errors

🌟 Key Features

This theme includes:

  • ✅ 21 Pre-built Shortcodes - Hero sections, features, pricing tables, testimonials, and more
  • ✅ TailwindCSS Integration - Modern, utility-first CSS framework
  • ✅ Responsive Design - Mobile-first, looks great on all devices
  • ✅ Performance Optimized - Fast builds, minimal JavaScript, optimized assets
  • ✅ SEO Ready - Meta tags, Open Graph, Twitter Cards
  • ✅ Blog System - Categories, tags, sidebar, table of contents
  • ✅ Multiple Page Templates - Pricing, features, company, careers, jobs
  • ✅ Analytics Integration - Google Analytics and Tag Manager support
  • ✅ Syntax Highlighting - Beautiful code blocks with dark theme
  • ✅ Easy Customization - Configurable colors, fonts, and layouts

📋 Requirements

  • Hugo Extended v0.80.0 or higher
  • Node.js v14.x or higher
  • npm or yarn
  • Git (for submodule installation)

🔗 Useful Links

🤝 Support

Need help?

  1. Check the Documentation - Start with the relevant guide above
  2. Review Troubleshooting - See Troubleshooting Guide
  3. Search Issues - Check existing issues
  4. Ask for Help - Open a new issue with:
    • Hugo version (hugo version)
    • Node version (node --version)
    • Error messages
    • Steps to reproduce
    • Your configuration

📝 License

This theme is released under the MIT License.

👨‍💻 Author

Created by Chaoming Li

🎉 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Ready to get started? Begin with the Installation Guide →

Reference in New Issue View Git Blame Copy Permalink