Create Website with HubSpot CMS Boilerplate: A comprehensive Guide

Today every business has started paying more attention to the user experience, especially after the announcement of Google's next ranking factor being about Page experience. 

Now everyone is trying to stay ahead in the race and offer the best user experience, keeping the Core Web Vitals in mind. Have you begun working on your website yet?

Quick question: Given a choice between developing a website from scratch and then working on it day and night or using a well-known CMS to create amazing websites with the most exciting user experience, what would you pick? Oh, did I tell you that with HubSpot CMS Boilerplate, this whole process is a lot quicker?

Well, the choice is clear. And this brings us to the next few questions: What is HubSpot CMS Boilerplate; what is all the buzz about; and how can one create a website with HubSpot CMS Boilerplate? Let's take these questions one by one.

Excited to start? So, let's dive in.

What is HubSpot CMS Boilerplate?

The HubSpot CMS Boilerplate demonstrates the best practices developers can follow while building on the HubSpot CMS Platform. It basically acts as a starting point for helping developers get a website up and running quickly on the HubSpot CMS Platform. 

The Boilerplate is an open-source GitHub project where everyone is open to making suggestions. With HubSpot CMS Boilerplate, anyone can create great websites with the best user experiences. 

And this is exactly what every business dreams about. After all, it's the website that represents a business digitally.

New call-to-action

Why should Developers use the HubSpot CMS Boilerplate?

  • The HubSpot CMS Boilerplate is based on the best practices followed by developers to create the best website experience. 

  • The HubSpot CMS Boilerplate offers developers a clean, performant, and ready-to-modify website, saving them a substantial amount of development time. 

  • The Boilerplate also provides comprehensive CSS for HubSpot resources such as forms, menu modules, base classes, and much more. 

Getting started with HubSpot CMS Boilerplate

I am positive by now that you must be really eager to know how to set up Boilerplate and start developing your websites as soon as possible. But, before you start, here are some prerequisites:-

  • Have a HubSpot account; if you don't have one, you can create your free account on HubSpot now.

  • Install node.js on your system. NodeJS is required to set up HubSpot's local development tools.
New call-to-action

Install the HubSpot CMS CLI

  • Once you complete the above steps, open a Node command Prompt or your CMD and navigate the directory you would like to save your local HubSpot files.

  • Then run Next, run npm install -g @hubspot/cli to install the HubSpot CLI. This will enable the hs command, which helps interact with your HubSpot account.

Watch this video clip to see how you can Install the HubSpot CMS CLI.


Set up the Local Development Environment

  • Open Node command Prompt Or system's CMD and run this command hs init this will connect the local tools to your HubSpot account. 

  • After running the hs init command, you have to create a personal CMS access key to allow authenticated access to your HubSpot account via the local development tools. To do so, hit "Enter" once you're all set to open your personal CMS access key page in your default browser. Here you can view or generate your personal access key.

  • Copy the access key and paste it into the terminal.

  • Then, you have to provide a unique name for your account, and this name will be used while running the commands.

  • Once you have completed these steps successfully, you'll see a success message, and a hubspot.config.yml file will be created in your current work directory.

Watch this video to learn how you can set up your Local Development Environment.

Time to create your First Project

  • Run this command hs create website-theme Boiler-Demo to create a Boiler-Demo to create a new directory with CMS theme boilerplate. That's it!
New call-to-action

Watch this clip to understand how you can create your first project on HubSpot CMS Boilerplate.

Upload your Project to HubSpot 

  • Run this command hs upload Boiler-Demo Boiler-Demo to upload your new project to a Boiler-Demo folder in your HubSpot account.
Follow the guidelines in the video to upload your project to HubSpot CMS Boilerplate.

Create a Website Page

Now let's hop on to see how to create a new website page. So let's begin:-

  • Navigate to Marketing > Websites > Website pages in the topmost navigation bar. 

  • Go to the "Create" dropdown menu in the upper right-hand corner and click on "Website page."

  • In the next screen, select the "Homepage" template and enter a name for your webpage. 

  • This will create a new page using the template and open the page in the content editor, where you can make any modifications you like. 

  • Click on preview at the top on the right-hand side to see how your web page would appear on different devices.

  • On the Settings tab, provide a URL for the page, a page title, and click "Publish." And voila, your webpage is now live. (Note: you can also schedule your webpage for later, and in that case, select schedule)

  • Select your page's URL to view your live web page.
Watch this video clip to understand how you can create a website on HubSpot CMS.

Wrapping Up

There you go, folks, that was all about creating a website with HubSpot CMS Boilerplate. Hope you find this guide useful. And if you have any doubts, please do let us know. 

Want to launch your website using HubSpot CMS but don't have any hands-on experience on HubSpot? Well, don't worry.

Get in touch with us now, and our team of HubSpot experts will handle everything for you. 

Editor: Richa Sharma

Frequently Asked Questions

How do I create a website using HubSpot CMS?

To create a website using HubSpot CMS, start by using the content editor to tailor your content with images, videos, custom fonts, and uploaded files. Craft and personalize pages as you like, including landing pages with starter templates. The content can be easily edited in a drag-and-drop section, allowing flexibility in design. Additionally, you can seamlessly incorporate images and videos into your HubSpot content for an engaging and dynamic website-building experience.

Can I create a website through HubSpot?

Certainly! HubSpot simplifies website creation without requiring coding skills. Their user-friendly drag-and-drop website builder empowers you to craft a stunning, branded website swiftly. You can monitor your site's performance using HubSpot's CRM platform, fostering your business's growth.

What is a HubSpot boilerplate?

A HubSpot boilerplate is like a template or blueprint for creating websites on HubSpot CMS. It's designed to make things easier for developers, giving them a head start in building websites on the HubSpot platform. Think of it as a guide that not only helps create websites faster but also shows developers the right way to do it. This means they can follow the best practices for building on HubSpot CMS while saving time and effort. It's like having a handy tool to kickstart the website development process and make it more efficient and effective.

Why is HubSpot CMS better?

HubSpot CMS stands out as a user-friendly platform when compared to WordPress. It boasts a simple drag-and-drop interface, helpful built-in SEO tools, and seamless CRM integration. However, it's important to note that it may offer limited customization options compared to WordPress. This means that while HubSpot CMS is more accessible and provides a range of essential features, it may not be as flexible for highly specialized or intricate website needs, making it a better choice for those who prioritize ease of use and integrated marketing tools over extensive customizability.