blog.md

Jigsaw to Netlify on git push

Jigsaw is a very lean static page generator and especially easy to learn for everyone familiar with Laravel and its blade templating language.

netlify.com is a fantastic host for static pages with a generous free tier and nice tooling.

One of the coolest features is Continuous Deployment: You create and preview your site locally, commit changes to your Github repo – and Netlify builds static pages with their build image.

Node, Ruby and Python have been well supported for a long time, but PHP just got first class support lately: Netlify’s Bryce Kahle updated PHP to version 7.2, improved composer usage and made sure that essential extensions like mbstring are in the base image.

Thanks to these changes, it is now super easy to have a continuous Jigsaw build that reacts to commits to your Github, Gitlab or Bitbucket repos.

Let me walk you through an example site (GitHub - minthemiddle/jigsaw-netlify-test: Jigsaw Netlify CD Test):

Install Jigsaw locally.

As I have had problems installing Jigsaw globally, I always install it locally

• $mkdir jigsaw-netlify-test
• cd jigsaw-netlify-test
• composer require tightenco/jigsaw
• ./vendor/bin/jigsaw init

Set up Git

• Put your project folder in a git repo via git init
• Create a repo in Github/Bitbucket/Gitlab and add remote repo locally
• Create your first commit: git commit -am “Initial commit and push it to Github: git push

Set up Netlify page

• Log into your Netlify account and create New site from Git
• Select the repo that you just generated

Create deployment script

Netlify needs to know how to build your site. You can tell it by creating a netlify.toml config file:

https://gist.github.com/8c1bd3f958e11eb0b43dd865a6726849

This will use PHP7.2, run gulp which will compile assets and build your site using Jigsaw and deploy the static page to the /build_production folder from where Netlify publishes it to the web.

Deploy

Try it out:

• Make some changes in your local Jigsaw page in the /source folder.
• Commit your changes
• Push them to your Git repo
• Select the site in Netlify and head over to Deploys where you can see your site building
• The build script will automatically install all composer requirements and build your site
• After about 4 minutes the build finishes and your site is live

Speed it up

• I found out that yarn takes about 2 minutes to install itself and all dependencies in Netlify’s image
• As I often do not need to recompile assets (from Sass or JavaScript bundles), but just change content in my Jigsaw site, I removed the package.json and use jigsaw instead of gulp
• This speeds up the whole build process to only 15 secs (down from 4 minutes)
• This is how my netlify.toml looks like

netlify.toml https://gist.github.com/62eee4e52e0186ec794d543c48704a9c