Hugo Saasify Theme

A modern and elegant Hugo theme specifically designed for SaaS websites. Built with TailwindCSS, this theme provides a clean, professional look while maintaining excellent performance and customization options.

Features

🎨 Modern design with TailwindCSS
📱 Fully responsive layout
🚀 Performance optimized
💅 Clean typography with Inter & Plus Jakarta Sans fonts
🎯 Perfect for SaaS and business websites
🛠 Easy to customize
📦 No jQuery, minimal JavaScript

Requirements

Hugo Extended Version (>= 0.80.0)
Node.js (>= 14.x)
npm or yarn

Installation

1. Create a new Hugo site (skip if you have an existing site)

hugo new site your-site-name
cd your-site-name

2. Add the theme as a submodule

git init
git submodule add https://github.com/yourusername/hugo-saasify-theme themes/hugo-saasify-theme

3. Install dependencies

# Copy package.json and other config files to your site root
cp themes/hugo-saasify-theme/package.json .
cp themes/hugo-saasify-theme/postcss.config.js .
cp themes/hugo-saasify-theme/tailwind.config.js .

# Install dependencies
npm install

4. Configure your Hugo site

Create or update your hugo.toml with the following configuration:

baseURL = "/"
languageCode = "en-us"
title = "Your Site Title"
theme = "hugo-saasify-theme"

[params]
  description = "Your site description"
  author = "Your Name"

[module]
  [module.hugoVersion]
    extended = true
    min = "0.80.0"

Development

To start the development server with live reload:

npm run start

This will:

Watch for changes in your TailwindCSS styles
Run the Hugo development server
Automatically rebuild when changes are detected

Customization

Colors

The theme uses a primary and secondary color scheme that can be customized in tailwind.config.js:

colors: {
  primary: {
    // Your primary color palette
  },
  secondary: {
    // Your secondary color palette
  }
}

Typography

The theme uses Inter for body text and Plus Jakarta Sans for headings. You can modify this in tailwind.config.js:

fontFamily: {
  sans: ['Inter', 'system-ui', 'sans-serif'],
  heading: ['Plus Jakarta Sans', 'sans-serif'],
}

Layout Components

Common components like buttons, cards, and sections can be customized in assets/css/main.css.

Content Structure

content/
├── _index.md          # Homepage content
├── blog/              # Blog posts
├── features/          # Feature pages
└── docs/              # Documentation pages

License

MIT

Support

If you have any questions or need help, please open an issue.

2.7 KiB Raw Blame History