How to Build a HubSpot Website [Complete, Step by Step Guide for Beginners]

How to Build a Website in HubSpot From Start to Finish

Table of contents

• Sign up to HubSpot
• Set up the basic settings
• Download a theme from HubSpot Asset Marketplace
• Set up a child theme
• Set up global modules (optional)
• Document your brand’s style guide
• Set up theme settings
• Upload Custom Fonts (Optional)
• Block your domain from Search Engines
• Start building pages
• Go live process
• Set up Google Accounts

Sign up to HubSpot

1. Sign up to HubSpot: https://www.hubspot.com/products/get-started
2. Click Get started free (you can upgrade to a higher tier later)
   
3. Fill out form
4. Verify your account

Set up the basic HubSpot settings

Preferences

We highly recommend you set this up to ensure the security of your HubSpot account.

1. Navigate to Settings ⚙️ > Preferences > Security
2. Next, navigate to Security and set up Two-factor authentication  - we recommend using a 2FA mobile app like Google Authenticator or Authy
3. HubSpot will provide you with a QR code that you’ll need to scan on your 2FA mobile app
4. Open your authenticator app on your mobile device. Click the “+” and scan the code

Account Defaults

General

1. Navigate to Settings ⚙️ > Account Setup > Account Defaults > General
   Enter  your Account Name, TIme zone, Fiscal (Financial) Year, and your Company Information (Company name, domain, Address/location)
   

Security

1. Navigate to the Security tab
2. Tick Require Two-Factor Authentication (2FA)
   

Branding

1. Navigate to the Branding tab > My Branding Kit
   
2. Add your Logo and Favicon
   
   
   Here’s an example:
   
   
3. Set your Brand colours
   
   
   Here’s an example:
   
   
   

Need help building a HubSpot website? XEN can help.

We build functional, beautiful and business goals-focussed websites using CLEAN theme. If you want to learn more, visit our HubSpot Web Design page.

Download a theme from HubSpot Asset Marketplace

1. Navigate to Asset Marketplace by clicking the Marketplace icon   on the upper right-hand of HubSpot
   
2. Choose from the list of themes to use
• HubSpot has a range of free and paid themes available on their Marketplace. We recommend the ones below because we have already used them.
  
  

  Free themes

  • Growth
  • You don’t need to download this from Marketplace because this is the default theme that HubSpot provides
  • We recommend using this if you want a simple theme that requires less customisation
  • Spark
  • If you want a free theme but with more customisation options and more modules, we recommend Spark theme

  Paid themes

  We highly recommend using one of the CLEAN themes by Helpful Hero if you’re looking for a paid theme that's easy to use but offers a  wide range of styling options:

  • CLEAN Pro
  • Costs $997 (as of writing) - a wide range of modules and highly customisable modules and settings
  • CLEAN Lite
  • Costs $100 (as of writing) - the lite version of CLEAN pro is ideal for websites that don’t require a lot of modules

  There are other great paid and free themes that you can get from the HubSpot Asset Marketplace so we encourage you to test them if you find that our suggested themes above don't work for you.

  Disclaimer: we’re not paid to endorse any of these themes. As mentioned above, we recommend these themes because we use them often for our website and for our clients.

3. Once you’ve chosen a theme, install it
   
4. Set it as your active theme but don’t edit the theme settings yet (ie don’t choose the second option)
   

Set up a child theme

1. Navigate to Marketing > Design Tools
   
2. On the left sidebar, find the name of the theme you downloaded under the marketplace folder
   
3. Right-click on the theme folder and create a child theme from it
   
4. Enter the name and create the child theme
   
   
   

Set up a Global module (optional)

If you plan on building multiple websites on the same HubSpot portal, we recommend you do the following steps. This means you can have different global modules (header, footer) for each of your websites. Otherwise, you can skip this part.

1. Navigate to Marketing > Design Tools
   
2. On the left sidebar, find the name of the theme you downloaded under the marketplace folder
3. Find the global modules from the folder - the location of global modules can vary on each theme but they’re usually under the modules folder
• This is where you can find them in the Spark theme folder
  
• This is where you can find them in the CLEAN theme folder
  
  They usually have the word ‘global’ in their name:
  
  
4. Right-click on the global module and clone it to child theme
   
   Do this for all the global modules in that folder

Document your brand’s style guide

Prepare a doc summarising your brand’s style guide, if you don’t have one yet. This will make it easier for you to set up the theme styles later.

1. Download or make a copy of this brand guide doc template (link)
2. Fill out as much information as you can but don’t worry if you’re unsure of the items in the doc. At a minimum, you should know the font family and colour you would like to use on your website

Set up the theme settings

1. Navigate to Marketplace Downloads by clicking the Marketplace icon   on the upper right-hand of HubSpot
   
2. Edit theme settings
   
3. Navigate to Global Settings > Primary Colors and enter your primary colours based on the brand guide doc
   
   You’ll see a preview on the right of how these colours will look on a page
4. Next, enter your secondary colours (based on the brand guide doc)
   
5. Next, update the rest of the options on theme settings by opening each of these items and editing the styling based on your brand guide doc:
   

Note: the theme settings options will vary depending on the theme you installed. However, the overall goal is for you to update your theme settings so that these match your brand guide.

You can always go back to these settings if you want to change any styling later.

Upload Custom Fonts (Optional)

Only Google fonts are available in your theme settings.

 If you can’t find the font that you want to use, you can upload a custom font by following the steps below:

1. Prepare the font in three formats:
   • .eot
   • .woff
   • .ttf
2. If you only have one format of this font, you can convert it to different formats by using free online tools like Cloudconvert (link).
   
3. Download the converted font formats to your device and rename them. We recommend following this  naming convention:
   • Lowercase
   • No spaces - use a dash instead
     
4. Upload these files to HubSpot

• • Navigate to Marketing > Files and Templates > Files
    
  • Create a folder called ‘assets’
  • Under this folder, create these four folders
    
    This will make your assets more organised
  • Next, upload your fonts to the fonts folder
• If you’re using a free HubSpot account, you won’t have access to the Files tool. As an alternative, you can upload your custom fonts to the theme folder.

• • Open your child theme folder on Design Tools
    
  • Create a new folder under the child theme folder
    
  • Name the folder and click create:
    
  • Click the fonts folder and upload your font files to it
    
  • You should now see your font files under the fonts folder
    

5. Open your child.css file
   
   
6. Add your font to the 'child.css' file using the code below.
   
   @font-face {
font-family: 'Font-name-1';
src: url('https://www.website.com/font-name-1.eot') format('eot'), url('https://www.website.com/font-name-1.woff') format('woff'), url('https://www.website.com/font-name-1.ttf') format('truetype');
}
@font-face {
font-family: 'Font-name-2';
src: url('https://www.website.com/font-name-2.eot') format('eot'), url('https://www.website.com/font-name-1.woff') format('woff'), url('https://www.website.com/font-name-1.ttf') format('truetype');
}
7. Copy each of your font’s URLs from wherever you uploaded it
   • From the Files tool:
     
   • Or from the Theme folder:
     
8. Replace the font URLs in the child.css file with the font URL you copied from the previous step.
   • Here’s an example of how it would look like if you uploaded the font files on the
     Files tool:
• Here’s how it should look like if you uploaded the font files in a theme folder:
  
9. Next,  update the name of the font to something descriptive but without spaces:
10. Next, set your fonts on the child.css file. Here’s an example of setting the headings (from h1-h6) to the custom font I uploaded:
    
    
    If you want to learn more about CSS Fonts, check out W3 Schools (link).

Block your domain from Search Engines

Follow the steps below if you don’t want your website to be crawled/indexed by Search Engines yet. You will remove this later once your website is ready to go live.

You can skip this step if:

1. you have live pages using this domain that you don’t want to be blocked from Search Engines;
2. you’re working on a staging area of your website in HubSpot - staging pages are already blocked from Search Engines.
   
   This is where you can access the staging area in HubSpot’s Website tool but if you have a free HubSpot account or you don’t have a subscription to HubSpot CMS, you won’t see this option.
   
   (For simplicity, we won’t be using Content staging in this blog post.)
   
   

If you’re happy to block your whole domain from Search Engines, follow the process below.

1. Navigate to Settings > Website > Pages
2. Choose a domain from the dropdown if you have already connected a custom domain
   
3. Then click SEO & Crawlers > Override default settings
   
4. Add this code to the Robots.txt field:
   User-agent: *
Disallow: /

5. If you haven’t connected a custom domain yet, don’t worry,  you can do this later. We have a separate process for this in the latter part of this blog post.
   
   For now, just choose the default option:
   
6. Add this code to the Robots.txt field:
   User-agent: *
Disallow: /

Start building pages

1. Navigate to Marketing > Website > Website Pages
2. On the upper-right corner, click Website page under the Create button
   
3. Choose a domain from the dropdown if you have already connected a custom domain
   • If you haven’t connected a custom domain yet, you can do this later
   • For now, just choose the domain provided by HubSpot which ends with hubspotpagebuilder.com
4. Name your page (this is only visible internally so make it short but descriptive)
   
5. Check if you’re using the correct theme (ie the theme you’ve just set up)
   
6. If you’re seeing a different theme, click the dropdown and click Change theme
   
7. Find the child theme that you’ve just set up and set it as an active theme
   
8. Next, choose a template that would best suit the page you’re working on but don’t worry if there are sections or modules that you want to remove or add, you can still customise this further later
   
9. Start building your HubSpot page by using HubSpot’s drag-and-drop editor
   1. Using the HubSpot editor is pretty straightforward so we won’t go into detail on how to use it
   2. However, you can watch these videos from the HubSpot academy if you want to learn how to use it:
      
      • How to create a page in CMS Hub
      • How to edit the layout of a page in CMS Hub
      • How to edit the style of a page in CMS Hub
   3. Below are some best practices you should follow
      
      Headings (Source: CSUN)
      • Use headings to provide structure to your page or post. eg follow this hierarchy:
        
      • Do not skip heading levels. Proper header levels ascend from H1-H6
      • In most cases, you don't need to use h1 anymore because websites usually set the title of the page or post as h1
      • Always provide a descriptive page title
      • Include Keywords
      
      Images and Files

• • • Images’ file size should be no more than 300KB 
    • No spaces in the file name, should use a dash to separate words
    • Should be lowercase
    • Image name should be descriptive
    • Should be uploaded to a relevant folder (eg in the images folder under the assets folder)
      
    • Images should have alt tags because Search Engines use them to figure out what the image is
      • Alt tags should include keyword/s or describe what the image is about
      • Alt tags shouldn't contain special characters unless necessary
        

10. Once you’re done adding the content to your page, go to the Settings tab and set up:

• Page title - title tags are important because they let readers know what information will be present when a user clicks on a page. It appears on Search Engines Search Results. Best practices:
  • Should be between 50-60 characters in length  (use up the maximum number of characters if possible)
  • Should include the main keyword/s
  • Use unique titles - don't use generic ones like  “Home” or “Profile"
  • Include target location if applicable
    
• Content slug - this is the URL after the homepage/domain URL
  
• Meta description - this is the snippet of text that appears below the title tag in a search engine result. Best practices:
  • 155–160 characters
  • a summary of the page
  • include a relevant call to action, e.g.: Find out how we help…
    
• Enable featured image - this is the image that will be automatically pulled in on social posts
  
• Publish your first page
  
  • As mentioned in the ‘Block your domain from Search Engines’ section of this post, this won’t be indexed or crawled by Search Engines yet so go ahead and publish your page.

Go live process

Brand domain

Once you have finished creating all your pages, the next step is to set up your custom domain.

Skip this process if your domain is already connected to HubSpot.

1. Navigate to Settings ⚙️ > Website > Domains & URLs
2. Add your brand domain under the Advanced options section
   
   
   • According to HubSpot, a brand domain is the part of a domain between the subdomain and the top-level domain. So if my domain is www.xen.com.au, my brand domain is xen
     
3. Add brand domain

Connect a domain and set up DNS

Skip this process if your domain is already connected to HubSpot.

1. Connect a domain
   
2. Select your brand domain from the dropdown
   
3. Enter your subdomain, eg  www
   
4. Update the top-level domain if needed, eg com.au
   Or you can leave it as is if you want to use com only
   
5. Click next until you get to the hosting set up
6. Update your DNS records by following the instructions provided by HubSpot.
   
   
   This step can be implemented by your IT team or you can contact your domain name provider if you’re not sure how to update your DNS records.
7. Once you or your team are done updating the DNS records, click the Verify button
   
   • Note: it could take up to 80 minutes for the DNS record to be updated so check back later if the domain’s status in HubSpot is still unverified
8. Once your domain has been verified, proceed to the next steps below

Updating the domain on each page

1. Edit one of the pages you created
2. Navigate to Settings
3. Scroll down to the Domain section and choose the domain you’ve just connected to HubSpot
   
4. Update page
   
5. Do this for all the pages you created
6. Finally, unblock the website from Search Engines by navigating to Settings > Website > Pages > SEO & Crawlers and remove the forward slash (/) from the second line:
   
   
   
   It should look like this after editing:
   
7. Your website is now live! 🎉

If you've made it this far, congratulations! Here's a dancing puppy for you:

 

 

 

 

View this post on Instagram

 

 

 

 

 

 

 

 

 

 

 

A post shared by pups l dogs (@osm.pups)

Take the extra step - set up Google accounts

Set up these Google accounts if you haven't yet or don't have one yet. This is very important for tracking your website's analytics.

Google Tag Manager

• Check out our KB article on how to set up Google Tag Manager and integrate with HubSpot: Set up Google Tag Manager (GTM) and Embed on your Website

Google Analytics

• Check out our KB article on how to set up Google Tag Manager and integrate with HubSpot: Set up Google Analytics 4 (GA4)
• And Check that GA4 is tracking correctly

Google Search Console

• Create a Google Search Console account and follow Google’s instructions on how to verify (link)
• Next, Connect Google Search Console to your HubSpot Portal

Need help building a HubSpot website? XEN can help.

We build functional, beautiful and business goals-focussed websites using CLEAN theme. Book a discovery call today to discuss your needs or visit our HubSpot Web Design page.