Jigsaw is a Laravel-based static site generator.
Normally, to get it running, you'd need to have Composer and Node (and other requisite tooling) installed on your system.
But now you can just run it all in a Docker container! No need to worry about outdated versions, etc., when you come back to this project later.
This image is based on the Composer docker image. It includes a fresh install of Node from the Alpine APK repository, as Jigsaw's PHP and Gulp scripts are tightly coupled. (Also, since node-sass seems to need to be rebuilt from source every time we npm install
, the container also includes Alpine's build-base
meta-package. It increases the size of the image significantly, unfortunately. Hopefully it won't be necessary in the future.)
All the docker-compose files here assume your app lives in the current working directory. You can change that if you'd like.
If you don't already have a Jigsaw project up and running, all you have to do is clone this repository, cd
into the directory, and run:
docker-compose -f init.docker-compose.yml up
You'll see two containers run:
jigsaw init
runs in the first container, creating a new Jigsaw projectnpm install
runs in the second
node_modules
is a volume that defaults to the current working directory. You can relocate it to an anonymous volume, if you'd like, but I usually find it useful to keep node_modules
in my working directory.
Note: If you'd rather use the Node and NPM that exists locally on your Docker host, you can, but you'll have to do npm install
on your host machine, not inside the container, since NPM installs platform-specific binaries (e.g. node-sass). You'd also have to modify the watch script to call your docker container, rather than the local jigsaw
command.
docker-compose up
Runs a jigsaw build local
so we're sure we're working with your latest changes, and then gulp watch
, which kicks off BrowserSync at localhost:3000
. Your site is automatically rebuilt with each change, and dropped into the build_local
directory.
๐ฅ Hot tip: BrowserSync sometimes refreshes before the server is actually ready to rumble, resulting in a very annoying Cannot GET /
message in your browser. You can mitigate this by setting reloadDelay
in your BrowserSync config (in the Gulpfile):
.browserSync({
port: port,
server: { baseDir: 'build_' + env },
proxy: null,
files: [ 'build_' + env + '/**/*' ],
reloadDelay: 100
});
When you're ready to build your assets for production, run the two services in prod.docker-compose.yml
separately, so our assets build before Jigsaw copies them over.
docker-compose -f prod.docker-compose.yml up jigsaw_build_assets && \
docker-compose -f prod.docker-compose.yml up jigsaw_build_site
This builds your site in the build_production
directory.
You can then deploy the static assets however you wish. Since it's just a directory with simple HTML, CSS, and Javascript, you can host it anywhere.