Site redesign / Custom theme

[lewisvrobinson]

Hi all!

I've been tasked with rebuilding an existing HubSpot site from scratch and I'm hoping to get some insight on the best way to approach it. This is my first time working with HubSpot, so forgive my ignorance.
I've downloaded the Vast 'starter theme' (I heard that it's a good idea to use it as a base – is there something else you'd recommend?) and setup my local HubL server.

Goals
Basically the aim is to rebuild the site based on the company's new styleguide/pattern library (which I'm also building). Ideally I'd like to build it in a way that gives the marketing team the ability to quickly build out pages with these components (using Design Manager?) and limit any custom code that needs to be written.

Modules
I'm thinking that Custom Modules would be the best way to achieve this. From what I can tell the only way to create one is in JSON, meaning the majority of the markup would be in an string. Is an alternative approach that I haven't thought of?
I've also seen code like {% linked_image "wizard_module_132975146821281301859956560278824833351" ...%} throughout the codebase. What is the wizard_module_... used for?

Hubspot Grid
From my understanding the COS/design manager uses a version of the Bootstrap v2 grid for layout. If I remove the markup associated with it from the templates, does this break the COS? Should I instead override the selectors?

Staging

Is it possible to create a staging domain/subdomain where I can begin safely uploading the new theme/templates for testing without affecting the live site?

If anyone could point me in the right direction with any of this, or even just some advice for a newby building on the platform, it would be_really_ appreciated.

Thanks!
Lewis

[AJLaPorte_diagr]

Hey @lewisvrobinson,

I'll try to address these a best I can for you as there is a lot of ways you can go about accomplishing this. 

I've downloaded the Vast 'starter theme' (I heard that it's a good idea to use it as a base – is there something else you'd recommend?)

You can use the VAST theme as a starter if you want or you can completely roll your own. HubSpot provides resources by default for some minimal styling for their base modules and grid system (more info here: https://designers.hubspot.com/docs/cos/included-cos-files).  

Ideally, I'd like to build it in a way that gives the marketing team the ability to quickly build out pages with these components (using Design Manager?) and limit any custom code that needs to be written.

Those users who will be building the pages will be doing so in the page editor. This means the users building the pages won't need to actually use the design manager to do so.  If you are looking to give people the ability to add modules to their pages on the fly, you would want to make use of the Flexible Column module in your templates. This would give the page editors the ability to add different modules as they need. 

From what I can tell the only way to create one is in JSON, meaning the majority of the markup would be in an string. Is an alternative approach that I haven't thought of?

Custom modules don't have to use just JSON to be built. I would recommend signing the portal up for the Design Manager Beta (https://designers.hubspot.com/design-manager-beta) that is available. This Beta has huge upgrade from a custom module front and you will be able to build out some nice modules for your end users. 

I've also seen code like {% linked_image "wizard_module_132975146821281301859956560278824833351" ...%} throughout the codebase. What is the wizard_module_... used for?

What you are seeing is called HubL. HubSpot's system is built on JinJava templating (mixture of Jinja and Java) engine and has functions built into it. I would recommend you review the documents and sections available here:

https://designers.hubspot.com/docs/hubl/intro-to-hubl

This will help explain a lot of what you see in the Design Manager. 

From my understanding the COS/design manager uses a version of the Bootstrap v2 grid for layout. If I remove the markup associated with it from the templates, does this break the COS? Should I instead override the selectors?

This is something that is completely up to your preference. If you end up removing it, you will have to do a lot of extra CSS styling to make the grid work appropriately with the drag and drop templates and the page editor. I've seen people use the grid, but then also I've seen some people code their own templates using coded files and apply different grid systems to them. It's totally up to user developer preference (and clients - which is you) on how you build it out. The link above about the included files should help describe what the defaults do and that should in turn help you with your decision on which way to go for that. 

Is it possible to create a staging domain/subdomain where I can begin safely uploading the new theme/templates for testing without affecting the live site?

HubSpot does have built in content staging for your site: https://knowledge.hubspot.com/website-user-guide/how-to-redesign-and-relaunch-your-site-with-content...

This would have to be on the same domain. It's not possible at the moment to have a pure staging to dev environment without having two separate portals (and in essence two HubSpot Plans you would pay for). You can try and reach out to your HubSpot Rep/CAM and see if they can give you a free development portal if you wanted to do that. You would then need to copy your template from one portal to another (which can be done in the design manager) and manually copy/migrate the content over.

For what you are doing, the current HS content staging should be fine. 

Other Notes:

I'd also recommend taking a look at HubDB (if it's in your plan) as this is a great way to generate listings and other data-driven content. It's essentially a stripped down version of SQL (without relational databases) that you can then use HubL to make a call to and pull the information to display in a custom module.  

Hopefully, this helps points you in the right direction. If you have any additional questions, feel free to post here or reach out via Direct Message. 

-AJ LaPorte

[Jon_McLaren]

Everything AJ said is 100% correct.

I just want to add that many of us in the community have been building a framework for HubSpot development, similar to Bootstrap, Foundation, or Timber. The goal being to utilize HubSpot's unique features to make it easier for developers to build fast, high quality, accessible websites. While as of my posting the framework is not yet to a stable version 1.0 yet we're fast approaching it.

If you are interested in such a framework check out CrankShaft on GitHub.
Our documentation website is still getting up and rolling and will change URLs eventually but it's available at https://thewebtech.github.io/CrankShaft

[MFrankJohnson]

No one has mentioned here yet, so I'll be the odd man out.

Spending time getting the HubSpot CMS Developer certification will be well worth it.
- You'll be exposed to the HubSpot CMS basics and resources (e.g., Slack channel, dev resources, etc.) in an organized fashion.
- You'll get to meet some of the dev minds behind HubSpot.
- And, you'll get to flash your cool new CMS Developer badge (shown above on McLaren's post)

Bottom line?

The 3+ hour time investment will save you many hours in return. Guaranteed.

You'll find that free training at the following URL (replace HubID with your portal ID)

https://app.hubspot.com/learning-center/<HubID>/tracks/34

Hope that helps.

Welcome and good luck.

Best,
Frank

Chief HubSpot Consultant

---

MFrankJohnson.com | Perfect HubSpot Series | Connect on LinkedIn

Help find posts quickly ... accept this solution now.

[Jon_McLaren]

@MFrankJohnson is right the certification course definitely gets you up and running with all of the basics.

Heres the same link he provided - just you can click it to go to the lesson
https://app.hubspot.com/l/learning-center/tracks/34