COS Tools

Table of contents
Close

Using Local HubL Server with FTP

Using a combination of the  Local HubL Server and FTP allows developers to develop their template and CSS files locally and sync them with their production HubSpot account.

General information

By default the config.yaml file of the local server (located in the 'conf' directory)  specifies the base template directory as work/hubthemes/vast.

Within this base template directory, the "custom" directory contains the stock HTML templates and stylesheets. This directory also mirrors that of production HubSpot account. The production "custom" folder is available at: portals/hubID/content/templates.

Within the subfolders of your local "custom" directory, you can edit and create HTML, CSS, or JS files and upload them to their corresponding folders via FTP.

While you can use a range of FTP clients to connect to HubSpot and develop a workflow that works for you or your team, this tutorial uses Transmit, an FTP client for OSX. Transmit has a great sync feature that allows you to easily sync a local directory with a remote one.

Install the the Local HubL Server

If you have not already set up the Local HubL Server, you will need to download and install the latest version of the Local HubL Server. For detailed instructions on the setup process, check out this article.

Edit or create templates or stylesheets in the local "custom" directory

Unzip the local-hubl-server package.

Within this base template directory ('local-hubl-server/work/hubthemes/vast'), the 'custom' directory contains the stock HTML templates and stylesheets. Within the subfolders, edit or create HTML or CSS files. You can also choose to modify the stock theme files that are included with the Local HubL Server.

local-server-path-1.png

Launch Transmit

Once the server is installed on your local machine, you are ready to connect to HubSpot via FTP. This tutorial uses Transmit as the FTP client.

To autheticate via FTP, enter:

  • Server: ftp.hubapi.com
  • HubSpot credentials
  • Port 3200
  • Select FTP with TLS/SSL

For more information about connecting to HubSpot via FTP, check out this article

Connect-Transmit.png

Locate the local "custom" folder in the local server directory

In the local pane of Transmit, navigate to the local "custom" folder.

local-server-path.png

Locate the HubSpot hosted "custom" folder

In the remote pane of Transmit, navigate to the "custom" folder. You will notice that the local directory mirrors the remote directory.

remote-path.png

Upload global groups

if you are working with templates, such as the Local HubL Server stock templates, that include global .html files, you will need to upload the global 'system/global' directory before syncing any of the other files.

Without these included .html files uploaded first, template files including these groups will fail to properly upload. If your template files do not include global groups you can skip this step.

From the local pane, open the system directory and drag the 'global' folder into the system folder in the remote pane.

upload-global.gif

Click sync

Navigate back to the local 'custom' directory. With both custom directories open in Transmit, click Sync.

transmit-sync.png

Adjust sync settings

Check to make sure that both custom directories are set to sync. Select File Size to determine if files have been modified.
sync-settings.png

Sync files

Click Synchronize. Any files that are not on your remote server that are on your local server will be synced to HubSpot. You will see a successful sync message and can view a report of synced files. 

successful-sync.png

View templates in Design Manager

Your synced files will be available in Design Manager, in the 'Coded Files > Custom' directory.

Custom-Design-Manager.png