webdew-logo-new_v2-1
   
webdew-logo-new_v2-1
Close
  • Services
  • Work
  • Resources
    • Knowledge
    • Ebooks
    • Tools
      • Website Audit
      • Website Grader
      • HubSpot ROI
  • Blog
  • About
Let's talk

  • fb-icon-01
  • tw-icon-01
  • insta-icon-01 (1)
  • linkedin-icon-01
  • youtube-icon-01
website-green-icon
Websites
  • Website Designing
  • Website Development
  • Website Migration
  • HubSpot Website
  • WordPress Website
  • Growth-Driven Design
video-blue-icon
Videos
  • 3D Videos
  • 2D Animation
  • Whiteboard Animation
  • Video Ads
  • Explainer Videos
  • Testimonial Videos
  • Onboarding Videos
  • Tutorial Videos
  • Social Media Videos
  • Product Demo Videos
marketing-yellow-icon
Marketing
  • Inbound Marketing
  • Inbound Consulting
  • Marketing Automation
  • Search Engine Optimization
  • Brand Domains
hubspot-red-icon
HubSpot
  • HubSpot Apps
  • HubSpot Themes
  • HubSpot Migration
  • HubSpot Onboarding
  • HubSpot Management
  • HubSpot Development
  • HubSpot Audit
  • Free HubSpot Demo
  • HubSpot Diamond Partner
webdew-logo-new_v2-1
  • Services
  • Work
  • Resources
    • Knowledge
    • Ebooks
    • Tools
      • Website Audit
      • Website Grader
      • HubSpot ROI
  • Blog
  • About
Let's talk

Create website with HubSpot CMS Boilerplate: A comprehensive guide

Create website with HubSpot CMS Boilerplate: A comprehensive guide-vbh
Tag: HubSpot
Author: Vishal Soni
Vishal Soni
Quick Links

Subscribe to Our Blog

Never Miss Any Update From Us !

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.

Know the actual HubSpot CMS cost to create powerful websites

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.
A quick tour to HubSpot CMS: A comprehensive guide

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!
Choose from the best HubSpot website design agencies in the market

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

Design HubSpot website without coding

Related Blogs

Best HubSpot default themes to choose from-vbh
HubSpot

Best HubSpot default themes to choose from

Know the actual HubSpot CMS cost to create powerful websites-vbh
HubSpot

Know the actual HubSpot CMS cost to create powerful websites

12 famous websites that use HubSpot CMS-vbh
HubSpot

12 famous websites that use HubSpot CMS

review-star

Based on 1000+ Reviews on

footer-dot-logo-img
  • Hubspot_Logo-icon
  • clutch_Logo-icon
  • upwork_Logo-icon
  • designrush_Logo-icon
  • goodfirms_Logo-icon
  • g2_Logo-icon
WE ARE GLOBAL
  • US-flag
  • CA-flag
  • IN-flag
  • GB-flag

Copyright © 2019 - 2021 Webdew, Inc. All Rights Reserved

Copyright © 2019 - 2021 Webdew Labs Inc. All Rights Reserved

Copyright © 2016 - 2021 Webdew Private Limited. All Rights Reserved

Copyright © 2019 - 2021 Webdew, Inc. All Rights Reserved

WE ARE SOCIAL
  • fb-icon-01
  • tw-icon-01
  • insta-icon-01 (1)
  • linkedin-icon-01
  • youtube-icon-01
Terms of Services
Privacy Policy