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.
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.
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.
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.
Locate the local "custom" folder in the local server directory
In the local pane of Transmit, navigate to the local "custom" folder.
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.
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.
Navigate back to the local 'custom' directory. With both custom directories open in Transmit, click Sync.
Adjust sync settingsCheck to make sure that both custom directories are set to sync. Select File Size to determine if files have been modified.
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.
View templates in Design Manager
Your synced files will be available in Design Manager, in the 'Coded Files > Custom' directory.