Using Static Assets on Your Pages
Last edit: Jun 06, 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:
{"252.879.js":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/252.879.js?updated=1682684930","362.8eb.js":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/362.8eb.js?updated=1682684930","781.026.js":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/781.026.js?updated=1682684930","app.css":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/app.css?updated=1698235994","app.js":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/app.js?updated=1682684930","app.js.map":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/app.js.map?updated=1558952142","fonts/Gotham-Bold.woff2":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/fonts/Gotham-Bold.woff2?updated=1580390306","fonts/Gotham-Book.woff2":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/fonts/Gotham-Book.woff2?updated=1629197043","fonts/Gotham-Light.woff2":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/fonts/Gotham-Light.woff2?updated=1580390306","fonts/Gotham-Medium.woff2":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/fonts/Gotham-Medium.woff2?updated=1629197043","graphql.js":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/graphql.js?updated=1682684930","images/awards/2021/Best Developer Portal for alternatives to REST-APIs.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/awards/2021/Best Developer Portal for alternatives to REST-APIs.png?updated=1661282912","images/awards/2021/Best Editorial Experience.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/awards/2021/Best Editorial Experience.png?updated=1661282912","images/awards/2021/Best Onboarding Award.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/awards/2021/Best Onboarding Award.svg?updated=1661282912","images/awards/2021/DPA21_alternativestorestAPIs_quote.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/awards/2021/DPA21_alternativestorestAPIs_quote.png?updated=1701682073","images/awards/2021/DPA21_besteditorial_quote.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/awards/2021/DPA21_besteditorial_quote.png?updated=1701682073","images/awards/2021/DPA21_bestonboarding_quote.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/awards/2021/DPA21_bestonboarding_quote.png?updated=1701682073","images/awards/2021/ISTC.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/awards/2021/ISTC.png?updated=1661282912","images/awards/2022/Best Accessible Devportal.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/awards/2022/Best Accessible Devportal.png?updated=1701682073","images/awards/2022/Best DevPortal beyond REST Platforms.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/awards/2022/Best DevPortal beyond REST Platforms.png?updated=1701682073","images/awards/2022/Best New DX Innovation.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/awards/2022/Best New DX Innovation.png?updated=1701682073","images/awards/2022/Best Small to Medium Enterprise DevPortal.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/awards/2022/Best Small to Medium Enterprise DevPortal.png?updated=1701682073","images/awards/2022/Best_SME_DevPortal.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/awards/2022/Best_SME_DevPortal.png?updated=1701682073","images/awards/2022/DevRel_Awards_2022-Winner_badge.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/awards/2022/DevRel_Awards_2022-Winner_badge.png?updated=1661282912","images/awards/2022/DPA22_bestaccessible_quote.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/awards/2022/DPA22_bestaccessible_quote.png?updated=1701682073","images/awards/2022/DPA22_bestDX_quote.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/awards/2022/DPA22_bestDX_quote.png?updated=1701682073","images/awards/2022/DPA22_beyondrest_quote.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/awards/2022/DPA22_beyondrest_quote.png?updated=1701682073","images/awards/2022/dpa_best_accessible_devportal.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/awards/2022/dpa_best_accessible_devportal.png?updated=1701682073","images/awards/2022/dpa_best_devportal_beyond_rest.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/awards/2022/dpa_best_devportal_beyond_rest.png?updated=1701682073","images/awards/2022/dpa_best_new_dx_innovation.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/awards/2022/dpa_best_new_dx_innovation.png?updated=1701682073","images/awards/cicd.jpeg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/awards/cicd.jpeg?updated=1661282912","images/awards/styleguide.jpeg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/awards/styleguide.jpeg?updated=1661282912","images/awards/template.jpeg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/awards/template.jpeg?updated=1661282912","images/awards/tests.jpeg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/awards/tests.jpeg?updated=1661282912","images/awards/UKTC2019_quote.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/awards/UKTC2019_quote.png?updated=1701682073","images/awards/uktc_ceremony.jpg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/awards/uktc_ceremony.jpg?updated=1661282912","images/awards/workflow.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/awards/workflow.png?updated=1661282912","images/best-practices/gdpr/join_newsletter.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/best-practices/gdpr/join_newsletter.png?updated=1629197043","images/best-practices/gdpr/thankyou_page.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/best-practices/gdpr/thankyou_page.png?updated=1629197043","images/best-practices/gdpr/unsubscribe.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/best-practices/gdpr/unsubscribe.png?updated=1629197043","images/best-practices/lighthouse/slack-notification.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/best-practices/lighthouse/slack-notification.png?updated=1629197043","images/best-practices/performance/embedding-youtube/thumbnail.jpg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/best-practices/performance/embedding-youtube/thumbnail.jpg?updated=1629197043","images/best-practices/performance/fragment-lazy-loading/lazy-external-timeline.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/best-practices/performance/fragment-lazy-loading/lazy-external-timeline.png?updated=1629197043","images/best-practices/performance/fragment-lazy-loading/lazy-inline-timeline.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/best-practices/performance/fragment-lazy-loading/lazy-inline-timeline.png?updated=1629197043","images/best-practices/performance/fragment-lazy-loading/lazy-loading-filmstrip.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/best-practices/performance/fragment-lazy-loading/lazy-loading-filmstrip.png?updated=1629197043","images/best-practices/performance/fragment-lazy-loading/slow-filmstrip.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/best-practices/performance/fragment-lazy-loading/slow-filmstrip.png?updated=1629197043","images/best-practices/performance/fragment-lazy-loading/slow-timeline.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/best-practices/performance/fragment-lazy-loading/slow-timeline.png?updated=1629197043","images/best-practices/qa/devops.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/best-practices/qa/devops.png?updated=1629197043","images/best-practices/qa/executed_suit.jpg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/best-practices/qa/executed_suit.jpg?updated=1629197043","images/best-practices/qa/executed_suit.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/best-practices/qa/executed_suit.png?updated=1580390307","images/best-practices/qa/executed_tests.jpg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/best-practices/qa/executed_tests.jpg?updated=1629197043","images/best-practices/qa/executed_tests.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/best-practices/qa/executed_tests.png?updated=1580390307","images/best-practices/qa/graphiql.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/best-practices/qa/graphiql.png?updated=1580390307","images/best-practices/qa/list_browsers.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/best-practices/qa/list_browsers.png?updated=1629197043","images/best-practices/qa/qrcode.jpg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/best-practices/qa/qrcode.jpg?updated=1629197043","images/best-practices/qa/sanity_tests.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/best-practices/qa/sanity_tests.png?updated=1629197043","images/best-practices/qa/smoke_testing.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/best-practices/qa/smoke_testing.png?updated=1629197043","images/best-practices/qa/test_results.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/best-practices/qa/test_results.png?updated=1629197043","images/contributor-guide/feedback_block.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/contributor-guide/feedback_block.png?updated=1629197043","images/developer-guide/dns/legacy-dns-page.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/developer-guide/dns/legacy-dns-page.png?updated=1701682073","images/developer-guide/dns/ownership-verification.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/developer-guide/dns/ownership-verification.png?updated=1629197043","images/developer-guide/dns/reparking-ns.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/developer-guide/dns/reparking-ns.png?updated=1629197043","images/developer-guide/dns/specific-subdomain.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/developer-guide/dns/specific-subdomain.png?updated=1701682073","images/developer-guide/dns/wildcard.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/developer-guide/dns/wildcard.png?updated=1701682073","images/developer-guide/pos-cli-workflow/final-result.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/developer-guide/pos-cli-workflow/final-result.svg?updated=1629197043","images/developer-guide/pos-marketplace-template/pmt_commands.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/developer-guide/pos-marketplace-template/pmt_commands.png?updated=1629197043","images/developer-guide/records/building-contact-form-with-records/contact-table.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/developer-guide/records/building-contact-form-with-records/contact-table.png?updated=1716277311","images/developer-guide/records/building-contact-form-with-records/create-contact.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/developer-guide/records/building-contact-form-with-records/create-contact.png?updated=1716277311","images/developer-guide/user-uploads/flowchart-attachments.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/developer-guide/user-uploads/flowchart-attachments.svg?updated=1629197043","images/developer-guide/user-uploads/flowchart-images.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/developer-guide/user-uploads/flowchart-images.svg?updated=1629197043","images/favicon-192x192.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/favicon-192x192.png?updated=1629197043","images/favicon-32x32.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/favicon-32x32.png?updated=1629197043","images/favicon-96x96.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/favicon-96x96.png?updated=1629197043","images/favicon.ico":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/favicon.ico?updated=1558952143","images/get-started/database-ui.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/get-started/database-ui.png?updated=1716277311","images/get-started/graphiql.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/get-started/graphiql.png?updated=1629197043","images/get-started/Marketplace_MVP.jpg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/get-started/Marketplace_MVP.jpg?updated=1629197043","images/get-started/todo/email_basic.jpg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/get-started/todo/email_basic.jpg?updated=1701682073","images/get-started/todo/gui_graphiql_delete.jpg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/get-started/todo/gui_graphiql_delete.jpg?updated=1701942206","images/get-started/todo/gui_graphiql_mutation.jpg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/get-started/todo/gui_graphiql_mutation.jpg?updated=1701942206","images/get-started/todo/gui_graphiql_query.jpg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/get-started/todo/gui_graphiql_query.jpg?updated=1701942206","images/get-started/todo/gui_records.jpg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/get-started/todo/gui_records.jpg?updated=1701942206","images/get-started/todo/ui.jpg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/get-started/todo/ui.jpg?updated=1701682073","images/graphiql/autocomplete.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/graphiql/autocomplete.png?updated=1629197043","images/graphiql/comments.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/graphiql/comments.png?updated=1629197043","images/graphiql/docs.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/graphiql/docs.png?updated=1629197043","images/graphiql/explorer-add-new.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/graphiql/explorer-add-new.png?updated=1629197043","images/graphiql/explorer.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/graphiql/explorer.png?updated=1629197043","images/graphiql/history.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/graphiql/history.png?updated=1629197043","images/graphiql/main-window.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/graphiql/main-window.png?updated=1629197043","images/graphiql/multiple-queries.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/graphiql/multiple-queries.png?updated=1629197043","images/graphiql/variables.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/graphiql/variables.png?updated=1629197043","images/ISTC.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/ISTC.png?updated=1580390308","images/kits/ui/colorvariants/color_variant_description.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/kits/ui/colorvariants/color_variant_description.png?updated=1701682073","images/kits/ui/colorvariants/color_variant_variable_name.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/kits/ui/colorvariants/color_variant_variable_name.png?updated=1701682073","images/kits/ui/designkit/components_buttons.jpg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/kits/ui/designkit/components_buttons.jpg?updated=1701682073","images/kits/ui/designkit/components.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/kits/ui/designkit/components.png?updated=1701682073","images/kits/ui/designkit/customization_guide.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/kits/ui/designkit/customization_guide.png?updated=1701682073","images/kits/ui/designkit/designkit_illustration.jpg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/kits/ui/designkit/designkit_illustration.jpg?updated=1701682073","images/kits/ui/designkit/getting_started.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/kits/ui/designkit/getting_started.png?updated=1701682073","images/kits/ui/designkit/inputs.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/kits/ui/designkit/inputs.png?updated=1701682073","images/kits/ui/designkit/overview.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/kits/ui/designkit/overview.png?updated=1701682073","images/kits/ui/designkit/rules.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/kits/ui/designkit/rules.png?updated=1701682073","images/kits/ui/designkit/style_guide.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/kits/ui/designkit/style_guide.png?updated=1701682073","images/kits/ui/features/accessible.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/kits/ui/features/accessible.png?updated=1701682073","images/kits/ui/features/button.gif":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/kits/ui/features/button.gif?updated=1701682073","images/kits/ui/features/flexible.gif":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/kits/ui/features/flexible.gif?updated=1701682073","images/kits/ui/features/mobile-layout.gif":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/kits/ui/features/mobile-layout.gif?updated=1701682073","images/kits/ui/features/mobile.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/kits/ui/features/mobile.png?updated=1701682073","images/kits/ui/features/spacing.gif":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/kits/ui/features/spacing.gif?updated=1701682073","images/kits/ui/features/swap.gif":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/kits/ui/features/swap.gif?updated=1701682073","images/kits/ui/features/variants.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/kits/ui/features/variants.png?updated=1701682073","images/kits/ui/figma_app_screen.jpg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/kits/ui/figma_app_screen.jpg?updated=1701682073","images/kits/ui/Figma_pOS_AMO.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/kits/ui/Figma_pOS_AMO.png?updated=1701682073","images/kits/ui/Figma_pOS_atomicProcess.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/kits/ui/Figma_pOS_atomicProcess.png?updated=1701682073","images/kits/ui/Figma_pOS_customizable.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/kits/ui/Figma_pOS_customizable.png?updated=1701682073","images/kits/ui/Figma_pOS_standards.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/kits/ui/Figma_pOS_standards.png?updated=1701682073","images/kits/ui/recolor.gif":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/kits/ui/recolor.gif?updated=1701682073","images/meet-us/marketplace_risk_conference.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/meet-us/marketplace_risk_conference.png?updated=1661282912","images/pos-logo-2to1.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/pos-logo-2to1.png?updated=1629197043","images/pos-logo-dark.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/pos-logo-dark.png?updated=1629197043","images/pos-logo.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/pos-logo.png?updated=1629197043","images/sprite.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/sprite.png?updated=1558952143","images/svg/api.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/svg/api.svg?updated=1547770265","images/svg/background.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/svg/background.svg?updated=1580390306","images/svg/callout-bg.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/svg/callout-bg.svg?updated=1629197043","images/svg/github-logo.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/svg/github-logo.svg?updated=1558952143","images/svg/header-bg.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/svg/header-bg.svg?updated=1629197043","images/svg/help.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/svg/help.svg?updated=1547770265","images/svg/logo.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/svg/logo.svg?updated=1629197043","images/svg/open-book.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/svg/open-book.svg?updated=1558952143","images/svg/path.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/svg/path.svg?updated=1558952143","images/svg/people.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/svg/people.svg?updated=1547770265","images/svg/platformos-logo.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/svg/platformos-logo.svg?updated=1558952143","images/svg/sad.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/svg/sad.svg?updated=1547770265","images/svg/search-bg.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/svg/search-bg.svg?updated=1629197043","images/svg/sections/api-reference.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/svg/sections/api-reference.svg?updated=1629197043","images/svg/sections/best-practices.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/svg/sections/best-practices.svg?updated=1629197043","images/svg/sections/code-kit.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/svg/sections/code-kit.svg?updated=1701682073","images/svg/sections/design-kit.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/svg/sections/design-kit.svg?updated=1701682073","images/svg/sections/developer-guide.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/svg/sections/developer-guide.svg?updated=1629197043","images/svg/sections/dev-kit.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/svg/sections/dev-kit.svg?updated=1701682073","images/svg/sections/get-started.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/svg/sections/get-started.svg?updated=1629197043","images/svg/sections/how-platformos-works.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/svg/sections/how-platformos-works.svg?updated=1629197043","images/svg/sections/pos-kits.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/svg/sections/pos-kits.svg?updated=1701682073","images/svg/sections/sections-sprite.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/svg/sections/sections-sprite.svg?updated=1661282912","images/svg/sections/use-cases.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/svg/sections/use-cases.svg?updated=1629197043","images/svg/settings.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/svg/settings.svg?updated=1547770265","images/svg/smile.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/svg/smile.svg?updated=1547770265","images/svg/wave.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/svg/wave.svg?updated=1580390306","images/svg/weird.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/svg/weird.svg?updated=1547770265","images/tutorials/dns/ownership-verification.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/tutorials/dns/ownership-verification.png?updated=1580390306","images/tutorials/dns/reparking-ns.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/tutorials/dns/reparking-ns.png?updated=1580390306","images/tutorials/gdpr/join_newsletter.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/tutorials/gdpr/join_newsletter.png?updated=1558952143","images/tutorials/gdpr/thankyou_page.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/tutorials/gdpr/thankyou_page.png?updated=1558952143","images/tutorials/gdpr/unsubscribe.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/tutorials/gdpr/unsubscribe.png?updated=1558952143","images/tutorials/modules/configure_templates.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/tutorials/modules/configure_templates.png?updated=1558952143","images/tutorials/qa/list_browsers.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/tutorials/qa/list_browsers.png?updated=1558952142","images/tutorials/qa/sanity_tests.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/tutorials/qa/sanity_tests.png?updated=1558952142","images/tutorials/qa/smoke_testing.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/tutorials/qa/smoke_testing.png?updated=1558952142","images/tutorials/qa/test_results.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/tutorials/qa/test_results.png?updated=1558952142","images/use-cases/e-commerce/data-model.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/use-cases/e-commerce/data-model.png?updated=1558952143","images/use-cases/nodejs-debug-logging/after.jpg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/use-cases/nodejs-debug-logging/after.jpg?updated=1629197043","images/use-cases/nodejs-debug-logging/before.jpg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/use-cases/nodejs-debug-logging/before.jpg?updated=1629197043","images/use-cases/recording-terminal/hello.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/use-cases/recording-terminal/hello.svg?updated=1629197043","images/use-cases/recording-terminal/pos-cli.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/use-cases/recording-terminal/pos-cli.svg?updated=1629197043","images/use-cases/social-media-cards/after.jpg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/use-cases/social-media-cards/after.jpg?updated=1629197043","images/use-cases/social-media-cards/before.jpg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/use-cases/social-media-cards/before.jpg?updated=1629197043","images/use-cases/svg-optimization/figma-design.jpg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/use-cases/svg-optimization/figma-design.jpg?updated=1629197043","images/use-cases/svg-optimization/multicursor-16.jpg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/use-cases/svg-optimization/multicursor-16.jpg?updated=1629197043","images/use-cases/svg-optimization/outline-text.jpg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/use-cases/svg-optimization/outline-text.jpg?updated=1629197043","images/use-cases/svg-optimization/size-comparison.jpg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/use-cases/svg-optimization/size-comparison.jpg?updated=1629197043","images/use-cases/svg-optimization/svg-preview.jpg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/use-cases/svg-optimization/svg-preview.jpg?updated=1629197043","images/use-cases/svg-optimization/xml-error.jpg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/use-cases/svg-optimization/xml-error.jpg?updated=1629197043","images/user-research/PP-DesignStyle.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/user-research/PP-DesignStyle.png?updated=1629197043","images/workflow/development_workflow.png":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/images/workflow/development_workflow.png?updated=1629197043","modules/graphql/code.css":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/modules/graphql/code.css?updated=1688642845","modules/graphql/filter-types.js":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/modules/graphql/filter-types.js?updated=1688642845","modules/graphql/graphql.css":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/modules/graphql/graphql.css?updated=1688642845","modules/graphql/graphql.js":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/modules/graphql/graphql.js?updated=1688642845","modules/graphql/images/header-bg.svg":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/modules/graphql/images/header-bg.svg?updated=1688642845","modules/graphql/line-link.js":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/modules/graphql/line-link.js?updated=1688642845","raven.js":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/raven.js?updated=1558952144","redesign.css":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/redesign.css?updated=1580390306","redesign.js":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/redesign.js?updated=1580390306","search.a0c.css":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/search.a0c.css?updated=1682684930","search.a0c.js":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/search.a0c.js?updated=1682684930","syntaxHighlighting.bad.js":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/syntaxHighlighting.bad.js?updated=1580390306","vendor.css":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/vendor.css?updated=1558952144","vendors~prism.09d.js":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/vendors~prism.09d.js?updated=1558952144","vendors~prism.383.js":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/vendors~prism.383.js?updated=1558952144","vendors~prism.49c.js":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/vendors~prism.49c.js?updated=1558952144","vendors~syntaxHighlighting.159.js":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/vendors~syntaxHighlighting.159.js?updated=1580390306","vendors~vendor.10a.js":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/vendors~vendor.10a.js?updated=1547770264","vendors~vendor.2c6.js":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/vendors~vendor.2c6.js?updated=1558952144","webfonts.css":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/webfonts.css?updated=1558952143","webfonts.js":"https://cdn.staging.oregon.platform-os.com/instances/13/assets/webfonts.js?updated=1558952144"}
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.