Using Static Assets on Your Pages

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.

• Codebase
• Pages
• Layouts
• Assets
• Reusing Code Across Multiple Pages (previous tutorial)

Steps

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:

{"amazon-s3-pos.jpg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/amazon-s3-pos.jpg?updated=1586872776","app.css":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/app.css?updated=1594038552","app.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/app.js?updated=1594038552","critical.css":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/critical.css?updated=1559140182","critical.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/critical.js?updated=1557695856","experiment/performance-dashboard.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/experiment/performance-dashboard.js?updated=1593183792","fonts/Gotham-Bold.woff2":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/fonts/Gotham-Bold.woff2?updated=1569660982","fonts/Gotham-Book.woff2":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/fonts/Gotham-Book.woff2?updated=1569660982","fonts/Gotham-Light.woff2":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/fonts/Gotham-Light.woff2?updated=1569660982","fonts/Gotham-Medium.woff2":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/fonts/Gotham-Medium.woff2?updated=1569660982","graphql.css":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/graphql.css?updated=1594038552","graphql.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/graphql.js?updated=1594038552","images/best-practices/gdpr/join_newsletter.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/best-practices/gdpr/join_newsletter.png?updated=1586544247","images/best-practices/gdpr/thankyou_page.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/best-practices/gdpr/thankyou_page.png?updated=1586544247","images/best-practices/gdpr/unsubscribe.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/best-practices/gdpr/unsubscribe.png?updated=1586544247","images/best-practices/lighthouse/slack-notification.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/best-practices/lighthouse/slack-notification.png?updated=1587666714","images/best-practices/performance/embedding-youtube/thumbnail.jpg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/best-practices/performance/embedding-youtube/thumbnail.jpg?updated=1585547016","images/best-practices/performance/fragment-lazy-loading/lazy-external-timeline.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/best-practices/performance/fragment-lazy-loading/lazy-external-timeline.png?updated=1586544247","images/best-practices/performance/fragment-lazy-loading/lazy-inline-timeline.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/best-practices/performance/fragment-lazy-loading/lazy-inline-timeline.png?updated=1586544247","images/best-practices/performance/fragment-lazy-loading/lazy-loading-filmstrip.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/best-practices/performance/fragment-lazy-loading/lazy-loading-filmstrip.png?updated=1586544247","images/best-practices/performance/fragment-lazy-loading/slow-filmstrip.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/best-practices/performance/fragment-lazy-loading/slow-filmstrip.png?updated=1586544247","images/best-practices/performance/fragment-lazy-loading/slow-timeline.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/best-practices/performance/fragment-lazy-loading/slow-timeline.png?updated=1586544247","images/best-practices/qa/devops.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/best-practices/qa/devops.png?updated=1580651463","images/best-practices/qa/executed_suit.jpg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/best-practices/qa/executed_suit.jpg?updated=1580651463","images/best-practices/qa/executed_suit.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/best-practices/qa/executed_suit.png?updated=1580047219","images/best-practices/qa/executed_tests.jpg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/best-practices/qa/executed_tests.jpg?updated=1580651463","images/best-practices/qa/executed_tests.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/best-practices/qa/executed_tests.png?updated=1580047219","images/best-practices/qa/graphiql.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/best-practices/qa/graphiql.png?updated=1583423066","images/best-practices/qa/list_browsers.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/best-practices/qa/list_browsers.png?updated=1580651463","images/best-practices/qa/qrcode.jpg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/best-practices/qa/qrcode.jpg?updated=1580651463","images/best-practices/qa/sanity_tests.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/best-practices/qa/sanity_tests.png?updated=1580651463","images/best-practices/qa/smoke_testing.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/best-practices/qa/smoke_testing.png?updated=1563276865","images/best-practices/qa/test_results.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/best-practices/qa/test_results.png?updated=1580651463","images/contributor-guide/feedback_block.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/contributor-guide/feedback_block.png?updated=1563369437","images/developer-guide/about-platformos/dr-strategy.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/developer-guide/about-platformos/dr-strategy.png?updated=1589378985","images/developer-guide/dns/ownership-verification.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/developer-guide/dns/ownership-verification.png?updated=1582883392","images/developer-guide/dns/reparking-ns.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/developer-guide/dns/reparking-ns.png?updated=1582883392","images/developer-guide/pos-cli-workflow/final-result.svg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/developer-guide/pos-cli-workflow/final-result.svg?updated=1586976845","images/developer-guide/user-uploads/flowchart-attachments.svg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/developer-guide/user-uploads/flowchart-attachments.svg?updated=1583507504","images/developer-guide/user-uploads/flowchart-images.svg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/developer-guide/user-uploads/flowchart-images.svg?updated=1583507504","images/favicon.ico":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/favicon.ico?updated=1563276865","images/get-started/graphiql.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/get-started/graphiql.png?updated=1582190408","images/graphiql/autocomplete.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/graphiql/autocomplete.png?updated=1584028459","images/graphiql/comments.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/graphiql/comments.png?updated=1584028459","images/graphiql/docs.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/graphiql/docs.png?updated=1584028459","images/graphiql/explorer-add-new.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/graphiql/explorer-add-new.png?updated=1585248769","images/graphiql/explorer.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/graphiql/explorer.png?updated=1584028459","images/graphiql/history.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/graphiql/history.png?updated=1584028459","images/graphiql/main-window.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/graphiql/main-window.png?updated=1584028459","images/graphiql/multiple-queries.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/graphiql/multiple-queries.png?updated=1584028459","images/graphiql/variables.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/graphiql/variables.png?updated=1584028459","images/ISTC.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/ISTC.png?updated=1583508589","images/pos-logo-2to1.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/pos-logo-2to1.png?updated=1586890400","images/pos-logo-dark.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/pos-logo-dark.png?updated=1585331154","images/pos-logo.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/pos-logo.png?updated=1585331571","images/sprite.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/sprite.png?updated=1557594104","images/svg/background.svg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/svg/background.svg?updated=1588352990","images/svg/callout-bg.svg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/svg/callout-bg.svg?updated=1588381553","images/svg/github-logo.svg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/svg/github-logo.svg?updated=1557594104","images/svg/header-bg.svg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/svg/header-bg.svg?updated=1588381553","images/svg/logo.svg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/svg/logo.svg?updated=1588352990","images/svg/open-book.svg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/svg/open-book.svg?updated=1557594104","images/svg/path.svg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/svg/path.svg?updated=1557594104","images/svg/platformos-logo.svg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/svg/platformos-logo.svg?updated=1557594104","images/svg/search-bg.svg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/svg/search-bg.svg?updated=1588381553","images/svg/wave.svg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/svg/wave.svg?updated=1588352990","images/tutorials/dns/ownership-verification.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/tutorials/dns/ownership-verification.png?updated=1582188553","images/tutorials/dns/reparking-ns.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/tutorials/dns/reparking-ns.png?updated=1582188553","images/tutorials/gdpr/join_newsletter.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/tutorials/gdpr/join_newsletter.png?updated=1557594103","images/tutorials/gdpr/thankyou_page.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/tutorials/gdpr/thankyou_page.png?updated=1557594104","images/tutorials/gdpr/unsubscribe.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/tutorials/gdpr/unsubscribe.png?updated=1557594103","images/tutorials/modules/configure_templates.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/tutorials/modules/configure_templates.png?updated=1580047217","images/tutorials/qa/list_browsers.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/tutorials/qa/list_browsers.png?updated=1557594103","images/tutorials/qa/sanity_tests.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/tutorials/qa/sanity_tests.png?updated=1557594103","images/tutorials/qa/smoke_testing.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/tutorials/qa/smoke_testing.png?updated=1557594103","images/tutorials/qa/test_results.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/tutorials/qa/test_results.png?updated=1557594103","images/use-cases/e-commerce/data-model.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/use-cases/e-commerce/data-model.png?updated=1580652899","images/use-cases/nodejs-debug-logging/after.jpg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/use-cases/nodejs-debug-logging/after.jpg?updated=1587548303","images/use-cases/nodejs-debug-logging/before.jpg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/use-cases/nodejs-debug-logging/before.jpg?updated=1587548303","images/use-cases/recording-terminal/hello.svg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/use-cases/recording-terminal/hello.svg?updated=1585303933","images/use-cases/recording-terminal/pos-cli.svg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/use-cases/recording-terminal/pos-cli.svg?updated=1585303933","images/use-cases/social-media-cards/after.jpg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/use-cases/social-media-cards/after.jpg?updated=1586940487","images/use-cases/social-media-cards/before.jpg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/use-cases/social-media-cards/before.jpg?updated=1586940487","images/use-cases/svg-optimization/figma-design.jpg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/use-cases/svg-optimization/figma-design.jpg?updated=1585228037","images/use-cases/svg-optimization/multicursor-16.jpg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/use-cases/svg-optimization/multicursor-16.jpg?updated=1586544247","images/use-cases/svg-optimization/outline-text.jpg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/use-cases/svg-optimization/outline-text.jpg?updated=1585228037","images/use-cases/svg-optimization/size-comparison.jpg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/use-cases/svg-optimization/size-comparison.jpg?updated=1585228037","images/use-cases/svg-optimization/svg-preview.jpg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/use-cases/svg-optimization/svg-preview.jpg?updated=1586544247","images/use-cases/svg-optimization/xml-error.jpg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/use-cases/svg-optimization/xml-error.jpg?updated=1585228037","images/workflow/development_workflow.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/workflow/development_workflow.png?updated=1580525965","modules/graphql/code.css":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/modules/graphql/code.css?updated=1589554053","modules/graphql/filter-types.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/modules/graphql/filter-types.js?updated=1591264169","modules/graphql/focus-active.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/modules/graphql/focus-active.js?updated=1581062489","modules/graphql/graphdoc.css":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/modules/graphql/graphdoc.css?updated=1581062489","modules/graphql/graphql.css":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/modules/graphql/graphql.css?updated=1589841354","modules/graphql/graphql.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/modules/graphql/graphql.js?updated=1589554053","modules/graphql/images/header-bg.svg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/modules/graphql/images/header-bg.svg?updated=1589970194","modules/graphql/line-link.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/modules/graphql/line-link.js?updated=1589554053","modules/graphql/require-by.css":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/modules/graphql/require-by.css?updated=1581062489","modules/graphql/toggle-navigation.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/modules/graphql/toggle-navigation.js?updated=1581062489","raven.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/raven.js?updated=1557594103","redesign.css":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/redesign.css?updated=1586500716","redesign.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/redesign.js?updated=1586500716","search.07e.js.LICENSE":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.07e.js.LICENSE?updated=1585665395","search.16f.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.16f.js?updated=1590051827","search.228.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.228.js?updated=1589833280","search.31f.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.31f.js?updated=1590051827","search.4d3.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.4d3.js?updated=1580401722","search.4d3.js.LICENSE":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.4d3.js.LICENSE?updated=1580401722","search.7dd.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.7dd.js?updated=1590051827","search.862.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.862.js?updated=1589274993","search.862.js.LICENSE.txt":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.862.js.LICENSE.txt?updated=1588968422","search.889.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.889.js?updated=1590051827","search.8a2.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.8a2.js?updated=1589465839","search.8c9.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.8c9.js?updated=1590051827","search.8cd.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.8cd.js?updated=1580214618","search.8cd.js.LICENSE":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.8cd.js.LICENSE?updated=1580214618","search.8f7.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.8f7.js?updated=1591702753","search.9c0.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.9c0.js?updated=1590051827","search.a7c.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.a7c.js?updated=1588352891","search.a7c.js.LICENSE.txt":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.a7c.js.LICENSE.txt?updated=1588352891","search.a84.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.a84.js?updated=1590051827","search.b09.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.b09.js?updated=1590051827","search.b09.js.LICENSE.txt":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.b09.js.LICENSE.txt?updated=1590051827","search.b1c.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.b1c.js?updated=1584702112","search.b1c.js.LICENSE.txt":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.b1c.js.LICENSE.txt?updated=1584702112","search.b60.js.LICENSE":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.b60.js.LICENSE?updated=1585665394","search.be0.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.be0.js?updated=1586500716","search.be0.js.LICENSE.txt":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.be0.js.LICENSE.txt?updated=1586500716","search.c3f.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.c3f.js?updated=1590051827","search.c8c.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.c8c.js?updated=1594038552","search.css":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.css?updated=1594038552","search.e07.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.e07.js?updated=1579607357","search.e07.js.LICENSE":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.e07.js.LICENSE?updated=1579607357","search.e21.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.e21.js?updated=1583245884","search.e21.js.LICENSE":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.e21.js.LICENSE?updated=1580402922","search.e21.js.LICENSE.txt":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.e21.js.LICENSE.txt?updated=1583245884","search.ec7.js.LICENSE":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.ec7.js.LICENSE?updated=1585665395","search.f03.js.LICENSE":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.f03.js.LICENSE?updated=1585665395","syntaxHighlighting.281.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/syntaxHighlighting.281.js?updated=1590051827","syntaxHighlighting.297.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/syntaxHighlighting.297.js?updated=1574891638","syntaxHighlighting.2fa.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/syntaxHighlighting.2fa.js?updated=1569588605","syntaxHighlighting.4b6.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/syntaxHighlighting.4b6.js?updated=1579542837","syntaxHighlighting.55f.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/syntaxHighlighting.55f.js?updated=1588352891","syntaxHighlighting.579.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/syntaxHighlighting.579.js?updated=1569661000","syntaxHighlighting.77e.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/syntaxHighlighting.77e.js?updated=1589465839","syntaxHighlighting.82c.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/syntaxHighlighting.82c.js?updated=1586500716","syntaxHighlighting.888.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/syntaxHighlighting.888.js?updated=1589274993","syntaxHighlighting.a48.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/syntaxHighlighting.a48.js?updated=1583245884","syntaxHighlighting.a67.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/syntaxHighlighting.a67.js?updated=1590051827","syntaxHighlighting.a8f.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/syntaxHighlighting.a8f.js?updated=1591702753","syntaxHighlighting.a98.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/syntaxHighlighting.a98.js?updated=1594038552","syntaxHighlighting.bad.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/syntaxHighlighting.bad.js?updated=1567157400","syntaxHighlighting.bc9.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/syntaxHighlighting.bc9.js?updated=1584702112","syntaxHighlighting.c23.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/syntaxHighlighting.c23.js?updated=1590051827","syntaxHighlighting.cde.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/syntaxHighlighting.cde.js?updated=1580214618","syntaxHighlighting.d9d.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/syntaxHighlighting.d9d.js?updated=1578573842","syntaxHighlighting.ef8.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/syntaxHighlighting.ef8.js?updated=1567784151","syntaxHighlighting.fb9.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/syntaxHighlighting.fb9.js?updated=1569001132","vendor/chart-datefns.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/vendor/chart-datefns.js?updated=1591716481","vendor/chart.min.css":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/vendor/chart.min.css?updated=1591716481","vendor/chart.min.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/vendor/chart.min.js?updated=1591716481","vendor/instantpage.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/vendor/instantpage.js?updated=1591716481","vendor/quicklink.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/vendor/quicklink.js?updated=1591890858","vendor/skeleton.css":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/vendor/skeleton.css?updated=1591716481","vendors~syntaxHighlighting.00b.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/vendors~syntaxHighlighting.00b.js?updated=1569588605","vendors~syntaxHighlighting.159.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/vendors~syntaxHighlighting.159.js?updated=1567157400","vendors~syntaxHighlighting.9ad.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/vendors~syntaxHighlighting.9ad.js?updated=1569001132","vendors~syntaxHighlighting.a96.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/vendors~syntaxHighlighting.a96.js?updated=1567784151","vendors~syntaxHighlighting.d62.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/vendors~syntaxHighlighting.d62.js?updated=1569661000","vendors~vendor.14d.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/vendors~vendor.14d.js?updated=1557594103","vendors~vendor.e10.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/vendors~vendor.e10.js?updated=1557695856","webfonts.css":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/webfonts.css?updated=1559140182","webfonts.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/webfonts.js?updated=1557695856"}

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. You should see that 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, you can see that 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.

• Adding Visuals to Your Pages: CSS
• Adding Visuals to Your Pages: Javascript