Using Static Assets on Your Pages
Last edit: Apr 10, 2020
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
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:
{"app.css":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/app.css?updated=1587036108","app.js":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/app.js?updated=1586967229","fonts/Gotham-Bold.woff2":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/fonts/Gotham-Bold.woff2?updated=1584390255","fonts/Gotham-Book.woff2":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/fonts/Gotham-Book.woff2?updated=1584390255","fonts/Gotham-Light.woff2":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/fonts/Gotham-Light.woff2?updated=1584390255","fonts/Gotham-Medium.woff2":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/fonts/Gotham-Medium.woff2?updated=1584390255","images/best-practices/gdpr/join_newsletter.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/best-practices/gdpr/join_newsletter.png?updated=1586872362","images/best-practices/gdpr/thankyou_page.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/best-practices/gdpr/thankyou_page.png?updated=1586872362","images/best-practices/gdpr/unsubscribe.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/best-practices/gdpr/unsubscribe.png?updated=1586872362","images/best-practices/performance/embedding-youtube/thumbnail.jpg":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/best-practices/performance/embedding-youtube/thumbnail.jpg?updated=1585677542","images/best-practices/performance/fragment-lazy-loading/lazy-external-timeline.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/best-practices/performance/fragment-lazy-loading/lazy-external-timeline.png?updated=1586872361","images/best-practices/performance/fragment-lazy-loading/lazy-inline-timeline.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/best-practices/performance/fragment-lazy-loading/lazy-inline-timeline.png?updated=1586872361","images/best-practices/performance/fragment-lazy-loading/lazy-loading-filmstrip.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/best-practices/performance/fragment-lazy-loading/lazy-loading-filmstrip.png?updated=1586872361","images/best-practices/performance/fragment-lazy-loading/slow-filmstrip.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/best-practices/performance/fragment-lazy-loading/slow-filmstrip.png?updated=1586872361","images/best-practices/performance/fragment-lazy-loading/slow-timeline.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/best-practices/performance/fragment-lazy-loading/slow-timeline.png?updated=1586872361","images/best-practices/qa/devops.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/best-practices/qa/devops.png?updated=1584390256","images/best-practices/qa/executed_suit.jpg":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/best-practices/qa/executed_suit.jpg?updated=1584390257","images/best-practices/qa/executed_suit.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/best-practices/qa/executed_suit.png?updated=1579109222","images/best-practices/qa/executed_tests.jpg":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/best-practices/qa/executed_tests.jpg?updated=1584390257","images/best-practices/qa/executed_tests.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/best-practices/qa/executed_tests.png?updated=1579109222","images/best-practices/qa/graphiql.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/best-practices/qa/graphiql.png?updated=1580749694","images/best-practices/qa/list_browsers.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/best-practices/qa/list_browsers.png?updated=1584390256","images/best-practices/qa/qrcode.jpg":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/best-practices/qa/qrcode.jpg?updated=1584390257","images/best-practices/qa/sanity_tests.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/best-practices/qa/sanity_tests.png?updated=1584390256","images/best-practices/qa/smoke_testing.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/best-practices/qa/smoke_testing.png?updated=1584390256","images/best-practices/qa/test_results.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/best-practices/qa/test_results.png?updated=1584390256","images/contributor-guide/feedback_block.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/contributor-guide/feedback_block.png?updated=1584390257","images/developer-guide/dns/ownership-verification.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/developer-guide/dns/ownership-verification.png?updated=1584390257","images/developer-guide/dns/reparking-ns.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/developer-guide/dns/reparking-ns.png?updated=1584390257","images/developer-guide/pos-cli-workflow/final-result.svg":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/developer-guide/pos-cli-workflow/final-result.svg?updated=1587036108","images/developer-guide/user-uploads/flowchart-attachments.svg":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/developer-guide/user-uploads/flowchart-attachments.svg?updated=1584390257","images/developer-guide/user-uploads/flowchart-images.svg":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/developer-guide/user-uploads/flowchart-images.svg?updated=1584390257","images/favicon.ico":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/favicon.ico?updated=1584390255","images/get-started/graphiql.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/get-started/graphiql.png?updated=1584390257","images/graphiql/autocomplete.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/graphiql/autocomplete.png?updated=1584390256","images/graphiql/comments.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/graphiql/comments.png?updated=1584390255","images/graphiql/docs.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/graphiql/docs.png?updated=1584390256","images/graphiql/explorer-add-new.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/graphiql/explorer-add-new.png?updated=1585308666","images/graphiql/explorer.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/graphiql/explorer.png?updated=1584390255","images/graphiql/history.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/graphiql/history.png?updated=1584390255","images/graphiql/main-window.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/graphiql/main-window.png?updated=1584390255","images/graphiql/multiple-queries.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/graphiql/multiple-queries.png?updated=1584390255","images/graphiql/variables.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/graphiql/variables.png?updated=1584390255","images/ISTC.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/ISTC.png?updated=1584390257","images/pos-logo-2to1.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/pos-logo-2to1.png?updated=1586967229","images/pos-logo-dark.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/pos-logo-dark.png?updated=1585677542","images/pos-logo.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/pos-logo.png?updated=1585677542","images/svg/background.svg":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/svg/background.svg?updated=1584390256","images/svg/logo.svg":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/svg/logo.svg?updated=1584390256","images/svg/wave.svg":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/svg/wave.svg?updated=1584390256","images/tutorials/dns/ownership-verification.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/tutorials/dns/ownership-verification.png?updated=1579109221","images/tutorials/dns/ownership-verificiation.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/tutorials/dns/ownership-verificiation.png?updated=1570101131","images/tutorials/dns/reparking-ns.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/tutorials/dns/reparking-ns.png?updated=1579109221","images/tutorials/modules/configure_templates.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/tutorials/modules/configure_templates.png?updated=1579109221","images/use-cases/e-commerce/data-model.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/use-cases/e-commerce/data-model.png?updated=1584390257","images/use-cases/nodejs-debug-logging/after.jpg":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/use-cases/nodejs-debug-logging/after.jpg?updated=1587552238","images/use-cases/nodejs-debug-logging/before.jpg":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/use-cases/nodejs-debug-logging/before.jpg?updated=1587552239","images/use-cases/recording-terminal/hello.svg":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/use-cases/recording-terminal/hello.svg?updated=1585308667","images/use-cases/recording-terminal/pos-cli.svg":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/use-cases/recording-terminal/pos-cli.svg?updated=1585308667","images/use-cases/social-media-cards/after.jpg":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/use-cases/social-media-cards/after.jpg?updated=1586967229","images/use-cases/social-media-cards/before.jpg":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/use-cases/social-media-cards/before.jpg?updated=1586967229","images/use-cases/svg-optimization/figma-design.jpg":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/use-cases/svg-optimization/figma-design.jpg?updated=1585308666","images/use-cases/svg-optimization/multicursor-16.jpg":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/use-cases/svg-optimization/multicursor-16.jpg?updated=1586872362","images/use-cases/svg-optimization/outline-text.jpg":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/use-cases/svg-optimization/outline-text.jpg?updated=1585308666","images/use-cases/svg-optimization/size-comparison.jpg":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/use-cases/svg-optimization/size-comparison.jpg?updated=1585308666","images/use-cases/svg-optimization/svg-preview.jpg":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/use-cases/svg-optimization/svg-preview.jpg?updated=1586872362","images/use-cases/svg-optimization/xml-error.jpg":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/use-cases/svg-optimization/xml-error.jpg?updated=1585308666","images/workflow/development_workflow.png":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/images/workflow/development_workflow.png?updated=1584390257","modules/graphql/code.css":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/modules/graphql/code.css?updated=1584390257","modules/graphql/filter-types.js":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/modules/graphql/filter-types.js?updated=1584390258","modules/graphql/focus-active.js":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/modules/graphql/focus-active.js?updated=1584390257","modules/graphql/graphdoc.css":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/modules/graphql/graphdoc.css?updated=1584390258","modules/graphql/line-link.js":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/modules/graphql/line-link.js?updated=1584390258","modules/graphql/require-by.css":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/modules/graphql/require-by.css?updated=1584390258","modules/graphql/toggle-navigation.js":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/modules/graphql/toggle-navigation.js?updated=1584390258","modules/test/favicon.ico":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/modules/test/favicon.ico?updated=1703177093","redesign.css":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/redesign.css?updated=1586359667","redesign.js":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/redesign.js?updated=1584895481","search.4d3.js":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/search.4d3.js?updated=1584395482","search.4d3.js.LICENSE":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/search.4d3.js.LICENSE?updated=1584395481","search.8cd.js":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/search.8cd.js?updated=1584395482","search.8cd.js.LICENSE":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/search.8cd.js.LICENSE?updated=1584395481","search.a7c.js":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/search.a7c.js?updated=1586529817","search.a7c.js.LICENSE.txt":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/search.a7c.js.LICENSE.txt?updated=1586529817","search.b1c.js":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/search.b1c.js?updated=1584395483","search.b1c.js.LICENSE.txt":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/search.b1c.js.LICENSE.txt?updated=1584395482","search.be0.js":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/search.be0.js?updated=1584895481","search.be0.js.LICENSE.txt":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/search.be0.js.LICENSE.txt?updated=1584895481","search.css":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/search.css?updated=1586529818","search.e07.js":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/search.e07.js?updated=1584395481","search.e07.js.LICENSE":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/search.e07.js.LICENSE?updated=1584395482","search.e21.js":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/search.e21.js?updated=1584395481","search.e21.js.LICENSE":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/search.e21.js.LICENSE?updated=1584395482","search.e21.js.LICENSE.txt":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/search.e21.js.LICENSE.txt?updated=1584395482","syntaxHighlighting.297.js":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/syntaxHighlighting.297.js?updated=1584395483","syntaxHighlighting.2fa.js":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/syntaxHighlighting.2fa.js?updated=1584395482","syntaxHighlighting.4b6.js":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/syntaxHighlighting.4b6.js?updated=1584395483","syntaxHighlighting.55f.js":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/syntaxHighlighting.55f.js?updated=1586529818","syntaxHighlighting.579.js":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/syntaxHighlighting.579.js?updated=1584395483","syntaxHighlighting.82c.js":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/syntaxHighlighting.82c.js?updated=1584895481","syntaxHighlighting.a48.js":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/syntaxHighlighting.a48.js?updated=1584395482","syntaxHighlighting.bad.js":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/syntaxHighlighting.bad.js?updated=1584390254","syntaxHighlighting.bc9.js":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/syntaxHighlighting.bc9.js?updated=1584395481","syntaxHighlighting.c95.js":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/syntaxHighlighting.c95.js?updated=1566910579","syntaxHighlighting.cde.js":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/syntaxHighlighting.cde.js?updated=1584395482","syntaxHighlighting.d9d.js":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/syntaxHighlighting.d9d.js?updated=1584395482","syntaxHighlighting.ef8.js":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/syntaxHighlighting.ef8.js?updated=1584395483","syntaxHighlighting.fb9.js":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/syntaxHighlighting.fb9.js?updated=1584395483","vendors~syntaxHighlighting.00b.js":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/vendors~syntaxHighlighting.00b.js?updated=1584395483","vendors~syntaxHighlighting.159.js":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/vendors~syntaxHighlighting.159.js?updated=1584390255","vendors~syntaxHighlighting.6fd.js":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/vendors~syntaxHighlighting.6fd.js?updated=1566910581","vendors~syntaxHighlighting.9ad.js":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/vendors~syntaxHighlighting.9ad.js?updated=1584395482","vendors~syntaxHighlighting.a96.js":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/vendors~syntaxHighlighting.a96.js?updated=1584395483","vendors~syntaxHighlighting.d62.js":"https://uploads.prod01.sydney.platformos.com/instances/2/assets/vendors~syntaxHighlighting.d62.js?updated=1584395481"}
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.
Note
If you are syncing, you are only adding and changing files, and they will stay in the database even if you delete them on your computer as long as you do not do a deploy
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.