How To Build a Business Website With HubSpot

Before you start building your business website, you’ll need to purchase a domain name. For more information on how to connect your website domain, check out our Domain Name Generator to learn how you can sign up and get your chosen domain name.

It’s important to note that because HubSpot’s CMS Hub is a content management system and not a website builder, it can sometimes seem a bit confusing for beginners. While website builders like GoDaddy prioritize simplicity and ease of use, a CMS will typically require a little more time to master. 

HubSpot also offers a wide range of products beyond its CMS Hub, which can sometimes lead to confusion when getting started. 

Skip Ahead

1. Setting Up Your Account
2. Building Your Website's Style and Structure
3. Creating Pages and Adding Elements
4. Publishing Your Website
5. Creating a Blog

In this section, we’ll walk you through the steps of creating a HubSpot account. For the purposes of this guide, we’ll use the 14-day, free trial. That means we won’t need a credit card to sign up! If you’re interested in purchasing a CMS Hub plan from HubSpot, click here.

To create your HubSpot account:

1. Head over to HubSpot to go to the company’s homepage.

2. Next, click on the “Start free or get a demo” button in the upper-right corner. Once you reach the next page, scroll down until you see the “CMS Hub” section and click on the “Start 14-day free trial” button.

3. Enter your first and last name plus your email address, and then click on the “Next” button.

4. You’ll then need to click on the orange button to go to your email inbox and verify your email address. If you don’t see an email from HubSpot, try looking for it in your spam folder or requesting a new email verification message.

5. Once you verify your email address, create a password as instructed. Make sure it’s at least eight characters long, uses uppercase and lowercase letters, and includes a symbol, number, or whitespace character, and then click on the “Next” button.

6. Next, enter your company name and a domain name, such as “www.company.com.” After you enter these details, click on the “Next” button.

7. You’ll then need to verify you’re not a robot. Check the box and proceed to the next page.

8. The last part of the account set-up process involves providing some details about your business. List the number of people who work for your company, the industry you work in, your position, and your experience with customer relationship management (CRM) software. For the purposes of this guide, we’ll select “I have never used a CRM before.” Now, click on the “Finish sign up” button and you’re all set!

Once you finish creating your HubSpot account, continue on to Step 2 where you’ll begin to tailor your website’s style and structure according to your branding.

After you create your HubSpot account, you’ll arrive at the main dashboard. This is where you’ll build and manage your website as well as monitor its analytics.

The site-building process should take less than an hour, and we will walk you through the entire process. If you ever need help, simply click on the purple “Chat” or “Help” buttons in the lower-right corner of the screen.

To begin building your site:

1. Click on the “Start building” button under the heading, “Take ownership of your website.”  

2. You’ll then reach the task menu. Now, click on the “Select style” button.

3. On the left side of the next page, you’ll see a variety of color schemes from which you may choose as well as the option to customize your own color scheme if you scroll below HubSpot’s suggestions. Select the style that best represents your company’s brand. 
4. Scroll below the preview of your new website on the right side of this page to change its colors and fonts. Once you’re happy with your design, click on the “Next” button.

5. After you select your color scheme, you’ll proceed to a page that asks you to drag and drop an image of your logo to upload it to your website. Do that, and then click on the “Finish” button. (If you don’t have a logo yet, check out our Free Logo Generator tool to create one!)

6. With the style of your website set, it’s now time to start building your site’s overall structure. From the task menu, click on the “Build site” button.

7. The first thing you’ll need to do is decide which pages you want to include on your website from the options provided. Don’t worry, though; you can always go back and add more pages later. Once you make your selections, click on the “Next” button.  

8. Next, select your company’s industry from the options in the drop-down menu and choose a layout for your site’s homepage. When you’re finished, click on the “Next” button.

9. You’ll now get to choose the design for your website’s header and footer. Review the options provided, decide which placement you like best, and then click on the “Next” button.

10. You will do the same thing for your footer. Once you’re happy with both your header and footer, click on the “Finish” button. You’re now done creating the style and the foundational structure for your website’s content!

When you finish structuring your website and choosing your style options, feel free to move on to the next step where we’ll begin to create pages and add other elements.

To learn more about what your website needs, refer to our How to Structure a Website and Best Website Fonts guides.

In this step, you’ll learn the basics of how to create pages for your website with a simple drag-and-drop editor. You won’t actually create any pages for your site just yet so don’t worry if you’re not ready to get into specifics at this point!

To create a page and populate it with elements:

1. Return to the task menu, select the “Build pages with the drag-and-drop editor” option, and then click on the “Start demo” button.

2. Once this pop-up window appears, click on the “Let’s go” button.

3. A mini tutorial will then appear on the left side of the screen that’ll walk you through the basics of using the CMS Hub’s drag-and-drop editor. Begin by clicking on the “Next” button.

4. The tutorial will guide you through the modules on the left side of the screen so you can build a web page. Click on the “Next” button again.

5. Under the “Common modules” section on the left, drag the highlighted “Image” button to the area of the main page that says, “Drop your image here.”

6. This’ll guide you to the next portion of the tutorial. In the next step, you’ll learn how to edit modules with the side panel.
   Notice that if you hover over the image, you’ll have the option to replace it with another image.
   Underneath the image, you’ll also have the option to change that image’s alt text.
   Click on the “Next” button to move on to the following step.
7. Now, you’re ready to learn how to replace images. Above the image on the left side of the screen, click on the “Replace” button.
   Note: If your image size is too large, mobile devices will find it difficult to load. For more information on how to create a mobile-friendly website, check out our How To Make a Website Mobile-Friendly article.
   Next, you’ll choose the cutest puppy image to add to your example web page.  

8. Once you select an image, you’ll see a light blue text box appear at the top of the screen. Click on the “Add text” button in that box.
   Under the “Common modules” tab, look for the highlighted “Rich Text” button. Just like you did with the “Image” button, you’ll need to drag the “Rich Text” button over to the main page and drop it in the area that says, “Drop a Rich Text module here.”
   You’ll then need to highlight the existing headline, “Adorable puppy text,” in order to edit that text.
   Once you highlight that existing headline, click on the “Next” button.

9. The tutorial will then guide you to the upper-right corner of the screen. Click on the “Text Color” icon just above the puppy image, as instructed.

10. Choose a color for your headline text by using the color picker tool.
    That’s it! Click on the “Finish demo” button to move on to the next step.

Now that you’ve learned the basics of creating pages and adding elements like images and text that align with your branding, you’ll be able to start building your website. In the next step, you’ll learn how to publish your content once it’s ready to go live on the internet.

Now that you’ve learned how to create your site’s style, structure, and pages, you’re ready to publish your website. In this step, we’ll walk you through the process of launching your website.

To publish your website:

1. Under the task menu, select “Publish and manage website pages” and click on the “Show me how” button.  

2. A mini tutorial will then appear on your screen like it did in the previous step. It‘ll guide you through the process of publishing your website. The highlighted area shows you a list of all your website’s pages and whether they’re published or drafts. Click on the “Next” button.  

3. On the left side of the screen, your website’s pages will appear sorted according to their status (i.e., published, in draft, scheduled to be published, or archived). Only pages listed under the “Published” section are currently visible on your website. Click on the “Next” button.

4. In the upper-right corner of the screen, the tutorial will guide you to the “Create” button. Use this button to begin adding pages to your website.
   While we won’t create any pages right now, this pop-up window will appear when you click on the “Create” button. This window is where you’ll choose the site on which the new page you’re creating will appear. For now, click on the “Cancel” button and then on the “Next” button in the tutorial pop-up window.  

5. Once the tutorial returns you to your website’s page list, hover over the first draft page in the list and click on the “Edit” button that’ll then appear.
    This will bring you to the web page we plan to publish.  
   If you’d like to start editing your page now, just follow the guidelines from the previous step to make your changes. Otherwise, click on the “Finish demo” button and then on the “Publish” button.
6. When this pop-up window appears on your screen, click on the “Publish page now” button. Don’t worry if you haven’t edited the page yet; we’ll show you how to unpublish it before we move on to creating a blog.
   That’s it! You just published this web page. But before we move on, we’ll show you how to unpublish your page if you aren’t ready for it to go live yet.
7. On the “Task finished!” pop-up window, click on the “X” in the upper-right corner.  
   This will return you to the dashboard of the page you’re editing. Click on the “More” button in the upper-right corner to open a drop-down menu and select the “Unpublish” option.
   This action will move your page back into the “Draft” section of your website’s page list.
   Once you’re ready to move on, click on the HubSpot logo in the upper-left corner of the screen next to the “Contacts” tab.

Now that you’ve completed the CMS Hub tutorial, you can go back and build your business website to suit your specific needs. Then, after you launch your site, you can proceed to the next step, where you’ll beef up your online content with a blog. 

Now that you know how to create, edit, and publish pages on your website using HubSpot’s CMS Hub, you’re ready to start creating a blog for your site. A blog can help beef up your search engine optimization (SEO) efforts and drive engagement with your business’s target audience.

To create a blog:

1. Return to the “Tasks” menu, and then click on the “Create blog” button under the “Create your blog” section.

2. Next, give your blog a name. We’ll stick with the cute puppies theme for the purposes of this guide and name our blog, “Adorable Puppies.”
   Then, select your blog’s language. You can either search for the language you want to use in the search bar or scroll down until you find it.
   You’ll then need to create a URL for your blog by entering a forward slash “/” and then the name of your blog in the field under the “Blog subdirectory” header.  
   Next, you’ll need to write a meta description for your blog. This description will appear on search engines so keep it brief and engaging. Try not to write too much because it’s just meant to give users a general idea of what your blog is all about.

3. Click on the “Next” button to move on and choose a theme.

4. For the purposes of this guide, we’ll select the theme and template that match the overall website design we created earlier by clicking on the image on the screen. You can choose to use a different theme and template by searching for options via the search bar in the upper-right corner of the screen.

5. Once you select a theme for your blog, choose and highlight your preferred template from the available options. You can search for different templates via the search bar in the upper-right corner of the screen. 
6. When you find the template you want to use, click on the “Create blog” button.
   You’re now ready to begin building out your blogging platform and adding individual posts using HubSpot! 

Congratulations! You’ve learned how to build a website with the HubSpot CMS Hub! You can now create an engaging website to expand and grow your business. 

If you think you’d rather try a website builder instead of a CMS, check out our Best Website Builder guide for an overview of simple, effective website builders that can help your business meet its goals.