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:

{"app.css":"https://uploads.platformos.dev/instances/85/assets/app.css?updated=1664795588","app.js":"https://uploads.platformos.dev/instances/85/assets/app.js?updated=1664795588","contentPages.a10.css":"https://uploads.platformos.dev/instances/85/assets/contentPages.a10.css?updated=1664795588","contentPages.a10.js":"https://uploads.platformos.dev/instances/85/assets/contentPages.a10.js?updated=1664795588","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","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","fonts/Gotham-Book.woff2":"https://uploads.platformos.dev/instances/85/assets/fonts/Gotham-Book.woff2?updated=1664795575","fonts/Gotham-Medium.woff2":"https://uploads.platformos.dev/instances/85/assets/fonts/Gotham-Medium.woff2?updated=1664795575","graphql.js":"https://uploads.platformos.dev/instances/85/assets/graphql.js?updated=1664795588","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=1664795575","images/awards/2021/Best Editorial Experience.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2021/Best Editorial Experience.png?updated=1664795575","images/awards/2021/Best Onboarding Award.svg":"https://uploads.platformos.dev/instances/85/assets/images/awards/2021/Best Onboarding Award.svg?updated=1664795575","images/awards/2021/ISTC-a.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2021/ISTC-a.png?updated=1656597297","images/awards/2021/ISTC.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/2021/ISTC.png?updated=1664795575","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=1664795575","images/awards/cicd.jpeg":"https://uploads.platformos.dev/instances/85/assets/images/awards/cicd.jpeg?updated=1664795575","images/awards/styleguide.jpeg":"https://uploads.platformos.dev/instances/85/assets/images/awards/styleguide.jpeg?updated=1664795575","images/awards/template.jpeg":"https://uploads.platformos.dev/instances/85/assets/images/awards/template.jpeg?updated=1664795575","images/awards/tests.jpeg":"https://uploads.platformos.dev/instances/85/assets/images/awards/tests.jpeg?updated=1664795575","images/awards/uktc_ceremony.jpg":"https://uploads.platformos.dev/instances/85/assets/images/awards/uktc_ceremony.jpg?updated=1664795575","images/awards/workflow.png":"https://uploads.platformos.dev/instances/85/assets/images/awards/workflow.png?updated=1664795575","images/best-practices/gdpr/join_newsletter.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/gdpr/join_newsletter.png?updated=1664795575","images/best-practices/gdpr/thankyou_page.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/gdpr/thankyou_page.png?updated=1664795575","images/best-practices/gdpr/unsubscribe.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/gdpr/unsubscribe.png?updated=1664795575","images/best-practices/lighthouse/slack-notification.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/lighthouse/slack-notification.png?updated=1664795575","images/best-practices/performance/embedding-youtube/thumbnail.jpg":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/performance/embedding-youtube/thumbnail.jpg?updated=1664795575","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=1664795575","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=1664795575","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=1664795575","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=1664795575","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=1664795575","images/best-practices/qa/devops.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/qa/devops.png?updated=1664795575","images/best-practices/qa/executed_suit.jpg":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/qa/executed_suit.jpg?updated=1664795575","images/best-practices/qa/executed_tests.jpg":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/qa/executed_tests.jpg?updated=1664795575","images/best-practices/qa/list_browsers.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/qa/list_browsers.png?updated=1664795575","images/best-practices/qa/qrcode.jpg":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/qa/qrcode.jpg?updated=1664795575","images/best-practices/qa/sanity_tests.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/qa/sanity_tests.png?updated=1664795575","images/best-practices/qa/smoke_testing.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/qa/smoke_testing.png?updated=1664795575","images/best-practices/qa/test_results.png":"https://uploads.platformos.dev/instances/85/assets/images/best-practices/qa/test_results.png?updated=1664795575","images/contributor-guide/feedback_block.png":"https://uploads.platformos.dev/instances/85/assets/images/contributor-guide/feedback_block.png?updated=1664795575","images/developer-guide/dns/ownership-verification.png":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/dns/ownership-verification.png?updated=1664795575","images/developer-guide/dns/reparking-ns.png":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/dns/reparking-ns.png?updated=1664795575","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=1664795575","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=1664795575","images/developer-guide/user-uploads/flowchart-attachments.svg":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/user-uploads/flowchart-attachments.svg?updated=1664795575","images/developer-guide/user-uploads/flowchart-images.svg":"https://uploads.platformos.dev/instances/85/assets/images/developer-guide/user-uploads/flowchart-images.svg?updated=1664795575","images/favicon-192x192.png":"https://uploads.platformos.dev/instances/85/assets/images/favicon-192x192.png?updated=1664795575","images/favicon-32x32.png":"https://uploads.platformos.dev/instances/85/assets/images/favicon-32x32.png?updated=1664795575","images/favicon-96x96.png":"https://uploads.platformos.dev/instances/85/assets/images/favicon-96x96.png?updated=1664795575","images/get-started/graphiql.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/graphiql.png?updated=1664795575","images/get-started/Marketplace_MVP.jpg":"https://uploads.platformos.dev/instances/85/assets/images/get-started/Marketplace_MVP.jpg?updated=1664795575","images/graphiql/autocomplete.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/autocomplete.png?updated=1664795575","images/graphiql/comments.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/comments.png?updated=1664795575","images/graphiql/docs.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/docs.png?updated=1664795575","images/graphiql/explorer-add-new.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/explorer-add-new.png?updated=1664795575","images/graphiql/explorer.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/explorer.png?updated=1664795575","images/graphiql/history.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/history.png?updated=1664795575","images/graphiql/main-window.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/main-window.png?updated=1664795575","images/graphiql/multiple-queries.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/multiple-queries.png?updated=1664795575","images/graphiql/variables.png":"https://uploads.platformos.dev/instances/85/assets/images/graphiql/variables.png?updated=1664795575","images/meet-us/marketplace_risk_conference.png":"https://uploads.platformos.dev/instances/85/assets/images/meet-us/marketplace_risk_conference.png?updated=1664795575","images/pos-logo-2to1.png":"https://uploads.platformos.dev/instances/85/assets/images/pos-logo-2to1.png?updated=1664795575","images/pos-logo-dark.png":"https://uploads.platformos.dev/instances/85/assets/images/pos-logo-dark.png?updated=1664795575","images/pos-logo.png":"https://uploads.platformos.dev/instances/85/assets/images/pos-logo.png?updated=1664795575","images/svg/callout-bg.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/callout-bg.svg?updated=1664795575","images/svg/header-bg.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/header-bg.svg?updated=1664795575","images/svg/logo.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/logo.svg?updated=1664795575","images/svg/search-bg.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/search-bg.svg?updated=1664795575","images/svg/sections/api-reference.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/api-reference.svg?updated=1664795575","images/svg/sections/best-practices.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/best-practices.svg?updated=1664795575","images/svg/sections/developer-guide.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/developer-guide.svg?updated=1664795575","images/svg/sections/get-started.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/get-started.svg?updated=1664795575","images/svg/sections/how-platformos-works.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/how-platformos-works.svg?updated=1664795575","images/svg/sections/sections-sprite.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/sections-sprite.svg?updated=1664795575","images/svg/sections/use-cases.svg":"https://uploads.platformos.dev/instances/85/assets/images/svg/sections/use-cases.svg?updated=1664795575","images/use-cases/nodejs-debug-logging/after.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/nodejs-debug-logging/after.jpg?updated=1664795575","images/use-cases/nodejs-debug-logging/before.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/nodejs-debug-logging/before.jpg?updated=1664795575","images/use-cases/recording-terminal/hello.svg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/recording-terminal/hello.svg?updated=1664795575","images/use-cases/recording-terminal/pos-cli.svg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/recording-terminal/pos-cli.svg?updated=1664795575","images/use-cases/social-media-cards/after.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/social-media-cards/after.jpg?updated=1664795575","images/use-cases/social-media-cards/before.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/social-media-cards/before.jpg?updated=1664795575","images/use-cases/svg-optimization/figma-design.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/svg-optimization/figma-design.jpg?updated=1664795575","images/use-cases/svg-optimization/multicursor-16.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/svg-optimization/multicursor-16.jpg?updated=1664795575","images/use-cases/svg-optimization/outline-text.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/svg-optimization/outline-text.jpg?updated=1664795575","images/use-cases/svg-optimization/size-comparison.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/svg-optimization/size-comparison.jpg?updated=1664795575","images/use-cases/svg-optimization/svg-preview.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/svg-optimization/svg-preview.jpg?updated=1664795575","images/use-cases/svg-optimization/xml-error.jpg":"https://uploads.platformos.dev/instances/85/assets/images/use-cases/svg-optimization/xml-error.jpg?updated=1664795575","images/user-research/PP-DesignStyle.png":"https://uploads.platformos.dev/instances/85/assets/images/user-research/PP-DesignStyle.png?updated=1664795575","images/workflow/development_workflow.png":"https://uploads.platformos.dev/instances/85/assets/images/workflow/development_workflow.png?updated=1664795575","modules/graphql/code.css":"https://uploads.platformos.dev/instances/85/assets/modules/graphql/code.css?updated=1664795575","modules/graphql/filter-types.js":"https://uploads.platformos.dev/instances/85/assets/modules/graphql/filter-types.js?updated=1664795575","modules/graphql/graphql.css":"https://uploads.platformos.dev/instances/85/assets/modules/graphql/graphql.css?updated=1664795575","modules/graphql/graphql.js":"https://uploads.platformos.dev/instances/85/assets/modules/graphql/graphql.js?updated=1664795575","modules/graphql/images/header-bg.svg":"https://uploads.platformos.dev/instances/85/assets/modules/graphql/images/header-bg.svg?updated=1664795575","modules/graphql/line-link.js":"https://uploads.platformos.dev/instances/85/assets/modules/graphql/line-link.js?updated=1664795575","search.1b8.css":"https://uploads.platformos.dev/instances/85/assets/search.1b8.css?updated=1664795588","search.1b8.js":"https://uploads.platformos.dev/instances/85/assets/search.1b8.js?updated=1664795588"}

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.

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