Hugotube

Overview

HugoTube is a responsive Bootstrap 4 theme that is designed to resemble the layout of YouTube. It provides a mobile-first design, utilizes the Bootstrap 4 grid system, and offers the option to customize styles to fit your website’s needs. The theme also includes share buttons for popular social media platforms such as Google, Twitter, and Facebook.

Features

• Mobile design first with Bootstrap 4 grid
• Integration of Hugo pipes to generate a single CSS file from SCSS and a Javascript file from multiple JS files
• Share buttons with counter for Google, Twitter, and Facebook
• Customizable styles for your website

Installation

To install the HugoTube theme, you can follow these steps:

1. Copy the following files to your website’s root path:

   • assets/sass/custom_variables.scss : customize variables used by Bootstrap
   • assets/sass/styles.scss : main website styles with all Bootstrap variables available

2. Run the following commands inside your Hugo site folder:

   $ cd your_hugo_site_folder
   $ hugo mod init
   $ hugo mod get -u github.com/marcanuy/hugotube
   

3. Alternatively, you can use git submodules to easily update the theme from the source if your site is also in git. Run the following commands inside your Hugo site folder:

   $ cd your_hugo_site_folder
   $ git submodule add https://github.com/marcanuy/hugotube.git themes/hugotube
   

4. To update all the existing submodules from their upstreams, you can either go into each submodule root folder and do a normal git pull or execute the following command:

   $ git submodule update --remote --merge
   

Summary

HugoTube is a responsive Bootstrap 4 theme that mimics the layout of YouTube. It offers a range of features such as mobile-first design, integration of Hugo pipes, and customizable styles. The theme also includes share buttons for popular social media platforms. Installation of the theme is relatively straightforward, and it provides the flexibility to customize styles to fit your own website needs.