Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sleek-stream-theme/sleek-stream

Custom Hugo theme with Tailwind CSS, SCSS, Summery Panel, Admin Panel, and Light/Dark theme support.
https://github.com/sleek-stream-theme/sleek-stream

blogs flowbite-ui go go-templates golang hugo hugo-blog-theme hugo-portfolio hugo-portfolio-theme hugo-site hugo-theme portfolio preline-ui scss tailwindcss themes-css

Last synced: 16 days ago
JSON representation

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

Awesome Lists containing this project

README

        

Sleek Stream 🚀


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



[![Netlify Status](https://api.netlify.com/api/v1/badges/a561f80e-a14f-478f-8369-cf90ef62c172/deploy-status)](https://app.netlify.com/sites/sleek-stream/deploys)
[![CodeQL](https://github.com/Sleek-Stream-Theme/Sleek-Stream/actions/workflows/codeql.yml/badge.svg)](https://github.com/Sleek-Stream-Theme/Sleek-Stream/actions/workflows/codeql.yml)
[![Dependency Review](https://github.com/Sleek-Stream-Theme/Sleek-Stream/actions/workflows/dependency-review.yml/badge.svg)](https://github.com/Sleek-Stream-Theme/Sleek-Stream/actions/workflows/dependency-review.yml)
[![Pages Deploy](https://github.com/Sleek-Stream-Theme/Sleek-Stream/actions/workflows/hugo.yml/badge.svg)](https://github.com/Sleek-Stream-Theme/Sleek-Stream/actions/workflows/hugo.yml)
[![GitHub](https://img.shields.io/github/license/Sleek-Stream-Theme/Sleek-Stream)](https://github.com/Sleek-Stream-Theme/Sleek-Stream/blob/main/LICENSE)
![Code Size](https://img.shields.io/github/languages/code-size/Sleek-Stream-Theme/Sleek-Stream)
[![Minimum Hugo Version](https://img.shields.io/static/v1?label=min-HUGO-version&message=0.116.0&color=blue&logo=hugo)](https://github.com/gohugoio/hugo/releases/tag/v0.116.0)

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](#features)
- [UI Libraries/Frameworks](#ui-librariesframeworks)
- [Hugo Modules Integration](#hugo-modules-integration)
- [Installation](#installation)
- [1. Install Hugo](#1-install-hugo)
- [2. Create a New Hugo Site](#2-create-a-new-hugo-site)
- [3. Clone Sleek Stream Theme](#3-clone-sleek-stream-theme)
- [4. Configure the Theme](#4-configure-the-theme)
- [5. Customize Content](#5-customize-content)
- [6. Customize Appearance](#6-customize-appearance)
- [7. Run Hugo Locally](#7-run-hugo-locally)
- [8. Further Customization](#8-further-customization)
- [9. Deploy Your Site](#9-deploy-your-site)
- [Demo](#demo)
- [Documentation](#documentation)
- [Contributions](#contributions)
- [License](#license)
- [Stargazers over time](#stargazers-over-time)

## 🌟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](https://gohugo.io/getting-started/installing/) 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:

```bash
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:

```bash
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:

```bash
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:

```bash
npm run dev
```

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

```bash
npm run prod
```

Visit [http://localhost:1313/](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](https://sleek-stream.netlify.app/docs) or seek help from the theme's [GitHub repository](https://github.com/Sleek-Stream-Theme/Sleek-Stream.git).

## 🌐Demo

Explore a live demo of [**Sleek Stream**](https://sleek-stream.netlify.app/).

## 📖Documentation

Detailed documentation is available in the [docs](https://sleek-stream.netlify.app//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](LICENSE).

## 🌠Stargazers over time

[![Stargazers over time](https://starchart.cc/Sleek-Stream-Theme/Sleek-Stream.svg?variant=adaptive)](https://starchart.cc/Sleek-Stream-Theme/Sleek-Stream)