> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: d0730d97-116e-4d84-bae4-86ce6c537440
---

# Build a classic HubL theme

> Get started with HubSpot CMS by building a classic HubL theme.

HubSpot's CMS is a powerful, flexible platform for creating HubSpot websites, including website pages, blogs, and lightweight apps. It features built-in security and reliability features, along with a globally distributed Content Delivery Network (CDN) that ensures fast page load times.

When developing on the HubSpot CMS, you can use your preferred tools, technologies, and workflows, such as [GitHub](/cms/start-building/introduction/developer-environment/github-integration), while developing websites. Content creators can then create pages and publish content using drag and drop editors. And because the CMS is integrated with the CRM, you can [create dynamic website experiences](/cms/start-building/features/data-driven-content/crm-objects) for your visitors based on the data you already have.

## Before you begin

Before you start, ensure you've done the following:

* Create a free test account to build without impacting a production environment. You can use either of the following types of accounts:

  * Create a [developer account](/getting-started/account-types#app-developer-accounts), then create a [test account](/getting-started/account-types#developer-test-accounts) within it. Because you can also build private apps in developer test accounts, along with building public apps in developer accounts, you'll have one home for both CMS and app development.
  * Create a [CMS developer sandbox account](/getting-started/account-types#cms-sandbox-accounts).

* Install [Node.js](https://nodejs.org/en/), which enables HubSpot's local development tools. Versions 18 or higher are supported.

<Steps>
  <Step title="Install the HubSpot CLI">
    Once you're ready to begin, open a terminal window and create or navigate to the directory where you want your local HubSpot files to live. This working directory is where the theme and its associated files will be placed.

    Next, run `npm install -g @hubspot/cli@latest` to install the HubSpot CLI, which introduces an `hs` command that allows you to easily interact with your HubSpot account.
  </Step>

  <Step title="Configure the local development tools">
    Run `hs account auth` to connect the tools to your HubSpot account. This command will walk you through the following steps:

    1. First you’ll be guided to create a personal access key to enable authenticated access to your account via the local development tools. You’ll be prompted to press "Enter" when you’re ready to open the [Personal Access Key page](https://app.hubspot.com/l/personal-access-key) in your default browser. This page will allow you to view or generate your personal access key, if necessary. (Note: You’ll need to select at least the "Design Manager" permission in order to complete this tutorial.) Copy your access key and paste it in the terminal.
    2. Next, you’ll enter a name for the account. This name is only seen and used by you, For example, you might use "sandbox" if you're using a developer sandbox or "company.com" if you’re using a full customer account. This name will be used when running commands.

    Once you've completed the config file setup flow, you'll see a success message confirming that a configuration file, [\~/.hscli/config.yml](/developer-tooling/local-development/hubspot-cli/reference#authentication), has been created in your home directory.
  </Step>

  <Step title="Create a theme">
    Run `hs create website-theme my-website-theme` to create a `my-website-theme` directory populated with files from the [CMS theme boilerplate](https://github.com/HubSpot/cms-theme-boilerplate).

    <iframe className="aspect-video rounded-xl" src="https://play.hubspotvideo.com/v/53/id/172845081773" />
  </Step>

  <Step title="Upload your theme to HubSpot">
    Run `hs upload my-website-theme my-website-theme` to upload your new theme to a `my-website-theme` folder in your HubSpot account.

    Once this task has completed, you can view these files in the design manager of your HubSpot account. The design manager is an in-app code editor that displays the developer file system, and can be found by navigating to [Content > Design Manger](https://app.hubspot.com/l/design-manager/) in the left sidebar of your account.

    <iframe className="aspect-video rounded-xl" src="https://play.hubspotvideo.com/v/53/id/172854537757" />
  </Step>

  <Step title="Create a website page">
    To experience how content creators will use your templates and modules, create a website page using the theme you just uploaded.

    * In your HubSpot account, navigate to [Content > Website Pages](https://app.hubspot.com/l/website)
    * In the upper right, click **Create**, then select **Website page**.
    * In the dialog box, enter a **name** for your page, then click **Create page**.
    * On the next page, select the **my-website-theme** theme if it's not already selected. Then, hover over the **Homepage** template and click **Select template**.
    * You'll then be brought to the website page editor where you can explore all of the options that content creators will have when working with the template. Learn more about using the editor to build and customize pages on [HubSpot's Knowledge Base](https://knowledge.hubspot.com/website-and-landing-pages/create-and-customize-pages).
    * Click the **Settings** tab in the editor, then select **General**. Enter a **Page title**, then set a **Content slug** to finalize the page's URL. Then, close out the dialog box by clicking **X** or pressing the **Escape key**.
    * In the upper right, click **Publish** to take your page live.

          <iframe className="aspect-video rounded-xl" src="https://play.hubspotvideo.com/v/53/id/172854544538" />
  </Step>

  <Step title="Edit a CSS file">
    Run `hs watch my-website-theme my-website-theme`. While `watch` is running, every time you save a file, it’ll be automatically uploaded. Open your theme's `/css/components/_footer.css` file in your editor, make a change (such as updating the `.footer__copyright` selector to have `color: red;`), and save your changes. Your terminal will show that the saved file has been uploaded.

    Reload your published page to see the CSS change reflected on your website.
  </Step>
</Steps>

## What's next?

You're encouraged to continue to explore and experiment with the boilerplate theme and the page-building experience. The sandbox account you created is yours to play around in and experiment with.

You can checkout [HubSpot's Inspire gallery](https://inspire.hubspot.com/) to see websites, landing pages, and web apps built on HubSpot.

You might also want to check out the following documentation:

* [CMS developer tutorials](/cms/start-building/introduction/overview)
* [HubSpot CMS overview](/cms/start-building/introduction/overview)

## Join the HubSpot CMS developer community

Learning is easier when you can learn from those who came before you.

HubSpot is driven by its [Culture Code](https://blog.hubspot.com/blog/tabid/6307/bid/34234/the-hubspot-culture-code-creating-a-company-we-love.aspx), embodied by the attributes in HEART: **H**umble, **E**mpathetic, **A**daptable, **R**emarkable, and **T**ransparent. This culture extends to our ever-growing developer community, with thousands of brilliant and helpful developers around the world.

### Developer Slack community

Join the [Developer Slack](https://developers.hubspot.com/community/slack) to collaborate with 9,000+ developers and members of the HubSpot product team.

### Developer forums

Ask questions, learn from fellow developers, and submit ideas in the [CMS developer forums](https://community.hubspot.com/t5/CMS-Development/bd-p/designers_support).