Skip to content

Custom Hugo theme with Tailwind CSS, SCSS, Summery Panel, Admin Panel, and Light/Dark theme support.

License

Notifications You must be signed in to change notification settings

Sleek-Stream-Theme/Sleek-Stream

Repository files navigation

Sleek Stream 🚀

☄️ Swift | ☁️ Seamless | 🌙 Polished | 📱 Responsive


Netlify Status CodeQL Dependency Review Pages Deploy GitHub Code Size Minimum Hugo Version

Sleek Stream is a versatile Hugo theme designed to provide a modern web development experience. Whether you're building a portfolio, managing blogs, or sharing cheat sheets, Sleek Stream has got you covered.Custom Hugo theme with Tailwind CSS, SCSS, Summery Panel, Admin Panel, and Light/Dark theme support.

Table of Contents

🌟Features

  • 🌐Adaptable Design: Crafted with Tailwind CSS 3.4 for a fully responsive layout.
  • 🎨Versatile Color Schemes: Choose from multiple color schemes or fully customize your own.
  • 🌙Dark Mode Options: Toggle dark mode on/off or enable auto-switching with user preferences.
  • ⚙️Flexible Configuration: Highly customizable settings to tailor the website to your preferences.
  • 📚Article Series Support: Create and organize series of articles seamlessly.
  • 🗂️Dynamic Menus: Header and footer menus for easy navigation.
  • 🔍Intelligent Site Search: Client-side search powered by Fuse.js for efficient content discovery.
  • ⌨️TypeIt Integration: Seamlessly integrate TypeIt for engaging typewriter effects.
  • 🚀FontAwesome 6 Icons: Utilize SVG icons for a sleek visual experience.
  • 🖼️Effortless Image Resizing: Automatic image resizing for a streamlined content presentation.
  • 🛠️Enhanced User Experience: Include heading anchors, Tables of Contents, Code copy, Buttons, Badges, and more.
  • 🚀SEO-Friendly Structure: Designed with SEO in mind, including optimal link structures for social media sharing.
  • 📊Analytics Integration: Google Analytics support for insightful website analytics.
  • 🗣️RSS Feeds, Favicons, and Comments: Comprehensive support for RSS feeds, Favicons, and comments.
  • 🎨Tailwind Customization: Utilize simple Tailwind color definitions and styles for advanced customization.
  • 🚀Performance and Accessibility: Optimized for superior performance and accessibility with perfect Lighthouse scores.
  • 📖Thorough Documentation: Fully documented with regular updates to ensure easy usage and understanding.

UI Libraries/Frameworks:

  • 🎨Preline UI Integration: Leveraging the Preline UI library for enhanced user interface elements.
  • 🚀Flowbite Styling: Utilizing Flowbite to enhance the styling and aesthetics of the web project.

Hugo Modules Integration:

  • 🔗Dynamic Content with Hugo Modules: Leveraging Hugo Modules for efficient management and dynamic loading of content.
  • 🚀Modular Structure: Utilizing Hugo Modules to enhance the project's modular structure for easier maintenance and extensibility.

🛠Installation

1. Install Hugo:

Ensure you have Hugo installed on your machine. If not, follow the official Hugo installation guide for your operating system.

2. Create a New Hugo Site:

In your terminal, navigate to the directory where you want to create your new Hugo site. Run the following commands:

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

3. Clone Sleek Stream Theme:

Inside the themes directory of your Hugo site, clone the Sleek Stream theme:

git clone https://github.com/Sleek-Stream-Theme/Sleek-Stream.git

4. Configure the Theme:

Copy the example configuration files from the /config/_default folder of the Sleek Stream theme to your site's root directory:

cp -r themes/sleek-stream/config/_default/* config/_default/

This step ensures that you have the necessary default configurations. You can then customize these files according to your needs.

5. Customize Content:

Navigate to the content directory in your Hugo site. Customize the content of your portfolio, blogs, or cheat sheets by adding Markdown files.

6. Customize Appearance:

Explore the static/css directory for styling options. Customize the theme's appearance by modifying the styles.css file.

7. Run Hugo Locally:

To see your site locally, run Hugo Server in developement mode:

npm run dev

To see your site locally, run Hugo Server in Production mode:

npm run prod

Visit http://localhost:1313/ in your web browser to view your site.

8. Further Customization:

Refer to the detailed documentation in the docs directory for advanced customization options, shortcodes, and theme features.

9. Deploy Your Site:

Once you're satisfied with your changes, deploy your site to your preferred hosting platform.

That's it! You've successfully set up and customized your Hugo site using the Sleek Stream theme. If you encounter any issues or have questions, refer to the documentation or seek help from the theme's GitHub repository.

🌐Demo

Explore a live demo of Sleek Stream.

📖Documentation

Detailed documentation is available in the docs directory. It covers theme installation, configuration options, and advanced customization.

🤝Contributions

Contributions are welcome! Feel free to submit issues, feature requests, or pull requests to help improve Sleek Stream.

📄License

This theme is open-source and available under the MIT License.

🌠Stargazers over time

Stargazers over time