Create static website with Jigsaw

Foreword

Today I would like to share about 1 tool that helps us create static websites in a flexible way . In times of technological change, a lot of tools are created for the purpose of programming people. For static website creation a lot of framework support such as Nuxt, Hugo, Jigsaw. The scope of this article I would like to talk about Jigsaw – A tool I find quite neat and the syntax is easy to understand especially for anyone who has worked through Laravel. Start: d

Setting

With Jigsaw we can install it via the composer with the following command

Done, we run the following command to proceed to create the directory structure of Jigsaw

After the directory structure has been created, we will work mainly in the source directory

Compile and configure

Conducting a build on a static site we can run the following command from the project’s root directory

Or for production environments

We can then run the following command to conduct tracking of our products

In case we use Laravel Mix to compile

By default the Laravel Mix feature in jigsaw will mix js css files from source/_assets to source/assets/build to fix these paths we will find webpack.mix.js file

Jigsaw also supports us to configure environment variables in the config.php file, in addition to the variables we configure specifically for production, we will create a config.production.php file, in which we only need to configure the A variable that changes the nature of jigsaw will automatically include all environment variables in the two files and will override the variables declared in config.production.php

We can call these variables in Blade Template Engine (Will be introduced shortly below ) in the following syntax:

Create content

Jigsaw supports compilation from the Markdown file and the Blade Template engine, which is very convenient for creating content, with anyone who has used Laravel, it is not strange. First of all we will have a master.blade.php file in the source/_layouts directory

Next is a content file that will inherit from master.blade.php as when we code View in Laravel

Note:

$ Page variable on default from Jigsaw, in the example above we see it accesses the titleWeb property from config.php file Also we can call some of the following methods from $ page

And a file Markdown content.md (note that we changed the extends section with the section corresponding to the project directory)

Proceed to compile

We will see that a build_local folder appears and the blade and markdown files have been compiled into directories with the index.html file containing the content inside build_local

For a laravel learner like me, I quite like the way of writing Jigsaw content like this: d But there is a small question, in master.blade.php can use yield so that the child view can inherit. Content from master layouts. So can I use @include as in Laravel to insert Header or Footer? Sure, from a Blade engine, I think I can do it. Let’s try it: d

First I create the _partials folder and have the header.blade.php file (note that the name of the folder you guys can do, and put them in / source)

Next to master.blade.php I revised it as follows

Save it, I use npm run watch during dev so when I save it it will build for me

Working with collections

Do something more interesting, try to get the posts from a Json API on how to see: -? I edited config.blade.php as follows

Above I have a reddit item in the collections variable, here I declare extends so that it will display content according to a certain template file (in my example, this is _layouts / reddit.blade.php) and in items. I will write a function that will retrieve articles from a json file and then map them to the data fields I need: -? And finally in the template file I list the items as when making a view in laravel, using @foreach XD

And this is the result

Jigsaw also supports a lot of other functions such as paging, filtering, and sorting. My posts are missing so much, I hope you can contribute more to improve the following articles. . Hopefully with what I learn and share, you will have more great tools in your web making!

References :

https://jigsaw.tighten.co/docs/installation/