Welcome to the Liquid party—where Shopify’s templating magic comes to life, and we’re about to have some serious fun. Liquid is a Ruby-powered, open-source language that’s all about making dynamic content a breeze, whether you’re crafting a blog with Jekyll or a slick Shopify store. Think of it as the friendly middleman between your raw data—like titles and tags—and a polished webpage, without any scary server-side shenanigans.
Picture this: we’re going to play with 10 dummy Markdown files in a Jekyll project, each packed with front matter goodies like title, author, category, tags, status, publish-date, and edited-date. These aren’t just random files—they’re your ticket to seeing Liquid strut its stuff, turning basic blog posts into a living, breathing site. No Ruby wizardry required yet—just a curiosity to tinker and a willingness to roll with me. By the end of this ride, you’ll go from “What’s Liquid?” to “Whoa, I built that!”—so let’s dive in and get this party started!
Step 2: Setting the Stage: Our Jekyll Playground
Now that you’ve got a taste of what Liquid’s all about, let’s set up our sandbox: a Jekyll project where we’ll make some magic happen. If you’re new to this, don’t sweat it—Jekyll is a static site generator, which is just a fancy way of saying it takes your Markdown files (think simple text with a sprinkle of structure) and spits out a ready-to-go website.
Liquid’s the secret sauce that ties it all together, and we’re going to poke around with it using 10 dummy Markdown files. Imagine a little blog with posts like “Why Cats Rule” or “Ruby Hacks for Newbies”—each one’s got some metadata up top, and that’s where the fun begins! Let’s peek at one of these files—here’s a sample to get us rolling:
---
title: "Why Cats Rule"
author: "RubyCat"
category: "Pets"
tags: ["cats", "humor"]
status: "published"
publish-date: "2025-02-01"
edited-date: "2025-02-20"
excerpt: "A purrfect tale of feline supremacy."
layout: "post"
---
Cats are the best. Period.
That chunk at the top? That’s called frontmatter it’s like a cheat sheet telling Jekyll and Liquid what this post is about. We’ve got title, author, category, tags, and more, all neatly tucked between those triple dashes. Our 10 files will follow this vibe, each with their own personality—maybe one’s a tech tutorial, another’s a rant about coffee. By the end of this journey, we’ll use Liquid to whip these into a slick blog page. No pressure, no rush—just a chill setup to play with. Ready to pop the hood and see what’s next? Stick with me, and we’ll turn this playground into something epic!
Step 3: Liquid Basics: Variables and Outputs
Alright Jekyll trailblazer, welcome to your first real taste of Liquid—it’s time to make stuff show up on the screen! You’ve got your Jekyll playground set up with those 10 Markdown files, each with front matter like title, author, and publish-date. Now, let’s use Liquid to pluck those goodies out and display them. Think of Liquid as your friendly assistant who says, “Hey, you want that title on the page? I’ve got you!”. The simplest trick in its toolbox is the double curly braces—{{ }}—and trust me, it’s easier than it sounds.
Let’s try it: imagine we’re in a file called _layouts/post.html, which is like a blueprint for how every blog post should look. Drop this little gem in there: {{ page.title }}. Boom—if you’re looking at our “Why Cats Rule” post, that’ll spit out “Why Cats Rule” right on the page. Want the author? Toss in {{ page.author }}, and “RubyCat” pops up. How about the date? {{ page.publish-date }} gives you “2025-02-01”. In Jekyll, page is the magic word that grabs whatever’s in your front matter—like a treasure chest Liquid can rummage through. Stick this in your layout:
<h1>{{ page.title }}</h1>
<p>By {{ page.author }} on {{ page.publish-date }}</p>
Run Jekyll, and you’ll see a header saying “Why Cats Rule” followed by “By RubyCat on 2025-02-01”. No coding degree needed—just curly braces and a sprinkle of curiosity! This is Liquid’s bread and butter: outputting variables straight from your Markdown files. Feeling the power yet? Hang tight, because we’re just warming up—next, we’ll jazz these up even more. You’re already coding, and it’s barely been a minute—how cool is that?
Step 4: Filters: Jazzing Up Your Data
Hey, you’re doing awesome—now that you’ve got the hang of spitting out variables with {{ }}, let’s crank it up a notch with Liquid filters! Imagine filters as little style brushes for your data—like adding a fancy frame to a photo or tweaking the lighting just right. They’re super easy to use: you tack them onto a variable with a pipe symbol (|), and bam, your text gets a makeover. As a Shopify Rubyist, I’ve seen filters turn boring outputs into eye-catching gems, and you’re about to do the same with our Jekyll blog posts. Ready to play?
Let’s start with that publish-date from our “Why Cats Rule” post—it’s sitting there as “2025-02-01”, which is fine but kinda robotic. Add a filter like this: {{ page.publish-date | date: "%B %d, %Y" }}. Run it, and voilà—it’s now “February 01, 2025”—way more human-friendly! The date filter is a newbie’s best friend, and that "%B %d, %Y" part? It’s just telling Liquid how to format it (think month, day, year). Want to get playful? Try {{ page.title | upcase }}—suddenly, “Why Cats Rule” becomes “WHY CATS RULE”, perfect for grabbing attention. Here’s a quick combo in your _layouts/post.html:
<h1>{{ page.title | upcase }}</h1>
<p>
By {{ page.author }} - Posted on {{ page.publish-date | date: "%B %d, %Y" }}
</p>
Load that up, and you’ll see “WHY CATS RULE” with “By RubyCat - Posted on February 01, 2025” underneath—polished and popping! Filters are like seasoning for your data—sprinkle them in, and everything tastes better. Stick with me, because soon we’ll loop through those tags like “cats” and “humor” and make them dance too. You’re turning raw front matter into a masterpiece—how’s that feel, Liquid rookie?
Step 5: Loops and Logic: Making Liquid Think
Hey there budding Liquid maestro, you’ve nailed variables and jazzed them up with filters—now it’s time to give Liquid a brain with loops and logic. So far, we’ve been showing stuff one at a time, but what if you want to handle a list—like those tags in our “Why Cats Rule” post—or make decisions like “only show this if it’s published”? That’s where Liquid’s {% raw %}{% %}{% endraw %} tags come in, and trust me, they’re as fun as they sound. As a Shopify Rubyist, I’ve used these to whip up dynamic goodies, and you’re about to do the same in our Jekyll playground. Let’s get thinking!
First up, loops—perfect for those tags: ["cats", "humor"]. Pop this into your _layouts/post.html:
{% raw %}{% for tag in page.tags %}{% endraw %}
{{ tag }}
{% raw %}{% unless forloop.last %},{% endraw %}
{% raw %}{% endunless %}{% endraw %}
{% raw %}{% endfor %}{% endraw %}
What’s happening? The {% raw %}{% for %}{% endraw %} tag tells Liquid to loop through each tag in page.tags. It spits out “cats” and “humor”, and that {% raw %}{% unless forloop.last %}{% endraw %} bit? It sneaky-adds a comma between tags but skips it at the end—outputting “cats, humor”. Clean, right? Now, let’s add some logic with an if statement: {% raw %}{% if page.status == "published" %}Live!{% endif %}{% endfor %}. If status is “published” (like in our dummy file), you’ll see “Live!”—otherwise, nada. Combine them in your layout:
<h1>{{ page.title }}</h1>
<p>
By {{ page.author }} - {% raw %}{% if page.status == "published" %}Live!{% endif %}{% endraw %}
</p>
<p>
Tags: {% raw %}{% for tag in page.tags %}{% endraw %}
{{ tag }}
{% raw %}{% unless forloop.last %},{% endraw %}
{% raw %}{% endunless %}{% endraw %}
{% raw %}{% endfor %}{% endraw %}
</p>
Run it on “Why Cats Rule”, and you’ll get a header, “By RubyCat - Live!”, and “Tags: cats, humor”. Feeling clever yet? Here’s a bonus: in a blog index, you could loop all 10 posts with {% raw %}{% for post in site.posts %}{% endraw %}—we’ll tackle that soon. For now, pat yourself on the back—you’re bending Liquid to your will, and it’s starting to think like a pro. How’s that for a power-up, newbie?
Step 6: Intermediate Vibes: Building a Blog Index
Hey there, Liquid newbie-turned-champ! You’ve conquered variables, filters, and loops—now it’s time to flex those skills and build something seriously cool: a blog index page for our 10 dummy Jekyll posts. Imagine a clean, stylish list showing off titles like “Why Cats Rule” and “Ruby Hacks for Newbies”, with their dates and categories right beside them.
This is where all your Liquid practice comes together, and as a true by heart Rubyist who’s been tinkering with Jekyll forever, I’m here to make it feel like a breeze. Ready to go from playing with one post to running the whole blog show? Let’s do this!
Create a file called index.html or index.md in your Jekyll project’s root folder and pop this code in:
<h1>My Awesome Blog</h1>
{% raw %}{% for post in site.posts %}{% endraw %}
<h2>{{ post.title }}</h2>
<p>{{ post.publish-date | date: "%B %d, %Y" }} - {{ post.category }}</p>
{% raw %}{% endfor %}{% endraw %}
Here’s the scoop: {% raw %}{% for post in site.posts %}{% endraw %} is your new best friend—it loops through every Markdown file in your project that has layout: post in its front matter (yep, that’s all 10 of ours!).
For each one, post.title pulls the title, post.publish-date | date: "%B %d, %Y" transforms those boring “2025-02-01” dates into “February 01, 2025”, and post.category tags on the vibe—like “Pets” or “Tech”. Fire up Jekyll, hit your browser, and you’ll see a sweet list like:
Why Cats Rule
February 01, 2025 - PetsRuby Hacks for Newbies
February 15, 2025 - Tech
And it keeps going for all 10 posts—no copying and pasting, just Liquid working its magic. You’ve just built a real-deal blog index, and it’s all automatic! Look at you, rocking those intermediate vibes—next, we’ll tweak this even further, but for now, soak it in: you’re a site-building wizard already, and it’s only getting better from here!
Step 7: Advanced Mode: Sorting, Filtering, and Pagination
Hey, Liquid hotshot—you’ve built a blog index that’s already turning heads, but now it’s time to kick it into advanced mode! We’re talking sorting posts by date, filtering them by category, and even splitting them across pages like a pro.
This is where you go from “I’ve got a blog” to “I’ve got a smart blog,” and as a true by heart Rubyist who’s wrestled with Liquid and Jekyll for years, I’ll walk you through it step-by-step. No panic needed—you’ve got the basics down, and this is just adding some fancy polish. Ready to impress yourself? Let’s dive into our 10-post Jekyll playground and crank it up!
First, sorting—say you want the newest posts first. Tweak your index.html like this:
<h1>My Awesome Blog</h1>
{% raw %}{% for post in site.posts | sort: "publish-date" | reverse %}{% endraw %}
<h2>{{ post.title }}</h2>
<p>{{ post.publish-date | date: "%B %d, %Y" }} - {{ post.category }}</p>
{% raw %}{% endfor %}{% endraw %}
That | sort: "publish-date" | reverse combo tells Liquid to order posts by publish-date and flip it so the latest (like “February 15, 2025”) hits the top. Next, filtering—let’s say you only want “Pets” posts. Try this:
{% raw %}{% assign pet_posts = site.posts | where: "category", "Pets" %}{% endraw %}
<h1>Pet Posts</h1>
{% raw %}{% for post in pet_posts %}{% endraw %}
<h2>{{ post.title }}</h2>
<p>{{ post.publish-date | date: "%B %d, %Y" }}</p>
{% raw %}{% endfor %}{% endraw %}
The | where: "category", "Pets" filter grabs just the posts with category: "Pets", like “Why Cats Rule,” and {% raw %}{% assign %}{% endraw %} stores them in pet_posts for looping. Output? A tidy “Pet Posts” section—pretty slick, right? Now, pagination—splitting 10 posts across pages (say, 5 per page). Add this to index.html (after setting paginate: 5 in _config.yml):
<h1>My Awesome Blog</h1>
{% raw %}{% for post in paginator.posts %}{% endraw %}
<h2>{{ post.title }}</h2>
<p>{{ post.publish-date | date: "%B %d, %Y" }} - {{ post.category }}</p>
{% raw %}{% endfor %}{% endraw %}
<p><a href="{{ paginator.next_page_path }}">Next</a></p>
Here, paginator.posts limits it to 5 posts per page, and paginator.next_page_path links to the next batch—Jekyll handles the splitting for you! You’ll see 5 posts, click “Next,” and get the rest. You’re now sorting, filtering, and paginating like a boss—total advanced vibes! Want more? Check the Liquid docs. How’s it feel to be this powerful, newbie-turned-pro?
Step 8: Wrap-Up: You’re a Liquid Rockstar Now
Holy smokes, look at you—Liquid rockstar extraordinaire! You’ve trekked from “What’s this Liquid thing?” to building a full-on Jekyll blog with sorting, filtering, and pagination, all with our 10 dummy posts as your trusty sidekicks. We started with simple {{ page.title }} tricks, jazzed things up with filters, looped like champs, and now you’re wielding advanced moves that’d make any Rubyist proud.
I’ve been geeking out with Liquid and Jekyll for sometimes, and seeing you nail this step-by-step? Pure joy. Give yourself a high-five—you’ve earned it, newbie no more! So, what’s next for your Liquid powers? Keep tweaking that Jekyll site—maybe add a tag cloud or a search bar—or dip your toes into Shopify themes for some e-commerce flair. The Liquid docs are your playground now, packed with more goodies to explore. Want a final keepsake? Here’s a polished _layouts/post.html for a single post:
<h1>{{ page.title | upcase }}</h1>
<p>By {{ page.author }} - {{ page.publish-date | date: "%B %d, %Y" }}</p>
<p>Tags: {% raw %}{% for tag in page.tags %}{{ tag }}{% unless forloop.last %},{% endraw %}
{% raw %}{% endunless %}{% endraw %}
{% raw %}{% endfor %}{% endraw %}
</p>
{{ content }}
And your index.html blog list? It’s already a masterpiece from Step 7! You’ve gone from zero to hero, building something real and awesome. So go forth, experiment, and strut your stuff—you’re a Liquid wizard now, and the web’s your stage. How’s it feel to rock this hard?
Top comments (0)