DEV Community 👩‍💻👨‍💻

Cover image for Pure Liquid, a starter kit for static websites with Liquid template
Kazuki Yonemoto
Kazuki Yonemoto

Posted on

Pure Liquid, a starter kit for static websites with Liquid template

There are a lot of template engines for static websites and dynamic websites. It takes time to learn a new template engine, especially for junior developers.

I wanted to standardize using the same template engine picked from Pug, EJS, Liquid, and so on in the project team to solve the issue.

It's been increased to build e-commerce sites with Shopify recently in my team. Shopify adopts Liquid as a template engine for theme development and introduces it to third-party developers.

Liquid is a template language created by Shopify, but you actually can leverage it to develop other products than Shopify.

For example, it might be more productive that you could develop a static website with Liquid if you usually build e-commerce sites with Shopify.

I made a starter kit for static websites and Jamstack with the liquid template from the above point of view.

Pure Liquid

The name of starter kit is "Pure Liquid".
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.

💧 Pure Liquid

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

Requirements

You need to follow these requirements below. I recommend you to use Yarn as a package manager.

Quick overview

You can set up a static website by running one command.
Please replace <YOUR-PROJECT-NAME> with your own.

yarn create pure-liquid <YOUR-PROJECT-NAME>
Enter fullscreen mode Exit fullscreen mode

You are ready to develop, so follow the below commands to start.

cd <YOUR-PROJECT-NAME> && yarn build && yarn start
Enter fullscreen mode Exit fullscreen mode

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

Image description

Thank you!

I appreciate you for reading this article through to the end.
I'll be trying to keep this starter kit as up-to-date as possible. Cheers!

Top comments (0)

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠