How to Setup CI/CD of Jigsaw Site to Digital Ocean Droplet Using Bitbucket Pipelines

I created a new personal resume site and decided I wanted to build a static site since it wouldn’t be frequently updated. I evaluated Nuxt, Gatsby, and a few others but settled on Jigsaw, a static site generator based on Laravel. I had never used it before and figured this would be a good learning experience while building something I needed. I was pleasantly surprised by how easy it is to use and setup, so kudos to the Tighten team for putting together such an elegant solution.

I wanted to get a CI/CD pipeline configured to handle the site’s deployment but couldn’t find any working tutorials, so I’m sharing my solution in case it helps others. I’m using Bitbucket for this since it’s a personal private repo, so I’m using Bitbucket Pipelines.

Instructions

After you enable pipelines for your project, you’ll need to configure a Pipelines Repository Variable in your project. Go to the settings tab in your repo, and then select Repository variables:

Add 3 variables:

• USER_NAME – The SSH user name you want Bitbucket to use to connect to your server.
• PRODUCTION_HOST – Your domain that Bitbucket should connect to
• FOLDER – Folder Path where the site should be deployed to

Generate an SSH key (or use your own) and add it to your server under the SSH Keys tab in Pipelines:

I generated a new key and then added it to ~/.ssh/authorized_keys for the account.

Add this YAML snippet to your bitbucket-pipelines.yml in your root. This will use PHP 7.4, install rsync, node + npm, composer, and build the production version of the site to deploy to the specified folder.

The -aVP switch for rsync is to give me verbose progress feedback so I can see what’s happening. If you don’t need the detail, switch it to -a.

image: php:7.4-fpm
pipelines:
  branches:
    master:
      - step:
          name: Jigsaw Build
          script:
            - apt-get update && apt-get install -y unzip
            - apt-get install rsync openssh-client nodejs npm -y
            - curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
            - composer install
            - npm install
            - npm run production
            - rsync -avP build_production/ $USER_NAME@$PRODUCTION_HOST:$FOLDER --exclude=bitbucket-pipelines.yml --chown=www-data:www-data

I received a few errors when rsync ran. In case you run into them as well, here’s the list and fixes. The first was:

rsync: failed to set times on "$FOLDER": Operation not permitted (1)

I added --no-t to resolve that and then got a new error:

rsync: failed to set permissions on "$FOLDER": Operation not permitted (1)

which was fixed with adding the switch --no-perms. My final rsync command became:

rsync -avP --no-t --no-perms build_production/ $USER_NAME@$PRODUCTION_HOST:$FOLDER --exclude=bitbucket-pipelines.yml --chown=www-data:www-data