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.
- 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:
{"modules/graphql/graphql.css":"https://uploads.platformos.dev/instances/85/assets/modules/graphql/graphql.css?updated=1726477978","modules/graphql/graphql.js":"https://uploads.platformos.dev/instances/85/assets/modules/graphql/graphql.js?updated=1726477978","images/get-started/what-is-pos/infrastructure.png":"https://uploads.platformos.dev/instances/85/assets/images/get-started/what-is-pos/infrastructure.png?updated=1752761651","modules/graphql/code.css":"https://uploads.platformos.dev/instances/85/assets/modules/graphql/code.css?updated=1726477978","modules/graphql/filter-types.js":"https://uploads.platformos.dev/instances/85/assets/modules/graphql/filter-types.js?updated=1726477978","modules/graphql/line-link.js":"https://uploads.platformos.dev/instances/85/assets/modules/graphql/line-link.js?updated=1726477978","modules/graphql/images/header-bg.svg":"https://uploads.platformos.dev/instances/85/assets/modules/graphql/images/header-bg.svg?updated=1726477978"}
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.