What method can be used to host JavaScript or CSS files on Google Drive for Webflow sites?

Published on
September 22, 2023

To host JavaScript or CSS files on Google Drive for Webflow sites, you can follow these steps:

  1. Upload the JavaScript or CSS files to your Google Drive: Sign in to your Google account and go to Google Drive. Create a new folder (if required) to organize your files and click on the "New" button to upload your JavaScript or CSS files into the folder.

  2. Share the files publicly: Right-click on the uploaded file, go to "Share", and click on "Get link." In the sharing settings, choose "Anyone with the link" and set the access level to "Viewer." Copy the file's public link.

  3. Modify the file's link: Replace the original link with the modified link. Use the following pattern for the modified link:

    Replace open?id= in the original link with uc?export=download&id=

    Add /preview at the end of the modified link

    For example, if the original link is https://drive.google.com/open?id=1234567890, the modified link will be https://drive.google.com/uc?export=download&id=1234567890/preview.

  4. Add the modified file link to your Webflow project: In your Webflow project, go to the project settings and navigate to the "Custom Code" section. In this area, you can add custom code to the head, before the body tag, or before the closing body tag.

  5. Insert the modified file link within the appropriate HTML tag: Depending on whether you're hosting JavaScript or CSS files, you need to insert the modified file link within the appropriate HTML tags. For JavaScript, wrap the link with <script></script> tags, and for CSS, wrap the link with <style></style> tags.

  6. Apply the custom code to relevant pages: Lastly, you need to specify on which pages you want to include the hosted JavaScript or CSS files. This can be done by adding the custom code either site-wide or to specific pages.

By following these steps, you will be able to host your JavaScript or CSS files on Google Drive for your Webflow sites.

Additional Questions:

  1. How do I add a JavaScript file to my Webflow site?
  2. Can I host my CSS files on a different server for my Webflow site?
  3. How do I include external CSS or JavaScript libraries in Webflow?