Getting started with Jigsaw

There are tons of static site generators. However, Jigsaw has been catching some wind. So, what stands out with it?

• Blade templating system “just like your Laravel apps.”
• Laravel Mix, Browsersync integration. 
• Familiarity with Laravel ecosystem.

Jigsaw is a framework for rapidly building static sites using the same modern tooling that powers your web applications.

To really use all the power Jigsaw brings, you’ll need PHP 7, Node and npm installed.

Create and initialise your project: 

$ mkdir my-site
$ cd my-site
$ composer require tightenco/jigsaw
$ ./vendor/bin/jigsaw init

Once you have your site initialised, you should build and run it to check everything’s good: 

$ ./vendor/bin/jigsaw build
$ ./vendor/bin/jigsaw serve

I know, not very stylish, but the site’s up and running!

What now?

Editing templates/content is easy. Inside /source/ you’ll see your _layouts folder, where you’ll find master.blade.php.
In the root of /source/ you’ll see index.blade.php with the index page contents, so go ahead and update it.

Inside /assets/build/ (mind the missing _ at the start, more on that later) you’ll see your CSS and JS folders.

Once you’ve updated any PHP, CSS or JS files, you won’t see the changes right away. You’ll need to run jigsaw build, jigsaw serve again. That’s cool, but not very convenient.

If you want to see your changes on the fly, you should leverage the magic Jigsaw brings with Webpack and Browsersync, by running

$ npm run watch

That should spin up a server and watch changes as you go:

After you’ve made all your modifications, you can build your project by running:

$ npm run production

This will compile your assets and run jigsaw build. The build should be available in build_[environment]. In the example above, in /build_production/. That should be your public folder.

There’s lot more to it, and the documentation is pretty good. Go ahead and dive into Jigsaw.