Salesforce Lightning Hugo Theme: An Open-Source Theme Built with SLDS

I’m excited to announce the release of the Salesforce Lightning Hugo Theme, an open-source Hugo theme built with the Salesforce Lightning Design System (SLDS). This theme powers SalesforceJoe.com and provides a clean, modern, and performant blogging experience for developers and content creators.

The Salesforce Lightning Hugo Theme - A clean, modern theme built with Salesforce Lightning Design System

What is the Salesforce Lightning Hugo Theme?

The Salesforce Lightning Hugo Theme is a Hugo static site generator theme that leverages the Salesforce Lightning Design System to create beautiful, responsive websites. It’s designed specifically for bloggers, developers, and content creators who want a professional, Salesforce-inspired design for their Hugo sites.

Key Features:

• Built with SLDS: Uses official Salesforce Lightning Design System components and styling
• Fully Responsive: Works seamlessly on desktop, tablet, and mobile devices
• High Performance: Optimized for speed, scoring 98 out of 100 on Google PageSpeed Insights
• Accessible: Semantic HTML and accessibility best practices built-in
• Customizable: Easy to customize through Hugo configuration and custom CSS
• Blog-Ready: Full support for blog posts, categories, tags, and navigation
• Fast & Lightweight: Minimal dependencies, fast page loads

Why I Built This Theme

As a Salesforce professional and blogger, I wanted a theme that:

1. Reflected My Brand: A Salesforce-inspired design that aligns with my professional identity
2. Performed Well: Fast loading times and excellent performance scores
3. Was Easy to Customize: Simple to modify and extend for my specific needs
4. Looked Professional: Clean, modern design that works well for technical content

After building and refining this theme for SalesforceJoe.com, I decided to open-source it so others in the Salesforce and Hugo communities could benefit from it.

Performance

One of the key focuses in developing this theme was performance. The theme is optimized for speed and achieves excellent performance scores:

• Google PageSpeed Insights: 98 out of 100
• Fast Load Times: Minimal dependencies and optimized assets
• Efficient CSS: Uses SLDS via CDN with custom CSS for specific enhancements
• Semantic HTML: Clean, accessible markup

The theme scores 98/100 on Google PageSpeed Insights

Features in Detail

Salesforce Lightning Design System Integration

The theme uses the official Salesforce Lightning Design System via CDN, ensuring you get:

• Consistent Design Language: All SLDS components and patterns
• Professional Appearance: The same design system used by Salesforce
• Responsive Components: SLDS components that work across all devices
• Accessibility: SLDS accessibility standards built-in

Responsive Design

The theme is fully responsive and works beautifully on:

• Desktop: Full-featured layout with optimal use of space
• Tablet: Adaptive layouts that maintain usability
• Mobile: Touch-friendly interface optimized for smaller screens

Blog Features

Complete blogging functionality including:

• Post Cards: Beautiful card-based post listings
• Categories & Tags: Full support for organizing content
• Reading Time: Automatic reading time calculation
• Social Sharing: Built-in social sharing buttons
• Post Navigation: Previous/next post navigation
• Search: Easy content discovery

Customization Options

Highly customizable through Hugo configuration:

• Homepage Content: Customizable introduction section
• Reading Time: Toggle reading time display
• Share Buttons: Enable/disable social sharing
• Post Navigation: Control previous/next post links
• Breadcrumbs: Optional breadcrumb navigation

Installation

The theme is available on GitHub and can be installed in several ways:

As a Git Submodule (Recommended)

cd your-hugo-site
git submodule add https://github.com/JHenzi/salesforce-lightning-hugo-theme.git themes/salesforce-lighting

As a Clone

cd your-hugo-site/themes
git clone https://github.com/JHenzi/salesforce-lightning-hugo-theme.git salesforce-lighting

Then set the theme in your config.yml:

theme: salesforce-lighting

Configuration

The theme supports all standard Hugo configuration options. Key parameters include:

• mainSections: List of content sections to display on the homepage (default: ["posts"])
• ShowReadingTime: Show reading time for posts
• ShowShareButtons: Show social sharing buttons
• ShowPostNavLinks: Show previous/next post navigation
• homeInfoParams: Homepage introduction content

Example Configuration

theme: salesforce-lighting

params:
  ShowReadingTime: true
  ShowShareButtons: true
  ShowPostNavLinks: true
  
  homeInfoParams:
    Title: "Welcome to My Blog"
    Content: "This is my blog powered by the Salesforce Lightning Hugo Theme."

Customization

The theme is designed to be easily customizable:

Custom CSS

Add your custom styles to themes/salesforce-lighting/static/css/custom.css. This file is included after the SLDS styles, so your customizations will override defaults.

Custom JavaScript

Add custom scripts to themes/salesforce-lighting/static/js/custom.js for additional functionality.

Layouts

The theme includes several layout files:

• layouts/_default/baseof.html - Base template
• layouts/_default/index.html - Homepage
• layouts/_default/list.html - List pages (categories, tags, etc.)
• layouts/_default/single.html - Single post/page
• layouts/404.html - 404 error page

Partials

Reusable components in layouts/partials/:

• head.html - HTML head section
• header.html - Site header/navigation
• footer.html - Site footer
• post-card.html - Post card component
• scripts.html - JavaScript includes

Real-World Usage: SalesforceJoe.com

This theme powers SalesforceJoe.com, my blog about Salesforce development, best practices, and industry insights. The theme has been battle-tested with:

• 50+ Blog Posts: Handles various content types and lengths
• Multiple Categories: Organizes content across different topics
• Tags System: Flexible tagging for content discovery
• High Traffic: Performs well under real-world usage

The theme has proven to be reliable, performant, and easy to maintain for a production blog.

Technical Details

SLDS Integration

The theme uses the Salesforce Lightning Design System via CDN:

https://cdn.jsdelivr.net/npm/@salesforce-ux/design-system@2.20.0/assets/styles/salesforce-lightning-design-system.min.css

This ensures you always have access to the latest SLDS components and styles.

Icons

The theme references SLDS icons. For production use, you can:

1. Download the SLDS icon sprite files
2. Place them in themes/salesforce-lighting/static/assets/icons/
3. Update icon references in templates to use local paths

Browser Support

The theme works with all modern browsers:

• Google Chrome (latest)
• Mozilla Firefox (latest)
• Apple Safari (latest)
• Microsoft Edge (latest)

Contributing

Contributions are welcome! The theme is open source and available under the MIT License. If you’d like to contribute:

1. Fork the Repository: https://github.com/JHenzi/salesforce-lightning-hugo-theme
2. Create a Feature Branch: git checkout -b feature/AmazingFeature
3. Make Your Changes: Follow the existing code style and patterns
4. Submit a Pull Request: Share your improvements with the community

Reporting Issues

If you encounter any problems or have suggestions, please open an issue on GitHub.

Why Choose This Theme?

If you’re looking for a Hugo theme, here’s why the Salesforce Lightning Hugo Theme might be right for you:

• Professional Design: Clean, modern Salesforce-inspired design
• Proven Performance: Excellent PageSpeed scores and fast load times
• Active Development: Regularly updated and maintained
• Community Support: Open source with active community
• Salesforce Ecosystem: Perfect for Salesforce professionals and developers
• Easy to Customize: Simple to modify and extend
• Well Documented: Comprehensive README and documentation

Future Enhancements

Planned improvements include:

• Additional layout options
• More customization options
• Enhanced mobile experience
• Additional shortcodes
• Theme variations

Get Started Today

Ready to use the Salesforce Lightning Hugo Theme for your site?

1. Visit the Repository: https://github.com/JHenzi/salesforce-lightning-hugo-theme
2. Install the Theme: Follow the installation instructions above
3. Configure Your Site: Set up your Hugo configuration
4. Start Blogging: Create your first post!

Conclusion

The Salesforce Lightning Hugo Theme brings the power and beauty of the Salesforce Lightning Design System to Hugo static sites. Whether you’re a Salesforce professional, developer, or content creator, this theme provides a solid foundation for building a professional, performant blog.

With its excellent performance scores, clean design, and easy customization, it’s a great choice for anyone looking to create a modern, responsive website with Hugo.

Try it out today and see how it can transform your Hugo site!

Resources

• GitHub Repository: https://github.com/JHenzi/salesforce-lightning-hugo-theme
• Salesforce Lightning Design System: https://www.lightningdesignsystem.com/
• Hugo Documentation: https://gohugo.io/documentation/
• Live Example: SalesforceJoe.com

Ready to build a professional blog with the Salesforce Lightning Hugo Theme? Check out the repository on GitHub and get started today. It’s open source, free to use, and actively maintained.