Using Static Assets on Your Pages
Last edit: May 21, 2024
This guide will help you use static assets (e.g. CSS, Javascript, or HTML files) on your pages.
Requirements
To follow the steps in this tutorial, you should be familiar with the required directory structure for your codebase, and understand the concepts of pages, layouts, and assets. You'll extend code samples from the previous tutorials.
- Directory Structure
- Pages
- Layouts
- Assets
- Reusing Code Across Multiple Pages (previous tutorial)
Steps
Note
Below steps are using Liquid filters, to learn about Liquid filters click here.
Using static assets on your pages is a four-step process:
Step 1: Create assets directory and subdirectories
If you are starting from scratch (without having created the codebase), create an assets directory inside app.
If you have already created the codebase, you can skip this step, and just locate your app/assets directory.
Create subdirectories for different assets inside the assets directory: for this tutorial, create scripts for storing Javascript files, and styles for storing CSS files.
Step 2: Create assets
Create a couple of assets.
Create a CSS file app.css in the styles directory:
body {
background-color: #ccc;
}
Create a Javascript file app.js in the scripts directory:
console.log("Hello from JS!");
Create an HTML file test.html in the assets directory:
Hello from test.html
Step 3: Check assets
Use {{ asset_url }} variable to check your assets. This will list the full URL of your assets on our content delivery network, including the time of the latest update (used for caching).
Example for this documentation site:
{"contentPages.a10.css":"https://uploads.platformos.dev/instances/85/assets/contentPages.a10.css?updated=1665412918","contentPages.a10.js":"https://uploads.platformos.dev/instances/85/assets/contentPages.a10.js?updated=1665412918","contentPages.9c3.css":"https://uploads.platformos.dev/instances/85/assets/contentPages.9c3.css?updated=1665474791","contentPages.9c3.js":"https://uploads.platformos.dev/instances/85/assets/contentPages.9c3.js?updated=1665474791","search.2dc.css":"https://uploads.platformos.dev/instances/85/assets/search.2dc.css?updated=1668443191","search.2dc.js":"https://uploads.platformos.dev/instances/85/assets/search.2dc.js?updated=1668443191","contentPages.ba7.css":"https://uploads.platformos.dev/instances/85/assets/contentPages.ba7.css?updated=1662013172","contentPages.ba7.js":"https://uploads.platformos.dev/instances/85/assets/contentPages.ba7.js?updated=1662013172","images/awards/2021/ISTC-a.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2021/ISTC-a.png?updated=1656597297","images/standards/ui/a":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/a?updated=1665411137","contentPages.7ae.css":"https://uploads.platformos.dev/instances/85/assets/contentPages.7ae.css?updated=1665649677","contentPages.7ae.js":"https://uploads.platformos.dev/instances/85/assets/contentPages.7ae.js?updated=1665649677","images/standards/ui/colorvariants/color_variant_variable_name.png":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/colorvariants/color_variant_variable_name.png?updated=1674674016","images/get-started/authorize.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/authorize.png?updated=1733223397","images/get-started/create-new-instance.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/create-new-instance.png?updated=1733223397","images/standards/ui/Figma_pOS_AMO.png":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/Figma_pOS_AMO.png?updated=1674674016","images/standards/ui/Figma_pOS_atomicProcess.png":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/Figma_pOS_atomicProcess.png?updated=1674674016","images/standards/ui/Figma_pOS_customizable.png":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/Figma_pOS_customizable.png?updated=1674674016","images/standards/ui/designkit/inputs.png":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/designkit/inputs.png?updated=1674674016","images/standards/ui/Figma_pOS_standards.png":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/Figma_pOS_standards.png?updated=1674674016","images/standards/ui/figma_app_screen.jpg":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/figma_app_screen.jpg?updated=1674674016","images/standards/ui/recolor.gif":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/recolor.gif?updated=1674674016","images/standards/ui/designkit/components.png":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/designkit/components.png?updated=1674674016","contentPages.640.css":"https://uploads.platformos.dev/instances/85/assets/contentPages.640.css?updated=1668104167","contentPages.640.js":"https://uploads.platformos.dev/instances/85/assets/contentPages.640.js?updated=1668104167","images/get-started/instance-url.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/instance-url.png?updated=1733223397","contentPages.d58.css":"https://uploads.platformos.dev/instances/85/assets/contentPages.d58.css?updated=1661287876","contentPages.d58.js":"https://uploads.platformos.dev/instances/85/assets/contentPages.d58.js?updated=1661287876","search.1b8.css":"https://uploads.platformos.dev/instances/85/assets/search.1b8.css?updated=1668104167","search.1b8.js":"https://uploads.platformos.dev/instances/85/assets/search.1b8.js?updated=1668104167","contentPages.7b3.css":"https://uploads.platformos.dev/instances/85/assets/contentPages.7b3.css?updated=1666267015","images/standards/ui/designkit/components_buttons.jpg":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/designkit/components_buttons.jpg?updated=1674674016","contentPages.7b3.js":"https://uploads.platformos.dev/instances/85/assets/contentPages.7b3.js?updated=1666267015","images/get-started/new-instance.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/new-instance.png?updated=1733223397","images/get-started/partner-portal-list.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/partner-portal-list.png?updated=1733223397","images/get-started/contact-us-tutorial/authorize.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/authorize.png?updated=1733223397","images/standards/ui/designkit/customization_guide.png":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/designkit/customization_guide.png?updated=1674674016","images/standards/ui/designkit/designkit_illustration.jpg":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/designkit/designkit_illustration.jpg?updated=1674674016","images/standards/ui/designkit/getting_started.png":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/designkit/getting_started.png?updated=1674674016","images/standards/ui/designkit/overview.png":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/designkit/overview.png?updated=1674674016","images/standards/ui/designkit/rules.png":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/designkit/rules.png?updated=1674674016","images/standards/ui/designkit/style_guide.png":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/designkit/style_guide.png?updated=1674674016","images/use-cases/svg-optimization/outline-text.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/svg-optimization/outline-text.jpg?updated=1733223397","images/standards/ui/features/button.gif":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/features/button.gif?updated=1674674016","images/standards/ui/features/flexible.gif":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/features/flexible.gif?updated=1674674016","images/standards/ui/features/mobile-layout.gif":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/features/mobile-layout.gif?updated=1674674016","images/standards/ui/features/mobile.png":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/features/mobile.png?updated=1674674016","images/standards/ui/features/spacing.gif":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/features/spacing.gif?updated=1674674016","images/standards/ui/features/swap.gif":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/features/swap.gif?updated=1674674016","images/best-practices/qa/test_results.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/qa/test_results.png?updated=1733223397","images/standards/ui/features/variants.png":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/features/variants.png?updated=1674674016","images/awards/2022/Best Accessible Devportal.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/Best Accessible Devportal.png?updated=1733223397","images/standards/ui/colorvariants/color_variant_description.png":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/colorvariants/color_variant_description.png?updated=1674674016","images/standards/ui/features/accessible.png":"https://uploads.platformos.dev/instances/85/assets/images/standards/ui/features/accessible.png?updated=1674674016","images/get-started/contact-us-tutorial/invalid_error_log.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/invalid_error_log.png?updated=1733223397","images/best-practices/qa/smoke_testing.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/qa/smoke_testing.png?updated=1733223397","images/developer-guide/dns/wildcard.png":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/dns/wildcard.png?updated=1733223397","images/use-cases/svg-optimization/multicursor-16.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/svg-optimization/multicursor-16.jpg?updated=1733223397","images/developer-guide/user-uploads/flowchart-images.svg":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/user-uploads/flowchart-images.svg?updated=1733223397","images/awards/2022/dpa_best_devportal_beyond_rest.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/dpa_best_devportal_beyond_rest.png?updated=1733223397","images/get-started/contact-us-tutorial/contactus_first.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/contactus_first.png?updated=1733223397","images/get-started/contact-us-tutorial/contactus_test_context_param_contect.gif":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/contactus_test_context_param_contect.gif?updated=1733223397","images/svg/sections/code-kit.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/code-kit.svg?updated=1733223397","images/use-cases/social-media-cards/before.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/social-media-cards/before.jpg?updated=1733223397","images/use-cases/svg-optimization/figma-design.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/svg-optimization/figma-design.jpg?updated=1733223397","images/awards/2022/dpa_best_new_dx_innovation.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/dpa_best_new_dx_innovation.png?updated=1733223397","images/developer-guide/pos-marketplace-template/pmt_commands.png":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/pos-marketplace-template/pmt_commands.png?updated=1733223397","images/developer-guide/user-uploads/flowchart-attachments.svg":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/user-uploads/flowchart-attachments.svg?updated=1733223397","images/get-started/contact-us-tutorial/contact-table-columns.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/contact-table-columns.png?updated=1733223397","images/get-started/database-gui.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/database-gui.png?updated=1733223397","images/get-started/restore-record.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/restore-record.png?updated=1733223397","images/get-started/show-deleted-records.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/show-deleted-records.png?updated=1733223397","images/get-started/contact-us-tutorial/contact_us_rerender.gif":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/contact_us_rerender.gif?updated=1733223397","images/best-practices/gdpr/unsubscribe.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/gdpr/unsubscribe.png?updated=1733223397","images/developer-guide/dns/legacy-dns-page.png":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/dns/legacy-dns-page.png?updated=1733223397","images/developer-guide/dns/specific-subdomain.png":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/dns/specific-subdomain.png?updated=1733223397","images/developer-guide/pos-cli-workflow/final-result.svg":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/pos-cli-workflow/final-result.svg?updated=1733223397","images/get-started/contact-us-tutorial/contact_us_test1.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/contact_us_test1.png?updated=1733223397","images/get-started/contact-us-tutorial/record-in-the-database.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/record-in-the-database.png?updated=1733223397","images/get-started/contact-us-tutorial/something-went-wrong.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/something-went-wrong.png?updated=1733223397","images/awards/2022/Best Small to Medium Enterprise DevPortal.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/Best Small to Medium Enterprise DevPortal.png?updated=1733223397","images/awards/2022/DPA22_bestaccessible_quote.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/DPA22_bestaccessible_quote.png?updated=1733223397","images/awards/2022/DPA22_beyondrest_quote.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/DPA22_beyondrest_quote.png?updated=1733223397","images/svg/sections/best-practices.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/best-practices.svg?updated=1733223397","images/svg/sections/design-kit.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/design-kit.svg?updated=1733223397","images/kits/ui/designkit/inputs.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/designkit/inputs.png?updated=1733223397","images/awards/2022/Best DevPortal beyond REST Platforms.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/Best DevPortal beyond REST Platforms.png?updated=1733223397","images/get-started/contact-us-tutorial/contactus_first_test_message.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/contactus_first_test_message.png?updated=1733223397","images/get-started/contact-us-tutorial/contact_us_parameters.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/contact_us_parameters.png?updated=1733223397","images/get-started/contact-us-tutorial/contact_us_prefill.gif":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/contact_us_prefill.gif?updated=1733223397","images/get-started/contact-us-tutorial/contactus_invalid_graphql.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/contactus_invalid_graphql.png?updated=1733223397","images/get-started/contact-us-tutorial/contactus_rendered_invalid.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/contactus_rendered_invalid.png?updated=1733223397","images/graphiql/main-window.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/main-window.png?updated=1733223397","images/get-started/contact-us-tutorial/events_listed.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/events_listed.png?updated=1733223397","images/get-started/contact-us-tutorial/events_ui.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/events_ui.png?updated=1733223397","images/get-started/contact-us-tutorial/invalid_email.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/invalid_email.png?updated=1733223397","images/awards/2022/Best New DX Innovation.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/Best New DX Innovation.png?updated=1733223397","images/get-started/todo/gui_graphiql_delete.jpg":"https://uploads.platformos.dev/instances/85/assets/images/get-started/todo/gui_graphiql_delete.jpg?updated=1733223397","images/get-started/todo/gui_graphiql_mutation.jpg":"https://uploads.platformos.dev/instances/85/assets/images/get-started/todo/gui_graphiql_mutation.jpg?updated=1733223397","images/get-started/todo/gui_graphiql_query.jpg":"https://uploads.platformos.dev/instances/85/assets/images/get-started/todo/gui_graphiql_query.jpg?updated=1733223397","images/get-started/contact-us-tutorial/localhost_logs.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/localhost_logs.png?updated=1733223397","images/get-started/contact-us-tutorial/log_email_sent.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/log_email_sent.png?updated=1733223397","images/get-started/contact-us-tutorial/log_liquid_error.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/log_liquid_error.png?updated=1733223397","images/get-started/contact-us-tutorial/lsp_authenticity_token.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/lsp_authenticity_token.png?updated=1733223397","images/get-started/contact-us-tutorial/lsp_contact_never_used.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/lsp_contact_never_used.png?updated=1733223397","images/get-started/contact-us-tutorial/lsp_open_path.gif":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/lsp_open_path.gif?updated=1733223397","images/get-started/contact-us-tutorial/using-graphql-explorer.gif":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/using-graphql-explorer.gif?updated=1733223397","images/use-cases/nodejs-debug-logging/after.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/nodejs-debug-logging/after.jpg?updated=1733223397","images/use-cases/social-media-cards/after.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/social-media-cards/after.jpg?updated=1733223397","images/get-started/contact-us-tutorial/create_new_instance.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/create_new_instance.png?updated=1733223397","images/get-started/contact-us-tutorial/database-empty.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/database-empty.png?updated=1733223397","images/get-started/contact-us-tutorial/events_no_consumers.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/events_no_consumers.png?updated=1733223397","images/get-started/contact-us-tutorial/graphiql-icon.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/graphiql-icon.png?updated=1733223397","images/get-started/contact-us-tutorial/graphiql-variables.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/graphiql-variables.png?updated=1733223397","images/get-started/contact-us-tutorial/graphql-explorer-create.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/graphql-explorer-create.png?updated=1733223397","images/get-started/contact-us-tutorial/graphql-explorer-response.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/graphql-explorer-response.png?updated=1733223397","images/get-started/todo/gui_records.jpg":"https://uploads.platformos.dev/instances/85/assets/images/get-started/todo/gui_records.jpg?updated=1733223397","images/get-started/todo/ui.jpg":"https://uploads.platformos.dev/instances/85/assets/images/get-started/todo/ui.jpg?updated=1733223397","images/kits/ui/features/flexible.gif":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/features/flexible.gif?updated=1733223397","images/kits/ui/features/mobile-layout.gif":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/features/mobile-layout.gif?updated=1733223397","images/get-started/contact-us-tutorial/new_instance_ready.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/new_instance_ready.png?updated=1733223397","images/get-started/contact-us-tutorial/parameters_another_val.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/parameters_another_val.png?updated=1733223397","images/get-started/contact-us-tutorial/use_env_add.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/use_env_add.png?updated=1733223397","images/get-started/contact-us-tutorial/valid_email.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/valid_email.png?updated=1733223397","images/get-started/contact-us-tutorial/contactus_test_first.gif":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/contactus_test_first.gif?updated=1733223397","images/get-started/contact-us-tutorial/contactus_thanks_database.gif":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/contactus_thanks_database.gif?updated=1733223397","images/get-started/contact-us-tutorial/log_notify_submitted.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/log_notify_submitted.png?updated=1733223397","images/get-started/contact-us-tutorial/logs_cli.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/logs_cli.png?updated=1733223397","images/get-started/contact-us-tutorial/valid_email_log.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/valid_email_log.png?updated=1733223397","images/get-started/contact-us-tutorial/valid_log.gif":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/valid_log.gif?updated=1733223397","images/kits/ui/Figma_pOS_AMO.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/Figma_pOS_AMO.png?updated=1733223397","images/kits/ui/Figma_pOS_atomicProcess.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/Figma_pOS_atomicProcess.png?updated=1733223397","images/kits/ui/Figma_pOS_standards.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/Figma_pOS_standards.png?updated=1733223397","images/svg/sections/dev-kit.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/dev-kit.svg?updated=1733223397","images/svg/sections/developer-guide.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/developer-guide.svg?updated=1733223397","images/svg/sections/get-started.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/get-started.svg?updated=1733223397","images/svg/sections/use-cases.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/use-cases.svg?updated=1733223397","images/awards/workflow.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/workflow.png?updated=1733223397","images/contributor-guide/feedback_block.png":"https://uploads.platformos.dev/instances/85/assets/images/contributor-guide/feedback_block.png?updated=1733223397","images/get-started/Marketplace_MVP.jpg":"https://uploads.platformos.dev/instances/85/assets/images/get-started/Marketplace_MVP.jpg?updated=1733223397","images/graphiql/history.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/history.png?updated=1733223397","images/graphiql/multiple-queries.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/multiple-queries.png?updated=1733223397","images/graphiql/variables.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/variables.png?updated=1733223397","images/meet-us/marketplace_risk_conference.png":"https://uploads.platformos.dev/instances/85/assets/images/meet-us/marketplace_risk_conference.png?updated=1733223397","images/svg/callout-bg.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/callout-bg.svg?updated=1733223397","images/svg/header-bg.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/header-bg.svg?updated=1733223397","images/svg/search-bg.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/search-bg.svg?updated=1733223397","images/user-research/PP-DesignStyle.png":"https://uploads.platformos.dev/instances/85/assets/images/user-research/PP-DesignStyle.png?updated=1733223397","images/awards/2022/DPA22_bestDX_quote.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/DPA22_bestDX_quote.png?updated=1733223397","images/awards/2022/DevRel_Awards_2022-Winner_badge.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/DevRel_Awards_2022-Winner_badge.png?updated=1733223397","362.8eb.js":"https://uploads.platformos.dev/instances/85/assets/362.8eb.js?updated=1727179741","781.026.js":"https://uploads.platformos.dev/instances/85/assets/781.026.js?updated=1727179741","app.css":"https://uploads.platformos.dev/instances/85/assets/app.css?updated=1733223408","app.js":"https://uploads.platformos.dev/instances/85/assets/app.js?updated=1733223408","graphql.js":"https://uploads.platformos.dev/instances/85/assets/graphql.js?updated=1733223408","search.a0c.css":"https://uploads.platformos.dev/instances/85/assets/search.a0c.css?updated=1727179741","search.a0c.js":"https://uploads.platformos.dev/instances/85/assets/search.a0c.js?updated=1727179741","fonts/Gotham-Book.woff2":"https://uploads.platformos.dev/instances/85/assets/fonts/Gotham-Book.woff2?updated=1733223397","fonts/Gotham-Medium.woff2":"https://uploads.platformos.dev/instances/85/assets/fonts/Gotham-Medium.woff2?updated=1733223397","images/favicon-192x192.png":"https://uploads.platformos.dev/instances/85/assets/images/favicon-192x192.png?updated=1733223397","images/workflow/development_workflow.png":"https://uploads.platformos.dev/instances/85/assets/images/workflow/development_workflow.png?updated=1733223397","images/awards/2021/Best Developer Portal for alternatives to REST-APIs.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2021/Best Developer Portal for alternatives to REST-APIs.png?updated=1733223397","images/awards/2021/Best Editorial Experience.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2021/Best Editorial Experience.png?updated=1733223397","images/awards/2021/Best Onboarding Award.svg":"https://uploads.platformos.dev/instances/85/assets/images/awards/2021/Best Onboarding Award.svg?updated=1733223397","images/get-started/todo/email_basic.jpg":"https://uploads.platformos.dev/instances/85/assets/images/get-started/todo/email_basic.jpg?updated=1733223397","images/get-started/contact-us-tutorial/contact_form_post_endpoint.gif":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/contact_form_post_endpoint.gif?updated=1733223397","images/get-started/contact-us-tutorial/contact_us_display_error.gif":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/contact_us_display_error.gif?updated=1733223397","images/get-started/contact-us-tutorial/contact_us_example_data.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/contact_us_example_data.png?updated=1733223397","images/get-started/contact-us-tutorial/database_contact.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/database_contact.png?updated=1733223397","images/get-started/contact-us-tutorial/events_consumer.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/events_consumer.png?updated=1733223397","images/get-started/contact-us-tutorial/fill_form_no_render.gif":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/fill_form_no_render.gif?updated=1733223397","images/get-started/contact-us-tutorial/function_lsp_help.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/function_lsp_help.png?updated=1733223397","images/get-started/contact-us-tutorial/function_tag_lsp.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/function_tag_lsp.png?updated=1733223397","images/get-started/contact-us-tutorial/new_instance_details.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/new_instance_details.png?updated=1733223397","images/get-started/contact-us-tutorial/test_message_context.params.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/test_message_context.params.png?updated=1733223397","images/kits/ui/Figma_pOS_customizable.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/Figma_pOS_customizable.png?updated=1733223397","images/kits/ui/figma_app_screen.jpg":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/figma_app_screen.jpg?updated=1733223397","images/use-cases/recording-terminal/hello.svg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/recording-terminal/hello.svg?updated=1733223397","images/use-cases/recording-terminal/pos-cli.svg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/recording-terminal/pos-cli.svg?updated=1733223397","images/awards/2022/Best_SME_DevPortal.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/Best_SME_DevPortal.png?updated=1733223397","images/use-cases/svg-optimization/size-comparison.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/svg-optimization/size-comparison.jpg?updated=1733223397","images/kits/ui/designkit/components.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/designkit/components.png?updated=1733223397","images/kits/ui/designkit/components_buttons.jpg":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/designkit/components_buttons.jpg?updated=1733223397","images/kits/ui/designkit/customization_guide.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/designkit/customization_guide.png?updated=1733223397","images/svg/sections/how-platformos-works.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/how-platformos-works.svg?updated=1733223397","images/svg/sections/pos-kits.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/pos-kits.svg?updated=1733223397","images/svg/sections/sections-sprite.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/sections-sprite.svg?updated=1733223397","images/use-cases/nodejs-debug-logging/before.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/nodejs-debug-logging/before.jpg?updated=1733223397","images/kits/ui/designkit/designkit_illustration.jpg":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/designkit/designkit_illustration.jpg?updated=1733223397","images/kits/ui/features/button.gif":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/features/button.gif?updated=1733223397","images/kits/ui/recolor.gif":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/recolor.gif?updated=1733223397","images/use-cases/svg-optimization/svg-preview.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/svg-optimization/svg-preview.jpg?updated=1733223397","images/use-cases/svg-optimization/xml-error.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/svg-optimization/xml-error.jpg?updated=1733223397","images/best-practices/performance/embedding-youtube/thumbnail.jpg":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/performance/embedding-youtube/thumbnail.jpg?updated=1733223397","images/best-practices/performance/fragment-lazy-loading/lazy-external-timeline.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/performance/fragment-lazy-loading/lazy-external-timeline.png?updated=1733223397","images/best-practices/performance/fragment-lazy-loading/lazy-inline-timeline.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/performance/fragment-lazy-loading/lazy-inline-timeline.png?updated=1733223397","images/best-practices/performance/fragment-lazy-loading/lazy-loading-filmstrip.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/performance/fragment-lazy-loading/lazy-loading-filmstrip.png?updated=1733223397","images/best-practices/performance/fragment-lazy-loading/slow-timeline.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/performance/fragment-lazy-loading/slow-timeline.png?updated=1733223397","images/developer-guide/records/building-contact-form-with-records/contact-table.png":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/records/building-contact-form-with-records/contact-table.png?updated=1733223397","201.e9e.js":"https://uploads.platformos.dev/instances/85/assets/201.e9e.js?updated=1733223408","668.0ab.js":"https://uploads.platformos.dev/instances/85/assets/668.0ab.js?updated=1733223408","73.aa3.js":"https://uploads.platformos.dev/instances/85/assets/73.aa3.js?updated=1733223408","search.568.css":"https://uploads.platformos.dev/instances/85/assets/search.568.css?updated=1733223408","search.568.js":"https://uploads.platformos.dev/instances/85/assets/search.568.js?updated=1733223408","images/awards/2021/DPA21_alternativestorestAPIs_quote.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2021/DPA21_alternativestorestAPIs_quote.png?updated=1733223397","images/awards/2021/DPA21_besteditorial_quote.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2021/DPA21_besteditorial_quote.png?updated=1733223397","images/awards/2021/DPA21_bestonboarding_quote.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2021/DPA21_bestonboarding_quote.png?updated=1733223397","images/awards/2021/ISTC.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2021/ISTC.png?updated=1733223397","images/favicon-32x32.png":"https://uploads.platformos.dev/instances/85/assets/images/favicon-32x32.png?updated=1733223397","images/favicon-96x96.png":"https://uploads.platformos.dev/instances/85/assets/images/favicon-96x96.png?updated=1733223397","images/pos-logo-2to1.png":"https://uploads.platformos.dev/instances/85/assets/images/pos-logo-2to1.png?updated=1733223397","images/pos-logo-dark.png":"https://uploads.platformos.dev/instances/85/assets/images/pos-logo-dark.png?updated=1733223397","images/pos-logo.png":"https://uploads.platformos.dev/instances/85/assets/images/pos-logo.png?updated=1733223397","images/awards/UKTC2019_quote.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/UKTC2019_quote.png?updated=1733223397","images/awards/cicd.jpeg":"https://uploads.platformos.dev/instances/85/assets/images/awards/cicd.jpeg?updated=1733223397","images/awards/styleguide.jpeg":"https://uploads.platformos.dev/instances/85/assets/images/awards/styleguide.jpeg?updated=1733223397","images/awards/template.jpeg":"https://uploads.platformos.dev/instances/85/assets/images/awards/template.jpeg?updated=1733223397","images/awards/tests.jpeg":"https://uploads.platformos.dev/instances/85/assets/images/awards/tests.jpeg?updated=1733223397","images/awards/uktc_ceremony.jpg":"https://uploads.platformos.dev/instances/85/assets/images/awards/uktc_ceremony.jpg?updated=1733223397","images/best-practices/lighthouse/slack-notification.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/lighthouse/slack-notification.png?updated=1733223397","images/best-practices/qa/executed_suit.jpg":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/qa/executed_suit.jpg?updated=1733223397","images/best-practices/qa/executed_tests.jpg":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/qa/executed_tests.jpg?updated=1733223397","images/get-started/database-ui.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/database-ui.png?updated=1733223397","images/get-started/graphiql.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/graphiql.png?updated=1733223397","images/graphiql/autocomplete.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/autocomplete.png?updated=1733223397","images/graphiql/comments.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/comments.png?updated=1733223397","images/graphiql/docs.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/docs.png?updated=1733223397","images/best-practices/qa/list_browsers.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/qa/list_browsers.png?updated=1733223397","images/best-practices/qa/qrcode.jpg":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/qa/qrcode.jpg?updated=1733223397","images/best-practices/qa/sanity_tests.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/qa/sanity_tests.png?updated=1733223397","images/graphiql/explorer-add-new.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/explorer-add-new.png?updated=1733223397","images/best-practices/gdpr/join_newsletter.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/gdpr/join_newsletter.png?updated=1733223397","images/best-practices/gdpr/thankyou_page.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/gdpr/thankyou_page.png?updated=1733223397","images/svg/logo.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/logo.svg?updated=1733223397","images/developer-guide/dns/ownership-verification.png":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/dns/ownership-verification.png?updated=1733223397","images/developer-guide/dns/reparking-ns.png":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/dns/reparking-ns.png?updated=1733223397","images/get-started/contact-us-tutorial/authorize.gif":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/authorize.gif?updated=1733223397","images/developer-guide/records/building-contact-form-with-records/create-contact.png":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/records/building-contact-form-with-records/create-contact.png?updated=1733223397","images/kits/ui/colorvariants/color_variant_description.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/colorvariants/color_variant_description.png?updated=1733223397","images/kits/ui/colorvariants/color_variant_variable_name.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/colorvariants/color_variant_variable_name.png?updated=1733223397","images/get-started/contact-us-tutorial/parameters_arr.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/parameters_arr.png?updated=1733223397","images/get-started/contact-us-tutorial/parameters_array.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/parameters_array.png?updated=1733223397","images/get-started/contact-us-tutorial/parameters_hash.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/parameters_hash.png?updated=1733223397","images/get-started/contact-us-tutorial/parameters_hello.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/parameters_hello.png?updated=1733223397","images/get-started/contact-us-tutorial/parameters_hello_hi.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/parameters_hello_hi.png?updated=1733223397","images/get-started/contact-us-tutorial/test_graphql_mutation.gif":"https://uploads.platformos.dev/instances/85/assets/images/get-started/contact-us-tutorial/test_graphql_mutation.gif?updated=1733223397","images/kits/ui/designkit/getting_started.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/designkit/getting_started.png?updated=1733223397","images/kits/ui/designkit/overview.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/designkit/overview.png?updated=1733223397","images/kits/ui/designkit/rules.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/designkit/rules.png?updated=1733223397","images/kits/ui/designkit/style_guide.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/designkit/style_guide.png?updated=1733223397","images/kits/ui/features/accessible.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/features/accessible.png?updated=1733223397","images/best-practices/qa/devops.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/qa/devops.png?updated=1733223397","images/awards/2022/dpa_best_accessible_devportal.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2022/dpa_best_accessible_devportal.png?updated=1733223397","images/graphiql/explorer.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/explorer.png?updated=1733223397","images/svg/sections/api-reference.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/api-reference.svg?updated=1733223397","252.879.js":"https://uploads.platformos.dev/instances/85/assets/252.879.js?updated=1727179741","images/best-practices/performance/fragment-lazy-loading/slow-filmstrip.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/performance/fragment-lazy-loading/slow-filmstrip.png?updated=1733223397","images/kits/ui/features/mobile.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/features/mobile.png?updated=1733223397","images/kits/ui/features/spacing.gif":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/features/spacing.gif?updated=1733223397","images/kits/ui/features/swap.gif":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/features/swap.gif?updated=1733223397","images/kits/ui/features/variants.png":"https://uploads.platformos.dev/instances/85/assets/images/kits/ui/features/variants.png?updated=1733223397","modules/graphql/code.css":"https://uploads.platformos.dev/instances/85/assets/modules/graphql/code.css?updated=1733223397","modules/graphql/filter-types.js":"https://uploads.platformos.dev/instances/85/assets/modules/graphql/filter-types.js?updated=1733223397","modules/graphql/graphql.css":"https://uploads.platformos.dev/instances/85/assets/modules/graphql/graphql.css?updated=1733223397","modules/graphql/graphql.js":"https://uploads.platformos.dev/instances/85/assets/modules/graphql/graphql.js?updated=1733223397","modules/graphql/line-link.js":"https://uploads.platformos.dev/instances/85/assets/modules/graphql/line-link.js?updated=1733223397","modules/graphql/images/header-bg.svg":"https://uploads.platformos.dev/instances/85/assets/modules/graphql/images/header-bg.svg?updated=1733223397"}
Step 4: Access assets
To access assets, use the asset_url filter in your liquid file, e.g. layout:
<html>
<head>
<link rel="stylesheet" href="{{ 'styles/app.css' | asset_url }}">
<script src="{{ 'scripts/app.js' | asset_url }}"></script>
</head>
<body>
<a href="{{ 'test.html' | asset_url }}">Test</a>
{{ content_for_layout }}
</body>
</html>
Sync or deploy. The background color of the page has changed to the color specified in the app.css file, and the link to test.html works. If you check the developer console, the Javascript is there.
Next steps
Congratulations! You have learned how to use static assets on your pages. Now you can learn about adding visuals to your pages using CSS or Javascript.