Jigsaw — an honest review
Jigsaw is a new tool designed for generating static websites with blade templates, here’s an honest review of this piece of software.
Fun fact, my blog is built on top of Jigsaw, so all my experience with it is well documented on this GitHub repo!
Use Cases
So, Jigsaw is a fantastic tool to develop static website, but what are main usecases for a static website?
1. Portfolio Websites
Most professionals use portfolio websites to show off their work and sell themselves to companies. As an example, this website has a portfolio section called “Projects”.
2. Databaseless Blogs
It’s quite easy to develop a blog using a static website generator such as Jigsaw, create a collection of posts and categories, link them together, and start writing down markdowns of them. A markdown will be translated to an actual blog post.
3. Simple company websites
Most companies don’t need a fancy website running on some weird backends, all they need is just a static generated website, as they will just showcase their services and products while having a simple contact form (that you can insert with Typeform)
You can find even more examples at Built with Jigsaw Website.
I’ve been tinkering with Jigsaw for the whole weekend developing this website and getting rid of the mess that my WordPress installation was, and it took me literally one day to get a blog site up and running with Jigsaw, and especially with a nice UI that WordPress couldn’t give me out of the box (or without learning how to develop WP Themes).
Being based on Laravel Mix and Blade templates, jigsaw’s learning curve is extremely flat, especially if you come from experience with Laravel, and comes with a set of pre-made templates you can start off with.
Everything is extremely customizable, being all the templates based on Tailwind CSS, hence any modification can be added with ease.
Everything was ready out of the box to work properly in production, with little to none configuration (you’d just need to setup the base path for your url rewrites in the config.production.php file).
The main hassle was developing a GitHub workflows to deploy it properly, and now it works in this way:
- Commit & push to main branch your changes
- a on-push hook will trigger the deployment workflow
- the workflow will build the website for production and change the directory from
build_productiontodocswhich is the supported folder that Github allows - will commit everything and push to the live branch (literally a branch named live)
GitHub is expecting a docs folder in the live branch to be used for the site hosting, hence it just works out.
Also, is important to generate the CNAME file so that Github will not erase your custom domain settings at each deployment.
Summing up, this weekend working with Jigsaw was a pleasure, and I strongly suggest anyone thinking about building a simple website to try it out!
Files required to deploy on GitHub Pages
CNAME file
/source/CNAME.blade.php
---
permalink: CNAME
---
italianprogrammer.pizzaWorkflow file
/.github/workflows/build-docs.yml
on:
push:
branches:
- 'main'
name: deploy
jobs:
build:
runs-on: ubuntu-latest steps:
- uses: actions/checkout@v1
with:
fetch-depth: 1 - name: Setup PHP Action
uses: shivammathur/setup-php@2.17.0 - uses: actions/setup-node@v2
with:
node-version: '16' - name: Install dependencies
run: |
sudo apt update && sudo apt install git zip unzip -y
git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com"
git config --global user.name "GitHubActions BOT"
composer update --no-ansi --no-interaction --no-scripts --no-progress --prefer-dist
composer install --no-ansi --no-interaction --no-scripts --no-progress --prefer-dist
npm install - name: Build the site
run: npm run prod - name: deploy
run: |
if [ -d "./docs" ]; then rm -Rf ./docs; fi
mv ./build_production ./docs
git add ./docs
git commit -m "Deployment of website - $(date)" - name: Push changes
uses: ad-m/github-push-action@master
with:
github_token: ${{ secrets.DEPLOY_SECRET }}
branch: live
force: true
