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
1 2 3 | $ mkdir my-site && cd my-site $ composer require tightenco/jigsaw |
Done, we run the following command to proceed to create the directory structure of Jigsaw
1 2 | $ ./vendor/bin/jigsaw init |
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
1 2 | $ ./vendor/bin/jigsaw build |
Or for production environments
1 2 | $ ./vendor/bin/jigsaw build production |
We can then run the following command to conduct tracking of our products
1 2 | $ ./vendor/bin/jigsaw serve |
In case we use Laravel Mix to compile
1 2 | $ npm install && npm run watch |
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
1 2 3 4 5 6 7 8 | <span class="token comment">// Example config.php</span> <span class="token keyword">return</span> <span class="token punctuation">[</span> <span class="token single-quoted-string string">'production'</span> <span class="token operator">=</span> <span class="token operator">></span> <span class="token boolean">false</span> <span class="token punctuation">,</span> <span class="token single-quoted-string string">'baseUrl'</span> <span class="token operator">=</span> <span class="token operator">></span> <span class="token single-quoted-string string">''</span> <span class="token punctuation">,</span> <span class="token single-quoted-string string">'collections'</span> <span class="token operator">=</span> <span class="token operator">></span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token single-quoted-string string">'titleWeb'</span> <span class="token operator">=</span> <span class="token operator">></span> <span class="token single-quoted-string string">'Sun Asterisk VN'</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> |
1 2 3 4 5 | <span class="token comment">// Example config.production.php</span> <span class="token keyword">return</span> <span class="token punctuation">[</span> <span class="token single-quoted-string string">'production'</span> <span class="token operator">=</span> <span class="token operator">></span> <span class="token boolean">true</span> <span class="token punctuation">,</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> |
We can call these variables in Blade Template Engine (Will be introduced shortly below ) in the following syntax:
1 2 3 4 5 6 7 | @ <span class="token function">section</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'body'</span> <span class="token punctuation">)</span> <span class="token operator"><</span> h1 <span class="token operator">></span> Post Example <span class="token operator"><</span> <span class="token operator">/</span> h1 <span class="token operator">></span> <span class="token operator"><</span> p <span class="token operator">></span> <span class="token punctuation">{</span> <span class="token punctuation">{</span> <span class="token variable">$page</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token property">titleWeb</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> p <span class="token operator">></span> @endsection |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token operator"><</span> <span class="token operator">!</span> <span class="token constant">DOCTYPE</span> html <span class="token operator">></span> <span class="token operator"><</span> html lang <span class="token operator">=</span> <span class="token double-quoted-string string">"en"</span> <span class="token operator">></span> <span class="token operator"><</span> head <span class="token operator">></span> <span class="token operator"><</span> meta charset <span class="token operator">=</span> <span class="token double-quoted-string string">"utf-8"</span> <span class="token operator">></span> <span class="token operator"><</span> meta name <span class="token operator">=</span> <span class="token double-quoted-string string">"viewport"</span> content <span class="token operator">=</span> <span class="token double-quoted-string string">"width=device-width, initial-scale=1, shrink-to-fit=no"</span> <span class="token operator">></span> <span class="token operator"><</span> meta http <span class="token operator">-</span> equiv <span class="token operator">=</span> <span class="token double-quoted-string string">"x-ua-compatible"</span> content <span class="token operator">=</span> <span class="token double-quoted-string string">"ie=edge"</span> <span class="token operator">></span> <span class="token operator"><</span> link rel <span class="token operator">=</span> <span class="token double-quoted-string string">"stylesheet"</span> href <span class="token operator">=</span> <span class="token double-quoted-string string">"{{ mix('css/main.css', 'assets/build') }}"</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> head <span class="token operator">></span> <span class="token operator"><</span> body <span class="token operator">></span> @ <span class="token keyword">yield</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'body'</span> <span class="token punctuation">)</span> <span class="token operator"><</span> <span class="token operator">/</span> body <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> html <span class="token operator">></span> |
Next is a content file that will inherit from master.blade.php
as when we code View in Laravel
1 2 3 4 5 6 7 8 9 | <span class="token shell-comment comment"># File : post.blade.php</span> @ <span class="token keyword">extends</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'_layouts.master'</span> <span class="token punctuation">)</span> @ <span class="token function">section</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'body'</span> <span class="token punctuation">)</span> <span class="token operator"><</span> h1 <span class="token operator">></span> Post Example <span class="token operator"><</span> <span class="token operator">/</span> h1 <span class="token operator">></span> <span class="token operator"><</span> p <span class="token operator">></span> <span class="token punctuation">{</span> <span class="token punctuation">{</span> <span class="token variable">$page</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token property">titleWeb</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> p <span class="token operator">></span> @endsection |
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
1 2 3 4 5 | $page->getPath() : trả về đường dẫn trang hiện tại từ thư mục gốc $page->getUrl() : trả về URL đầy đủ nếu baseUrl được cấu hình trong config.php $page->getFilename() : trả về tên tệp của trang, không có phần mở rộng $page->getExtension() : trả về phần mở rộng của trang hiện tại |
And a file Markdown content.md
(note that we changed the extends section with the section corresponding to the project directory)
1 2 3 4 5 6 7 8 | --- extends: _layouts.master section: body --- ### Sun Asterisk https://sunasterisk.vn ![Sun Logo](https://image.bnews.vn/MediaUpload/Content/2019/03/04/151429_01.png) |
Proceed to compile
1 2 | $ ./vendor/bin/jigsaw build |
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)
1 2 3 | # Ex : _partials/header.blade.php <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> h1</span> <span class="token punctuation">></span></span> Header Content <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> h1</span> <span class="token punctuation">></span></span> |
Next to master.blade.php
I revised it as follows
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token operator"><</span> <span class="token operator">!</span> <span class="token constant">DOCTYPE</span> html <span class="token operator">></span> <span class="token operator"><</span> html lang <span class="token operator">=</span> <span class="token double-quoted-string string">"en"</span> <span class="token operator">></span> <span class="token operator"><</span> head <span class="token operator">></span> <span class="token operator"><</span> meta charset <span class="token operator">=</span> <span class="token double-quoted-string string">"utf-8"</span> <span class="token operator">></span> <span class="token operator"><</span> meta name <span class="token operator">=</span> <span class="token double-quoted-string string">"viewport"</span> content <span class="token operator">=</span> <span class="token double-quoted-string string">"width=device-width, initial-scale=1, shrink-to-fit=no"</span> <span class="token operator">></span> <span class="token operator"><</span> meta http <span class="token operator">-</span> equiv <span class="token operator">=</span> <span class="token double-quoted-string string">"x-ua-compatible"</span> content <span class="token operator">=</span> <span class="token double-quoted-string string">"ie=edge"</span> <span class="token operator">></span> <span class="token operator"><</span> link rel <span class="token operator">=</span> <span class="token double-quoted-string string">"stylesheet"</span> href <span class="token operator">=</span> <span class="token double-quoted-string string">"{{ mix('css/main.css', 'assets/build') }}"</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> head <span class="token operator">></span> <span class="token operator"><</span> body <span class="token operator">></span> @ <span class="token keyword">include</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'_partials.header'</span> <span class="token punctuation">)</span> <span class="token comment">// hoặc @include('_partials.header', ['page_title' => 'My Website'])</span> <span class="token comment">// Nếu mình muốn truyền các biến qua bên header, khi đó trang header mình sẽ gọi $nameVar tương ứng</span> @ <span class="token keyword">yield</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'body'</span> <span class="token punctuation">)</span> <span class="token operator"><</span> <span class="token operator">/</span> body <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> html <span class="token operator">></span> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">return</span> <span class="token punctuation">[</span> <span class="token single-quoted-string string">'production'</span> <span class="token operator">=</span> <span class="token operator">></span> <span class="token boolean">false</span> <span class="token punctuation">,</span> <span class="token single-quoted-string string">'baseUrl'</span> <span class="token operator">=</span> <span class="token operator">></span> <span class="token single-quoted-string string">''</span> <span class="token punctuation">,</span> <span class="token single-quoted-string string">'collections'</span> <span class="token operator">=</span> <span class="token operator">></span> <span class="token punctuation">[</span> <span class="token single-quoted-string string">'reddit'</span> <span class="token operator">=</span> <span class="token operator">></span> <span class="token punctuation">[</span> <span class="token single-quoted-string string">'extends'</span> <span class="token operator">=</span> <span class="token operator">></span> <span class="token single-quoted-string string">'_layouts.reddit'</span> <span class="token punctuation">,</span> <span class="token single-quoted-string string">'items'</span> <span class="token operator">=</span> <span class="token operator">></span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token variable">$posts</span> <span class="token operator">=</span> <span class="token function">json_decode</span> <span class="token punctuation">(</span> <span class="token function">file_get_contents</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'https://www.reddit.com/r/aww.json?raw_json=1'</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token function">collect</span> <span class="token punctuation">(</span> <span class="token variable">$posts</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token property">data</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token property">children</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">map</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token variable">$post</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">[</span> <span class="token single-quoted-string string">'id'</span> <span class="token operator">=</span> <span class="token operator">></span> <span class="token variable">$post</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token property">data</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token property">id</span> <span class="token punctuation">,</span> <span class="token single-quoted-string string">'title'</span> <span class="token operator">=</span> <span class="token operator">></span> <span class="token variable">$post</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token property">data</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token property">title</span> <span class="token punctuation">,</span> <span class="token single-quoted-string string">'thumbnail'</span> <span class="token operator">=</span> <span class="token operator">></span> <span class="token variable">$post</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token property">data</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token property">thumbnail</span> <span class="token punctuation">,</span> <span class="token single-quoted-string string">'content'</span> <span class="token operator">=</span> <span class="token operator">></span> <span class="token double-quoted-string string">"![alt text]("</span> <span class="token punctuation">.</span> <span class="token variable">$post</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token property">data</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token property">preview</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token property">images</span> <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">]</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token property">source</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token property">url</span> <span class="token punctuation">.</span> <span class="token double-quoted-string string">")"</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> </span> |
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
1 2 3 4 5 6 7 8 9 10 11 12 | @ <span class="token keyword">extends</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'_layouts.master'</span> <span class="token punctuation">)</span> @ <span class="token function">section</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'body'</span> <span class="token punctuation">)</span> <span class="token operator"><</span> h1 <span class="token operator">></span> Post Example <span class="token operator"><</span> <span class="token operator">/</span> h1 <span class="token operator">></span> <span class="token operator"><</span> p <span class="token operator">></span> <span class="token operator"><</span> ul <span class="token operator">></span> @ <span class="token keyword">foreach</span> <span class="token punctuation">(</span> <span class="token variable">$reddit</span> <span class="token keyword">as</span> <span class="token variable">$post</span> <span class="token punctuation">)</span> <span class="token operator"><</span> li <span class="token operator">></span> <span class="token operator"><</span> a href <span class="token operator">=</span> <span class="token double-quoted-string string">"{{ <span class="token interpolation"><span class="token variable">$post</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token property">getUrl</span></span> () }}"</span> <span class="token operator">></span> <span class="token punctuation">{</span> <span class="token punctuation">{</span> <span class="token variable">$post</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token property">title</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> a <span class="token operator">></span> @ <span class="token keyword">endforeach</span> <span class="token operator"><</span> <span class="token operator">/</span> ul <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> p <span class="token operator">></span> @endsection |
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!