https://github.com/freshjuice-dev/freshjuice-dev-hubspot-theme
A developer starter theme for HubSpot CMS with Tailwind CSS, Alpine.js, and extra utilities to accelerate custom theme development.
https://github.com/freshjuice-dev/freshjuice-dev-hubspot-theme
alpinejs hubl hubspot hubspot-theme starter-theme tailwindcss
Last synced: 5 months ago
JSON representation
A developer starter theme for HubSpot CMS with Tailwind CSS, Alpine.js, and extra utilities to accelerate custom theme development.
- Host: GitHub
- URL: https://github.com/freshjuice-dev/freshjuice-dev-hubspot-theme
- Owner: freshjuice-dev
- License: mit
- Created: 2024-01-07T03:52:05.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-09-08T01:40:18.000Z (10 months ago)
- Last Synced: 2025-11-22T03:00:05.545Z (7 months ago)
- Topics: alpinejs, hubl, hubspot, hubspot-theme, starter-theme, tailwindcss
- Language: HTML
- Homepage: https://freshjuice.dev/
- Size: 33.5 MB
- Stars: 27
- Watchers: 2
- Forks: 11
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🍹 FreshJuice DEV – Developer Edition of the FreshJuice HubSpot Theme
[](https://github.com/freshjuice-dev/freshjuice-dev-hubspot-theme/releases)
[](https://github.com/freshjuice-dev/freshjuice-dev-hubspot-theme/commits/main)
[](https://github.com/freshjuice-dev/freshjuice-dev-hubspot-theme/blob/main/LICENSE)
[](https://github.com/freshjuice-dev/freshjuice-dev-hubspot-theme/watchers)
[](https://github.com/freshjuice-dev/freshjuice-dev-hubspot-theme/network/members)
[](https://github.com/freshjuice-dev/freshjuice-dev-hubspot-theme/stargazers)
FreshJuice DEV is a modern, clean, and minimalistic HubSpot CMS theme designed specifically for developers.
Built with **Tailwind CSS** and **Alpine.js**, it offers full flexibility and a clean architecture, making it easy to customize and extend for real-world production use.
[**Demo website →**](https://freshjuice.dev/developer-edition/demo/)
---
## Purpose
This theme helps developers get a head start on HubSpot CMS theme development.
While most HubSpot themes are heavy and bloated, FreshJuice DEV is intentionally minimal — it loads only the components you actually need, resulting in a pixel-perfect design and a fast-loading website.
---
## Getting Started
### Prerequisites
- [Node.js](https://nodejs.org/en/) (v22.0.0 or newer)
- [HubSpot CMS CLI](https://developers.hubspot.com/docs/cms/developer-reference/local-development-cli)
### Installation
1. Clone the repo and `cd` into it.
2. Run `npm install` (requires Node v22.0.0+).
3. Run `npm run prepare` to install [Husky](https://typicode.github.io/husky/) hooks.
4. For local development:
`npm run start` — runs Tailwind CSS, esbuild, and HubSpot CLI with file watching, rebuild, and live upload to HubSpot.
5. For production build:
`npm run build` — builds Tailwind CSS and JavaScript.
6. For uploading to HubSpot:
`npm run upload:hubspot` — uploads the theme via HubSpot CLI.
---
## Tech Stack
- **[Tailwind CSS](https://tailwindcss.com/)** – Utility-first CSS framework.
- **[Alpine.js](https://alpinejs.dev/)** – Minimal JavaScript framework for declarative interactivity.
- **[HubSpot CMS CLI](https://developers.hubspot.com/docs/cms/developer-reference/local-development-cli)** – Local development toolkit for HubSpot.
---
## Project Structure
```plaintext
source/ # Theme source files
├── css/ # Source CSS files (Tailwind CSS)
├── images/ # Source images and assets
└── js/ # Source JavaScript files
theme/ # Compiled theme files for HubSpot
├── css/ # Compiled CSS files
├── images/ # Images and icons
├── js/ # Compiled JS and vendor scripts
├── macros/ # HubL macros
├── modules/ # HubL modules
├── sections/ # HubL sections
└── templates/ # HubL templates
├── layouts/ # Layout templates
├── partials/ # Partial templates
└── system/ # System templates
```
---
## Contributing
If you find an issue, [open an issue](https://github.com/freshjuice-dev/freshjuice-dev-hubspot-theme/issues).
Contributions are welcome — fork the repo and submit a pull request.
---
## Versioning
We use [SemVer](http://semver.org/) for versioning.
See the [releases page](https://github.com/freshjuice-dev/freshjuice-dev-hubspot-theme/releases) for available versions.
---
## License
Distributed under the MIT License. See the [LICENSE](./LICENSE) file for the full text.
**Key points of the MIT License**:
- You can use, copy, and modify the software.
- You can distribute original or modified versions of the software.
- You can include the software in commercial products or services.
- You must include the same license text in all copies or substantial portions of the software.
- No warranty is provided and no patent rights are granted.