Where should I write custom Javascript or CSS files for my COS pages?

[hannah]

To create a custom Javascript or CSS file in HubSpot, follow the instructions below:

• Navigate to

  Content

  >

  Design Manager

  .

• Click

  New Template

  > choose the

  Code Editor

  option > click

  Create

  .

• Give the new file a name that includes the appropriate extension file type (.js for scripts / .css for css files / .html for standard html files etc.), select a location, and click

  Save

  .

• When you are finished with your coding, click

  Actions

  >

  Get public URL

  to generate a HubL include that will be used to reference the file from your pages.

• From the Public URL window, click

  Copy

  > click

  OK

  .

• To include your file on all HubSpot hosted pages, navigate to

  Content

  >

  Content Settings

  >

  Site Footer HTML

  > paste the generated token as the value for the script tag’s source, as seen below:

<!-- start Main.js Do Not Remove -->

<script src=‘[generated token]’></script>

<!---End Main.js-->

So for our example in the screenshot above, this would be:

<!-- start Main.js Do Not Remove -->

<script src=‘{{ get_public_template_url(‘custom/page/Testing/new_script_file.js’) }}’></script>

<!---End Main.js-->

• Scroll down and click

  Save Changes

  to finish.

[Gonzalo]

I think that the cleanest way to manage the “general” styles and scripts for the most of the cases in a website (not for small css/js files that will only have one use for alanding page or something like that) is save them in the System folder.

On this way you can work with a better logic about use the same file for blog and pages (also error pages etc.). I think that this is the best practice to handle the basic/general files of your site.

Because following your logic you should fragment your file in more than one CSS/JS files inside each folder (blog|page…) and this isn’t the best because you are opening a lot of pipes to download the CSS.

So how I manage this is:

- If you are going to make a file to use for all website (or most of pages). Save it in the system folder.

- If you need a minor customization, block or a totally different appearance for a landing page, or diferent appearance of your principal site. Save it in the page/blog/email (where appropriate) folder.

[Jon_McLaren]

Gonzalo was straight on, just wanted to update his answer.
Now when custom modules need specific css or JS it should be done in the custom module itself OR if that css or JS might be shared with other modules or templates, make it it’s own file and link the file to the module. This prevents repeating your code.
Also now the actual file locations for the css due to the new design manager, you can place it in a place that makes logical sense to you now.

I usually have a folder for css, js, custom modules, templates, partials