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

**URL:** <https://community.hubspot.com/t/where-should-i-write-custom-javascript-or-css-files-for-my-cos-pages/342>\
**Category:** CMS Development\
**Tags:** css, javascript, design\
**Created:** [October 19, 2016, 12:37pm UTC](https://community.hubspot.com/t/where-should-i-write-custom-javascript-or-css-files-for-my-cos-pages/342 "2016-10-19T12:37:56Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![hannah](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/hannah/32/13091_2.png) [@hannah](https://community.hubspot.com/u/hannah)\
**Post date:** [October 19, 2016, 12:37pm UTC](https://community.hubspot.com/t/where-should-i-write-custom-javascript-or-css-files-for-my-cos-pages/342/1 "2016-10-19T12:37:56Z")

</div>

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

- Navigate to

- Click

 ![new-template-code-editor-create.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/4/41b7f7301000d67992eccc09d92a1f783421d1ae.png)

- 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-js-file-design-manager.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/6/d/6d3feaf06eefe7c977168070674c60d30b621ae2.png)

- When you are finished with your coding, click

- From the _Public URL_ window, click

 ![public-url-js-file.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/0/a/0a7803230c9f07334716ce3749729c17aa8a9068.png)

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

\<!-- 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

---

<div class="post-metadata">

**Author:** ![Gonzalo](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/gonzalo/32/106671_2.png) [@Gonzalo](https://community.hubspot.com/u/Gonzalo)\
**Post date:** [October 27, 2016, 7:44am UTC](https://community.hubspot.com/t/where-should-i-write-custom-javascript-or-css-files-for-my-cos-pages/342/2 "2016-10-27T07:44:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Jon\_McLaren](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jon_mclaren/32/8271_2.png) [@Jon\_McLaren](https://community.hubspot.com/u/Jon_McLaren)\
**Post date:** [February 7, 2019, 4:50pm UTC](https://community.hubspot.com/t/where-should-i-write-custom-javascript-or-css-files-for-my-cos-pages/342/3 "2019-02-07T16:50:41Z")

</div>

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