May 27, 2020 · 4 min read · 166 views
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.
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.
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.
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.
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**
).
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.
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.
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.
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.
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.
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.
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
Technologies:
Related Posts
Stay up to date
Be updated with all news, products and tips we share!