Published:May 27, 2020
Updated: November 15, 2023
Jigsaw is a framework for rapidly building static sites. Just like Laravel, it has integrated Blade. If you have already used the power of Blade and Laravel, now you can implement Blade in Jigsaw. We have already discussed static sites, TailwindCSS and explained Blade in previous posts. You use Jigsaw for the same reasons why you decide to build static sites.
You can install Jigsaw through the Composer by running
composer require tightenco/jigsaw
That’s it, now start building your static site with the technologies you want. Jigsaw allows you to use Markdown for building articles, blogs, posts or documentation pages. Markdown’s syntax is used as a simple format for writing pages for the web. You can easily find a Markdown Cheatsheet on Github to understand the syntax of Markdown. For example, you use
# for heading 1,
## for h2,
###### for h6, italics are formed with
*word*, bold with
This is the entire process for creating static pages. After installing jigsaw, we install Tailwind CSS and VueJS. We create a master layout, header and footer. Then, we customize our Tailwind configuration if needed. We start building new pages and connect them with the layout. If we need to use blog posts, projects, services, etc, then we create a specific folder for each one of them. We start populating them with .md files and we create a design with Blade specifically for each one of them if needed.
The content of these .md files is written with Markdown syntax and we include the title, date, images, social media, tags etc, as variables. On our Blade template for these .md files we can access the data of the .md file and structure it accordingly. Thus, we have one Blade template for the projects section, but we have more than one project with each .md file. Each project has the same design, but different data. We use Purge CSS to minimize the code even more. In the end, we compile the code and the static site is ready.
There are other frameworks besides Jigsaw, like Sculpin, Couscous, Spress, Yellow, Carew etc. However, Jigsaw uses the same technologies that we use with Laravel, and this makes the learning curve more shallow. We usually use Jigsaw in a combination with Tailwind CSS and VueJS. That’s a very powerful and efficient set of tools that you can use for rapidly building static sites.
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.
At Lucky Media, we offer a range of services including website development, web application development, and mobile apps development. We specialize in Statamic, React Native, Next.js, AI and ML solutions. We also provide staff augmentation and TALL stack development services.
For more insights into our work, check out our case studies on revolutionising lead generation with AI, customized coaching site, healthcare digitization, next-level performance, lead generation and patient journey, WordPress to Statamic migration, and improving user experience. These case studies provide a glimpse into how we tailor our technology choices to meet specific client needs and deliver exceptional results.
Stay up to date
Be updated with all news, products and tips we share!