📖 Learn more about Pure Liquid

What is Pure Liquid?

Pure Liquid is a starter kit for static websites with Liquid template. Pure Liquid enables you to develop a website more effectively than before if you are a theme developer for Shopify. You can also choose the Jamstack pattern in this kit.

Features

• Built-in static site generator
• Breaking HTML smaller files with Liquid
• HTML Validation with HTML-validate
• Lint TS files with ESLint
• Lint SCSS files with Stylelint
• Format code with prettier
• Compress images
• Creating SVG sprites
• Built-in test runner with Jest and Playwright

Start your project

Get a new project up and running locally with pure-liquid CLI.

# create a new project with yarn
yarn create pure-liquid <YOUR-PROJECT-NAME>

You can skip the package install If you use CLI.
It's ready to develop, so follow the below commands to start.

cd <YOUR-PROJECT-NAME> && yarn build && yarn start

You'll see a default page when you access http://localhost:8080 .

Directory structure

Every Pure Liquid project root includes the following directories and files:

• src/* - Project source code (Liquid, TypeScript, SCSS, images etc.).
• src/_data/* - A global data folder.
• src/_includes/* - Include files will not be processed as full template files (layout, sections, snipets etc).
• src/assets/* - Assets files (TypeScript, SCSS, images, icons etc.).
• src/public/* - Unprocessed assets files (Font, favicon, OGP image etc.).
• dist/* - Compiled source code (HTML, CSS, JavaScript etc.).
• e2e/* - End-to-end testing source code.
• .config/* - Project configuration files (.eleventy.js, .postcssrc.js .pretierrc etc.).
• package.json - A project manifest.
• tsconfig.json - A TypeScript compile settings.

.
├── LICENCE
├── README.md
├── .config
├── dist
├── e2e
├── package.json
├── src
│   ├── sitemap.liquid
│   ├── 404.liquid
│   ├── _data
│   ├── _includes
│   ├── assets
│   ├── docs
│   ├── index.liquid
│   └── public
├── tsconfig.json
└── yarn.lock