Why do we use jigsaw?

Edit (2024)

While we previously advocated for Jigsaw and have appreciated its capabilities, we've since transitioned to other solutions that better align with our evolving needs. In the spirit of transparency and continual learning amidst the ever-changing tech landscape, we have opted to retain this article in our blog's history. It serves as a reflection of our growth and adaptability.

The Ultimate Framework for Static Site Generation

In the world of web development, static sites are making a strong comeback, offering unmatched speed, security, and simplicity. Among the tools that empower developers to craft these sites, Jigsaw stands out as a robust framework. It's akin to Laravel in its architecture, boasting integrated Blade templating for a seamless development experience. If you are familiar with Laravel and have harnessed the power of Blade templates, you'll find Jigsaw's integration a natural extension of your skill set.

Why Choose Jigsaw for Your Static Site Development?

The allure of static sites lies in their straightforward nature, which translates to faster load times, enhanced security, and ease of deployment. Jigsaw leverages this by providing a streamlined workflow for developers who seek the efficiency of static sites without sacrificing the power of modern tools like Blade, TailwindCSS, and VueJS.

Getting Started with Jigsaw

Embarking on your Jigsaw journey is as simple as executing a single command through Composer, the PHP dependency manager:

composer require tightenco/jigsaw

With this command, you're now ready to dive into crafting your static site, choosing the tools and technologies that align with your project's needs.

Leveraging Markdown for Content Creation

Jigsaw empowers you to create content-rich sites using Markdown, a lightweight markup language that's become the de facto standard for writing web content. Its intuitive syntax simplifies the process of building articles, blogs, posts, or documentation pages. For those new to Markdown, resources such as a Markdown Cheatsheet on GitHub can be invaluable in mastering the syntax, from headers (# Heading1) to emphasis (*italic* and **bold**).

Building and Structuring Your Site with Jigsaw

Once Jigsaw is installed, you can enhance your site with other technologies like Tailwind CSS for styling and VueJS for interactive components. The process involves setting up a master layout, including header and footer, and customizing Tailwind configurations to match your design aesthetic.

As you construct new pages, you link them to your master layout, ensuring a consistent look and feel across your site. Specialized content such as blog posts or project portfolios can be organized into dedicated folders, populated with Markdown (.md) files. Each of these files contains not just written content but also metadata like titles, dates, images, social media links, and tags.

Designing with Blade Templates

For each content type, you can craft a unique Blade template in Jigsaw. This allows you to access and structure the data from your Markdown files in a way that's both efficient and visually appealing. By using a single Blade template for a content section, like projects, every individual item maintains a cohesive design while displaying its unique content.

Optimizing with Purge CSS

To ensure your site is as lean as possible, Jigsaw integrates with tools like Purge CSS, which strips away unused CSS code. This results in a lighter, faster-loading site that still looks great and functions flawlessly.

Compiling and Deploying Your Static Site

After designing and populating your site, the final step is to compile the code. Jigsaw swiftly transforms your work into a fully functional static site, ready for deployment to your chosen hosting platform.

Exploring Alternatives to Jigsaw

While Jigsaw is a fantastic choice for many developers, it's worth noting that alternatives like Sculpin, Couscous, Spress, Yellow, and Carew exist. However, Jigsaw's alignment with Laravel's technology stack often makes it the preferred choice for those familiar with the Laravel ecosystem.

Conclusion

Jigsaw, combined with Tailwind CSS and VueJS, forms a powerful trio that can significantly accelerate the development of static sites. By adopting these tools, developers can enjoy a shallow learning curve and focus on creating exceptional web experiences.

This article is part of the "Which technologies do we use and why?" series where we explain the technologies that we use daily.

Bring Your Ideas to Life 🚀

If you need help with a Laravel project let's get in touch.

Lucky Media is proud to be recognized as a Top Laravel Development Agency