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.

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.

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!

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.

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.

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