chade4-digital / hugobricks

What is Hugobricks?

View DEMO website

Hugobricks is a free website theme for Hugo. It makes building Hugo websites child’s play due to its stackable (LEGO-like) content bricks. Stack an intro brick on top of some image bricks and a pricing table and build a complete website in seconds!

In the past you may have chosen a Wordpress theme and adjusted the images, colors and fonts to the needs of your client. In combination with tools like Gutenberg blocks and page builders like Elementor there was little that could compete with the development speed and flexibility that Wordpress offered. With Hugobricks we bring these advantages to the Jamstack eco-system. If you choose for the Hugobricks theme you get not just a head start, tremendous flexibility and lots of ready to use and reusable components, but also a lightning fast and unbreakable architecture. What are you waiting for? The future is here!

What’s included in Hugobricks?

Hugobricks is a comprehensive starter theme that includes everything you need to get started with your Hugo project.

• 10+ Pre-build pages
• 99+ Google Pagespeed Score
• Built with Hugo and CSS variables for easy styling
• Fully responsive on all devices
• SEO-optimized for better search engine rankings

Hugobricks that are available:

• Intro,
• CTA,
• Image,
• Image2 (alt),
• About,
• Contact,
• 404 Page
• Title,
• Title2 (alt),
• Map,
• Features,
• Reviews,
• Team,
• Blog/posts,
• Pricing,
• Quote,
• Stats,
• Carousel,
• Related
• Authors
• Search
• Products,
• Product,
• Stats,
• Gallery,
• Brands,
• Openinghours

Hugobricks workflow

Hugobricks aims to enhance the Hugo web framework by providing a variety of pre-made bricks for straightforward website-building.

Our companion project, hugocodex, guides beginners in starting a Hugo project from scratch. For those who already have experience with Hugo and want to use it for rapid prototyping and iterating, Hugobricks offers premade websites and customizable components powered by Hugo.

Cloning this repository allows you to start building lightning-fast static sites with flexibility and ease with and already working website.

Here is an example of two bricks (title and cta):

---
title: Page title
---
{{< brick_title >}}

# Title 1
Your first paragraph with some lorem ipsum dolor sit amet.

{{< /brick_title >}}
{{< brick_cta >}}

{{< /brick_cta >}}

Get started with Hugobricks

In order to get a working website feel free to

• clone our repository and start building with stackable content bricks.
• enjoy your already working hugo website, plan your changes/iterations
• re-use default hugobricks
• and/or customise them !

Hugobricks theme features

• Contact form
• Map
• Button (primary and secondary)
• Social buttons
• Contact buttons
• Breadcrumbs
• FAQ's
• Tabs
• Subpages
• Gallery
• Video (native html5),
• Youtube video,
• and much more ...

Hugobricks under the Hood

Hugobricks is build with the regular Hugo building blocks:

• Shortcodes
• Partials
• Layouts / templating

Hugobricks takes advantage of these things to allow content re-use, pivot around content and layouts, and calling the required styling and functional logic.

Hugobricks Feedback

Make your wishlist. Missing a given Hugobrick? Let us know.

Credits and licenses

The functionality is inspired by the many Gutenberg Block Plugins that are available online. The design has been inspired by the MIT licensed Hugoplate from Zeon Studio. The fonts and icons are Apache Licensed and come from Google Fonts and Google Material Symbols. The illustrations are free to use but require an attribution to Storyset. The avatars are CC0 licensed and come from Pravatar. The social media icons (Facebook, Instagram, etc) belong to the respective social networks/their owners.