Using Static Assets on Your Pages
Last edit: Feb 28, 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.oregon.platform-os.com/instances/1/assets/app.css?updated=1559140182","app.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/app.js?updated=1559807853","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","fonts/Gotham-Bold.woff2":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/fonts/Gotham-Bold.woff2?updated=1585738655","fonts/Gotham-Book.woff2":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/fonts/Gotham-Book.woff2?updated=1585738655","fonts/Gotham-Light.woff2":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/fonts/Gotham-Light.woff2?updated=1585738655","fonts/Gotham-Medium.woff2":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/fonts/Gotham-Medium.woff2?updated=1585738655","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=1585738659","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=1585738659","images/best-practices/gdpr/unsubscribe.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/best-practices/gdpr/unsubscribe.png?updated=1585738659","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=1585738658","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=1585738658","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=1585738657","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=1585738658","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=1585738658","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=1585738658","images/best-practices/qa/devops.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/best-practices/qa/devops.png?updated=1585738658","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=1585738659","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=1585738659","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=1585738658","images/best-practices/qa/qrcode.jpg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/best-practices/qa/qrcode.jpg?updated=1585738659","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=1585738658","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=1585738658","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=1585738658","images/contributor-guide/feedback_block.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/contributor-guide/feedback_block.png?updated=1585738661","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=1585738660","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=1585738660","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=1585738660","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=1585738660","images/favicon.ico":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/favicon.ico?updated=1585738656","images/get-started/graphiql.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/get-started/graphiql.png?updated=1585738660","images/graphiql/autocomplete.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/graphiql/autocomplete.png?updated=1585738657","images/graphiql/comments.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/graphiql/comments.png?updated=1585738657","images/graphiql/docs.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/graphiql/docs.png?updated=1585738657","images/graphiql/explorer-add-new.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/graphiql/explorer-add-new.png?updated=1585738656","images/graphiql/explorer.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/graphiql/explorer.png?updated=1585738656","images/graphiql/history.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/graphiql/history.png?updated=1585738657","images/graphiql/main-window.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/graphiql/main-window.png?updated=1585738656","images/graphiql/multiple-queries.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/graphiql/multiple-queries.png?updated=1585738657","images/graphiql/variables.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/graphiql/variables.png?updated=1585738656","images/ISTC.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/ISTC.png?updated=1585738659","images/pos-logo-dark.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/pos-logo-dark.png?updated=1585738657","images/pos-logo.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/pos-logo.png?updated=1585738660","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=1585738657","images/svg/github-logo.svg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/svg/github-logo.svg?updated=1557594104","images/svg/logo.svg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/svg/logo.svg?updated=1585738657","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/wave.svg":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/svg/wave.svg?updated=1585738657","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=1585738660","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=1585738661","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=1585738661","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=1585738660","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=1585738660","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=1585738661","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=1585738661","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=1585738661","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=1585738661","images/workflow/development_workflow.png":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/images/workflow/development_workflow.png?updated=1585738661","modules/graphql/code.css":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/modules/graphql/code.css?updated=1585738662","modules/graphql/filter-types.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/modules/graphql/filter-types.js?updated=1585738662","modules/graphql/focus-active.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/modules/graphql/focus-active.js?updated=1585738662","modules/graphql/graphdoc.css":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/modules/graphql/graphdoc.css?updated=1585738662","modules/graphql/line-link.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/modules/graphql/line-link.js?updated=1585738662","modules/graphql/require-by.css":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/modules/graphql/require-by.css?updated=1585738662","modules/graphql/toggle-navigation.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/modules/graphql/toggle-navigation.js?updated=1585738662","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=1585835603","redesign.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/redesign.js?updated=1585738655","search.07e.js.LICENSE":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.07e.js.LICENSE?updated=1585665395","search.4d3.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.4d3.js?updated=1585738654","search.4d3.js.LICENSE":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.4d3.js.LICENSE?updated=1585738652","search.8cd.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.8cd.js?updated=1585738653","search.8cd.js.LICENSE":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.8cd.js.LICENSE?updated=1585738653","search.b1c.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.b1c.js?updated=1585738654","search.b1c.js.LICENSE.txt":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.b1c.js.LICENSE.txt?updated=1585738654","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=1585738654","search.be0.js.LICENSE.txt":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.be0.js.LICENSE.txt?updated=1585738652","search.css":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.css?updated=1585738656","search.e07.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.e07.js?updated=1585738652","search.e07.js.LICENSE":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.e07.js.LICENSE?updated=1585738653","search.e21.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.e21.js?updated=1585738653","search.e21.js.LICENSE":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.e21.js.LICENSE?updated=1585738653","search.e21.js.LICENSE.txt":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/search.e21.js.LICENSE.txt?updated=1585738654","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.297.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/syntaxHighlighting.297.js?updated=1585738655","syntaxHighlighting.2fa.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/syntaxHighlighting.2fa.js?updated=1585738654","syntaxHighlighting.4b6.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/syntaxHighlighting.4b6.js?updated=1585738661","syntaxHighlighting.579.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/syntaxHighlighting.579.js?updated=1585738661","syntaxHighlighting.82c.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/syntaxHighlighting.82c.js?updated=1585738661","syntaxHighlighting.a48.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/syntaxHighlighting.a48.js?updated=1585738654","syntaxHighlighting.bad.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/syntaxHighlighting.bad.js?updated=1585738652","syntaxHighlighting.bc9.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/syntaxHighlighting.bc9.js?updated=1585738653","syntaxHighlighting.cde.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/syntaxHighlighting.cde.js?updated=1585738653","syntaxHighlighting.d9d.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/syntaxHighlighting.d9d.js?updated=1585738654","syntaxHighlighting.ef8.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/syntaxHighlighting.ef8.js?updated=1585738655","syntaxHighlighting.fb9.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/syntaxHighlighting.fb9.js?updated=1585738655","vendors~syntaxHighlighting.00b.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/vendors~syntaxHighlighting.00b.js?updated=1585738655","vendors~syntaxHighlighting.159.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/vendors~syntaxHighlighting.159.js?updated=1585738656","vendors~syntaxHighlighting.9ad.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/vendors~syntaxHighlighting.9ad.js?updated=1585738653","vendors~syntaxHighlighting.a96.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/vendors~syntaxHighlighting.a96.js?updated=1585738661","vendors~syntaxHighlighting.d62.js":"https://uploads.prod01.oregon.platform-os.com/instances/1/assets/vendors~syntaxHighlighting.d62.js?updated=1585738653","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.
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.