🍹FreshJuice – HubSpot CMS Theme Boilerplate

A modern, clean, and minimalistic boilerplate for HubSpot CMS themes. This boilerplate is designed to help you get started with your HubSpot CMS theme development quickly. It includes a modern frameworks and tools like Tailwind CSS, Alpine.js.

Demo website

Purpose

This boilerplate is designed to help developers a head start on their HubSpot CMS theme development. While most of HubSpot themes are chunky and bloated, this boilerplate is designed to be minimalistic and load only required components. Solution for pixel perfect design and fast loading website.

Getting Started

Prerequisites

• Node.js (v20.0.0 or newer)
• HubSpot CMS CLI

Installation

1. Clone the repo and CD into it
2. Run npm install (Uses Node v20.0.0 or newer)
3. Run npm run prepare to install husky hooks.
4. For local development, run npm run start. This will run tailwindcss, esbuild, and hs-cli to watch, and rebuild, and upload to HubSpot as you dev.
5. For production build, run npm run build. This will run tailwindcss, esbuild.
6. For uploading to HubSpot, run npm run upload:hubspot. This will run hs-cli to upload theme to HubSpot.

Tech Stack

• Tailwind CSS: A utility-first CSS framework.
• Alpine.js: Alpine is a rugged, minimal tool for composing behavior directly in your markup. Think of it like jQuery for the modern web.
• HubSpot CMS CLI

Project Structure

• scripts: contains helper scripts for building and uploading to HubSpot.
• source: contains source files for the theme.
• theme: contains the theme files that will be uploaded to HubSpot.
  • theme/css: contains the compiled CSS files.
  • theme/images: contains the images, and icons for the theme.
  • theme/js: contains the compiled JS and vendor JS files.
  • theme/macros: contains HubL macros for the theme.
  • theme/modules: contains HubL modules for the theme.
  • theme/sections: contains HubL sections for the theme.
  • theme/templates: contains HubL templates for the theme.
    • theme/templates/layouts: contains the layout templates for the theme.
    • theme/templates/partials: contains the partial templates for the theme.
    • theme/templates/system: contains the system templates for the theme.

Versioning

We use SemVer for versioning. For the versions available, see the releases on this repository.

License

Distributed under the GPL-3.0 License. See LICENSE for more information.