Converti chill-theme en dossier classique
This commit is contained in:
Boris Waaub
@@ -0,0 +1,470 @@
|
||||
# Hugo Saasify Theme
|
||||
|
||||
A modern and elegant Hugo theme specifically designed for building **SaaS marketing websites**. Built with TailwindCSS, this theme provides a clean, professional look while maintaining excellent performance and customization options.
|
||||
|
||||
## Why Hugo Saasify Theme?
|
||||
|
||||
Perfect for creating high-converting SaaS landing pages, product marketing sites, and company websites with:
|
||||
|
||||
- **SEO Optimized** - Built-in SEO best practices, semantic HTML, and optimized meta tags to help you rank better
|
||||
- **Lightning Fast** - Static site generation delivers blazing-fast load times (90+ Lighthouse scores)
|
||||
- **Global Ready** - Full internationalization (i18n) support with automatic language detection powered by [VisitorAPI](https://visitorapi.com/)
|
||||
- **Developer Friendly** - Clean code structure, comprehensive documentation, and easy customization
|
||||
- **Production Ready** - Battle-tested with real SaaS companies, mobile-responsive, and accessibility compliant
|
||||
|
||||
Whether you're launching a new SaaS product or refreshing your marketing site, Hugo Saasify Theme helps you build a professional web presence quickly and efficiently.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[Demo Site](https://saasify-demo.chaoming.li)
|
||||
|
||||
## 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
|
||||
- 📊 Google Analytics support
|
||||
- 📈 Google Tag Manager support
|
||||
- 🔧 Custom head content support for additional tracking scripts
|
||||
- 🎪 21 pre-built shortcodes for rapid page building
|
||||
- 📚 Documentation layout with automatic sidebar navigation
|
||||
- 🌍 Full multilingual (i18n) support with automatic language switcher (powered by [VisitorAPI](https://visitorapi.com/))
|
||||
|
||||
## Documentation
|
||||
|
||||
**📖 [Complete Documentation →](docs/README.md)**
|
||||
|
||||
Comprehensive guides covering everything you need:
|
||||
|
||||
- **[Installation Guide](docs/INSTALLATION.md)** - Get started quickly
|
||||
- **[Configuration Guide](docs/CONFIGURATION.md)** - All configuration options
|
||||
- **[Internationalization Guide](docs/INTERNATIONALIZATION.md)** - Complete i18n and multilingual setup guide
|
||||
- **[Layouts Guide](docs/LAYOUTS.md)** - Understanding layouts and templates
|
||||
- **[Shortcodes Reference](docs/SHORTCODES.md)** - All 21 shortcodes documented
|
||||
- **[Styling Guide](docs/STYLING.md)** - Customize colors, fonts, and styles
|
||||
- **[Content Creation Guide](docs/CONTENT-CREATION.md)** - Create pages and blog posts
|
||||
- **[Deployment Guide](docs/DEPLOYMENT.md)** - Deploy to various platforms
|
||||
- **[Troubleshooting Guide](docs/TROUBLESHOOTING.md)** - Common issues and solutions
|
||||
|
||||
## 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)
|
||||
|
||||
```bash
|
||||
hugo new site your-site-name
|
||||
cd your-site-name
|
||||
```
|
||||
|
||||
### 2. Add the theme as a submodule
|
||||
|
||||
```bash
|
||||
git init
|
||||
git submodule add https://github.com/chaoming/chill-theme themes/chill-theme
|
||||
```
|
||||
|
||||
### 3. Example Site (Optional)
|
||||
|
||||
The theme comes with a fully functional example site that demonstrates its features and capabilities. You can use this as a reference when building your own site.
|
||||
|
||||
### Using the Example Site
|
||||
|
||||
The example site provides a great starting point to understand how to:
|
||||
- Structure your content
|
||||
- Use different page layouts
|
||||
- Configure navigation menus
|
||||
- Set up site parameters
|
||||
- Implement common SaaS website features
|
||||
|
||||
1. Copy the example site content:
|
||||
```bash
|
||||
cp -r themes/chill-theme/exampleSite/* .
|
||||
```
|
||||
|
||||
2. The example site includes:
|
||||
- Complete content structure with sample pages
|
||||
- Blog posts with various layouts
|
||||
- Feature pages
|
||||
- Career/Jobs section
|
||||
- Pricing page
|
||||
- Company information page
|
||||
- Properly configured hugo.toml
|
||||
|
||||
### 4. Install dependencies
|
||||
|
||||
```bash
|
||||
# Copy package.json and other config files to your site root
|
||||
cp themes/chill-theme/package.json .
|
||||
cp themes/chill-theme/postcss.config.js .
|
||||
cp themes/chill-theme/tailwind.config.copy.js ./tailwind.config.js
|
||||
```
|
||||
|
||||
```bash
|
||||
# Install dependencies
|
||||
npm install
|
||||
```
|
||||
|
||||
### 5. Configure your Hugo site
|
||||
|
||||
Create or update your `hugo.toml` with the following configuration:
|
||||
|
||||
```toml
|
||||
# Basic Configuration
|
||||
baseURL = "/"
|
||||
title = "Your Site Title"
|
||||
theme = "chill-theme"
|
||||
defaultContentLanguage = "en"
|
||||
|
||||
# Required Features
|
||||
enableEmoji = true # Enable emoji support
|
||||
enableGitInfo = true # Enable Git info for lastmod
|
||||
|
||||
# Pagination
|
||||
paginate = 6
|
||||
paginatePath = "page"
|
||||
|
||||
# Required Module Configuration
|
||||
[module]
|
||||
[module.hugoVersion]
|
||||
extended = true
|
||||
min = "0.80.0"
|
||||
|
||||
# Required Build Configuration
|
||||
[build]
|
||||
writeStats = true # Required for TailwindCSS
|
||||
|
||||
[build.buildStats]
|
||||
enable = true
|
||||
|
||||
# Security Configuration
|
||||
[security.funcs]
|
||||
getenv = ['^HUGO_', '^CI$']
|
||||
|
||||
# Required Markup Configuration
|
||||
[markup]
|
||||
[markup.highlight]
|
||||
noClasses = false
|
||||
lineNos = true
|
||||
codeFences = true
|
||||
guessSyntax = true
|
||||
lineNumbersInTable = true
|
||||
[markup.goldmark.renderer]
|
||||
unsafe = true # Allow HTML in markdown
|
||||
[markup.tableOfContents]
|
||||
endLevel = 3
|
||||
ordered = false
|
||||
startLevel = 2
|
||||
|
||||
# Taxonomies
|
||||
[taxonomies]
|
||||
category = 'categories'
|
||||
tag = 'tags'
|
||||
|
||||
# Theme Parameters
|
||||
[params]
|
||||
description = "Your site description"
|
||||
author = "Your Name"
|
||||
logo = "/images/logo.svg" # Path to your logo
|
||||
# Google Analytics ID (e.g., "G-XXXXXXXXXX")
|
||||
googleAnalytics = "G-XXXXXXXXXX" # Only enabled in production
|
||||
|
||||
# Google Tag Manager ID (e.g., "GTM-XXXXXXX")
|
||||
# Only enabled in production
|
||||
googleTagManager = "GTM-XXXXXXX"
|
||||
|
||||
# Header Configuration
|
||||
[params.header]
|
||||
background = "bg-white/80 backdrop-blur-sm"
|
||||
border = "border-b border-gray-100"
|
||||
|
||||
# Header Logo
|
||||
[params.header.logo]
|
||||
src = "/images/logo.svg"
|
||||
|
||||
# Header Buttons (optional)
|
||||
[params.header.buttons]
|
||||
[params.header.buttons.signIn]
|
||||
text = "Sign in"
|
||||
url = "/signin"
|
||||
[params.header.buttons.getStarted]
|
||||
text = "Get Started"
|
||||
url = "/get-started"
|
||||
|
||||
# Global CTA Configuration (optional)
|
||||
[params.cta]
|
||||
enable = true
|
||||
title = "Ready to Get Started?"
|
||||
description = "Join companies using our platform"
|
||||
[params.cta.primary_button]
|
||||
text = "Get Started Free"
|
||||
url = "/get-started"
|
||||
[params.cta.secondary_button]
|
||||
text = "Book Demo"
|
||||
url = "/demo"
|
||||
|
||||
# Social Media Links (optional)
|
||||
[params.social]
|
||||
linkedin = "https://linkedin.com/in/yourusername"
|
||||
twitter = "https://twitter.com/yourusername"
|
||||
bluesky = "https://bsky.app/profile/yourblueskyhandle"
|
||||
github = "https://github.com/yourusername"
|
||||
|
||||
# Navigation Menu
|
||||
[menu]
|
||||
[[menu.main]]
|
||||
name = "Features"
|
||||
weight = 1
|
||||
[menu.main.params]
|
||||
has_submenu = true
|
||||
submenu = [
|
||||
{ name = "Feature 1", url = "/features/feature-1/" },
|
||||
{ name = "Feature 2", url = "/features/feature-2/" }
|
||||
]
|
||||
[[menu.main]]
|
||||
name = "Pricing"
|
||||
url = "/pricing"
|
||||
weight = 2
|
||||
[[menu.main]]
|
||||
name = "Blog"
|
||||
url = "/blog"
|
||||
weight = 3
|
||||
```
|
||||
|
||||
This configuration includes:
|
||||
|
||||
- **Basic Settings**: Site title, theme selection, and default language
|
||||
- **Required Features**: Emoji support and Git integration
|
||||
- **Pagination**: Posts per page configuration
|
||||
- **Module Configuration**: Hugo Extended version requirements
|
||||
- **Build Settings**: Required for TailwindCSS integration with build stats
|
||||
- **Security Settings**: Environment variable access control
|
||||
- **Markup Settings**: Syntax highlighting and markdown rendering options
|
||||
- **Taxonomies**: Categories and tags support
|
||||
- **Theme Parameters**:
|
||||
- Header configuration with logo and navigation
|
||||
- Call-to-action (CTA) sections
|
||||
- Social media links
|
||||
- Google Analytics configuration (only enabled in production)
|
||||
- Google Tag Manager configuration (only enabled in production)
|
||||
- Custom head content for additional tracking scripts and meta tags
|
||||
- **Navigation Menu**: Main menu structure with dropdown support
|
||||
|
||||
**Note**: For multilingual sites, see the [Multilingual Support](#multilingual-support) section below for additional language configuration.
|
||||
|
||||
## Development
|
||||
|
||||
To start the development server with live reload:
|
||||
|
||||
```bash
|
||||
npm run start
|
||||
```
|
||||
|
||||
This will:
|
||||
- Watch for changes in your TailwindCSS styles
|
||||
- Run the Hugo development server
|
||||
- Automatically rebuild when changes are detected
|
||||
|
||||
To build your site for production:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
This will:
|
||||
- Build and minify your TailwindCSS styles
|
||||
- Generate minified Hugo site in the `public` directory
|
||||
|
||||
## Customization
|
||||
|
||||
### Colors
|
||||
|
||||
The theme uses a primary and secondary color scheme that can be customized in `tailwind.config.js`:
|
||||
|
||||
```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`:
|
||||
|
||||
```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/scss/main.scss`.
|
||||
|
||||
### Custom Head Content
|
||||
|
||||
Add custom tracking scripts or meta tags by creating `layouts/partials/custom-head.html` in your site:
|
||||
|
||||
```html
|
||||
<!-- layouts/partials/custom-head.html -->
|
||||
<!-- Example: Adding Hotjar tracking -->
|
||||
<script>
|
||||
(function(h,o,t,j,a,r){
|
||||
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
|
||||
h._hjSettings={hjid:YOUR_HOTJAR_ID,hjsv:6};
|
||||
a=o.getElementsByTagName('head')[0];
|
||||
r=o.createElement('script');r.async=1;
|
||||
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
|
||||
a.appendChild(r);
|
||||
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
|
||||
</script>
|
||||
|
||||
<!-- Example: Site verification -->
|
||||
<meta name="google-site-verification" content="your-code" />
|
||||
```
|
||||
|
||||
This is perfect for:
|
||||
- Third-party analytics (Hotjar, Mixpanel, Heap, etc.)
|
||||
- Site verification meta tags
|
||||
- Custom fonts or stylesheets
|
||||
- A/B testing scripts
|
||||
- Chat widgets
|
||||
|
||||
See the [Configuration Guide](docs/CONFIGURATION.md#custom-head-content) for more details.
|
||||
|
||||
## Multilingual Support
|
||||
|
||||
The theme has full multilingual (i18n) support with:
|
||||
- Automatic language switcher in the header
|
||||
- Language-specific content directories
|
||||
- Translatable UI strings via i18n files
|
||||
- Language-specific menus and parameters
|
||||
|
||||
### Quick Setup
|
||||
|
||||
1. **Configure languages in `hugo.toml`:**
|
||||
|
||||
```toml
|
||||
defaultContentLanguage = "en"
|
||||
|
||||
[languages]
|
||||
[languages.en]
|
||||
languageCode = "en-us"
|
||||
languageName = "English"
|
||||
weight = 1
|
||||
contentDir = "content"
|
||||
|
||||
[languages.zh-cn]
|
||||
languageCode = "zh-cn"
|
||||
languageName = "简体中文"
|
||||
weight = 2
|
||||
contentDir = "content/zh-cn"
|
||||
```
|
||||
|
||||
2. **Create translation files:**
|
||||
|
||||
Copy `themes/chill-theme/i18n/en.toml` to your site's `i18n/` directory and create language-specific versions (e.g., `i18n/zh-cn.toml`).
|
||||
|
||||
3. **Organize content by language:**
|
||||
|
||||
```
|
||||
content/
|
||||
├── _index.md # English homepage
|
||||
├── blog/ # English blog posts
|
||||
└── zh-cn/ # Chinese content
|
||||
├── _index.md # Chinese homepage
|
||||
└── blog/ # Chinese blog posts
|
||||
```
|
||||
|
||||
4. **Configure language-specific menus:**
|
||||
|
||||
```toml
|
||||
# English menu
|
||||
[[languages.en.menu.main]]
|
||||
name = "Features"
|
||||
url = "/features"
|
||||
|
||||
# Chinese menu
|
||||
[[languages.zh-cn.menu.main]]
|
||||
name = "功能特性"
|
||||
url = "/zh-cn/features"
|
||||
```
|
||||
|
||||
The language switcher will automatically appear in the header when multiple languages are configured.
|
||||
|
||||
**📖 [Full Multilingual Guide →](docs/INTERNATIONALIZATION.md)**
|
||||
|
||||
**💡 Want to see a complete working example?** Check out the [demo site repository](https://github.com/chaoming/hugo-saasify-demo) for a full multilingual setup with English and Simplified Chinese, including all configuration files, translated content, and i18n files.
|
||||
|
||||
## Content Structure
|
||||
|
||||
```
|
||||
content/
|
||||
├── _index.md # Homepage content
|
||||
├── blog/ # Blog posts
|
||||
├── features/ # Feature pages
|
||||
├── docs/ # Documentation pages
|
||||
└── zh-cn/ # Additional language (optional)
|
||||
├── _index.md
|
||||
└── blog/
|
||||
```
|
||||
|
||||
## Build Your Complete SaaS Solution
|
||||
|
||||
Hugo Saasify Theme is perfect for your **marketing site**, but what about your actual SaaS application? Check out [**Fireact.dev**](https://fireact.dev/) - an open-source framework that complements this theme perfectly.
|
||||
|
||||
[Fireact.dev](https://github.com/fireact-dev/main) is a production-ready SaaS application starter built with **React, Firebase, and Stripe**. It provides everything you need for the application side of your SaaS business:
|
||||
|
||||
- **Stripe Integration** - Complete billing system with subscription management, payment processing, invoices, and customer portal
|
||||
- **User Management** - Built-in authentication, team collaboration, user invitations, and role-based access control (admin/user roles)
|
||||
- **Multi-tenancy** - Full support for multiple subscription accounts with isolated data and permissions
|
||||
- **Production Ready** - TypeScript, internationalization (i18n), Firebase Cloud Functions, and comprehensive documentation
|
||||
|
||||
**Perfect Combination**: Use Hugo Saasify Theme for your public-facing marketing website (landing pages, blog, documentation) and Fireact.dev for your authenticated SaaS application. Together, they provide a complete solution for launching your SaaS product quickly.
|
||||
|
||||
Learn more at [fireact.dev](https://fireact.dev/) or view the [GitHub repository](https://github.com/fireact-dev/main).
|
||||
|
||||
## License
|
||||
|
||||
This theme is released under the [MIT license](https://github.com/chaoming/chill-theme/blob/main/LICENSE).
|
||||
|
||||
## Quick Links
|
||||
|
||||
- 📖 [Documentation](docs/README.md)
|
||||
- 🎨 [Demo Site](https://saasify-demo.chaoming.li)
|
||||
- 🐛 [Report Issues](https://github.com/chaoming/chill-theme/issues)
|
||||
- 💬 [Discussions](https://github.com/chaoming/chill-theme/discussions)
|
||||
|
||||
## Support
|
||||
|
||||
Need help? Check the documentation first:
|
||||
|
||||
1. **[Complete Documentation](docs/README.md)** - Start here
|
||||
2. **[Troubleshooting Guide](docs/TROUBLESHOOTING.md)** - Common issues
|
||||
3. **[GitHub Issues](https://github.com/chaoming/chill-theme/issues)** - Report bugs or request features
|
||||
|
||||
## Contributing
|
||||
|
||||
Contributions are welcome! Please feel free to submit a Pull Request.
|
||||
|
||||
## Author
|
||||
|
||||
Created by [Chaoming Li](https://chaoming.li)
|
||||
Reference in New Issue
Block a user