What's your Hubspot / COS / Blog workflow?

developertools

#1

I’m looking to improve my process for building, maintaining, and updating website pages when using Hubspot. A few questions:

  1. Do you normally do everything in code or do you try to integate with design templates, modules, etc.
  2. Do you use SCSS/SASS or do any kind of preprocessing?
  3. Do you include Git / Github in your workflow?
  4. How often do you switch between your local code editor and the COS editor? What do you do where?

My process currently looks like this:

  • Pull latest changes directly from the content > templates > custom folder via FTP
  • Open project and run local Hubl server
  • Open Codekit (app) to compile SCSS to CSS and organize dev files
  • Add / Edit / Make Updates
  • Preview locally on Hubl server
  • Sync local and remote folders using Transmit (FTP Client)

#2

Hey Andrey.

Quite new to Hubspot CMS (Just a few months experience working in it).
But this is what I come up with so far to try to optimise development.

Basic Node/Gulp framework to keep watch my js/scss files and then push it to the FTP.

Currently I work local code editor + COS editor (to create my modules/templates and add a few classes to tweak what’s needed, but I try to avoid this last one as much as possible).

I usually end up with one bundle.css & one bundle.js which is referenced globally and the whole website is based on it.

My local project is stored on GIT.
Current local editor is VS Code.
Scripts using JQuery/Javascript… but typescript or any other script framework could be added here, just need to generate the final js to be referenced in the templates.
Styling is all SCSS, but Stylus/LESS can also be implemented… just a mater of updating the gulp packages.

But I’m interest in learning more around how you run your local Hubl server and push that to the server.
I’ve tried that as my first option, but then found out that I’d have to recreate all my modules in Hubspot so I ended up giving up on using this.


#3

Awesome. Thanks for all the detail and code. At first glance that appears to be a similar setup with Gulp handling all the stuff that Codekit does. I’m definitely going to try to setup a project using your example and see how that feels. I’m familiar with gulp.

Edit:
At second glance, the setups are completely different. :slight_smile:

Do you only work with the JS and CSS files you mentioned? You never edit HTML template content? What I do is sync the entire “custom” folder which includes coded template files, new JS files, new HTML files, etc.

It sounds like your approach might be ideal if I want to maintain the visual design template COS tools. I’m forced to use coded files only.

Thanks again for sharing. I previously thought that this was the only way I could do it but I really want to try different setups.

I haven’t had a chance to dig into syncing of modules yet but it looks like anything outside of “Coded Files” would not sync. I guess when I start to use modules more I’ll have to either work primarily in the COS or keep 2 copies like you suggested.

Has anyone figured out a better way to handle that? I need to research this more. It looks like the best strategy (or maybe just a recently popular one) is to break down as much of a site into re-usable modules as possible and then plug and play.


#4

I see, yeah it seems codekit does pretty much the same job as gulp.

But yeah I only work with JS/CSS.
All templates are create in the COS tools as we want clients to be able to update their templates and for us to reuse modules in other portals. Basically our templates are based on custom modules/ global groups that can be reused.
This dev framework I’m working with was just the best way I could find, so far, to dev this way.

I’ve been trying to look for a better/more flexible way to develop in the platform, but couldn’t find anything that wouldn’t make this to hard coded and not user friendly, as my goal is to deliver the websites in a way that the users will be able to maintain it by themselves (on the basic level) and no dev would need to come in and do trivial things.


#5

Thanks for sharing this, @rafaelmarins! I’m looking for a way to use SASS while keeping the templates maintainable by non-developers. Your gulp setup looks like it may do the trick.


#6

Hey @matopher
That’s awesome.
I’ve had to use this project elsewhere, so I’ve made some updates to make things a bit easier & flexible to use in any other environment and also have a better error tracking.
I’ve just pushed it. Check it out and let me know if you need any help.