Deploy your Jigsaw site with GitHub Actions
GoStatic can be used to host the output from your Jigsaw build process. The whole process only takes around a minute, with just 10 seconds needed to deploy and get a live URL via GoStatic!
What is Jigsaw?
Jigsaw is a simple static site generator, built in PHP and using Laravel's blade templating system. You can write your content using standard HTML templates or raw markdown, then run a build command to render your content into HTML.
What are GitHub Actions?
GitHub Actions allow you to run your build commands in a containerized environment. You can trigger them on common github events such as push, pull_request or as a scheduled task using cron. Everything runs on GitHub's infrastructure, so there's nothing to pay unless you have very heavy usage.
How can I deploy my Jigsaw site using GitHub Actions?
Step 1 - Build
First we need to specify the environment, checkout our code, and then run our installation and build commands.
We are using the default ubuntu-latest environment, as this supports both PHP and NPM commands. The actions/checkout@v2 action moves our code into the container. We can then issue the composer install and npm install commands to get everything installed, just like you would on your machine. Finally, we issue the npm run production command which will build our Jigsaw site.
on: [push, pull_request]
jobs:
example_job:
runs-on: ubuntu-latest
name: Deploy Jigsaw using GoStatic
steps:
- uses: actions/checkout@v2
- name: Install Composer PHP dependencies
run: composer install --no-ansi --no-interaction --no-scripts --no-suggest --no-progress --prefer-dist
- name: Install NPM dependencies
run: npm install
- name: Build the site
run: npm run production
Step 2 - Deploy
Using the GoStatic GitHub Action, we can easily deploy using just a few lines of code.
Set the source-dir parameter to match the output directory from your Jigsaw build. By default this will be ./build_production
You will also need to add your free GoStatic API token to the secrets tab on your GitHub repo. (GitHub Repo » Settings » Secrets)
- name: Deploy
id: deploy
uses: DigitalSVN/[email protected]
with:
api-token: ${{ secrets.GOSTATIC_API_TOKEN }}
source-dir: './build_production'
Step 3 - Return the URL
Below we return the URL so that it is visible on the GitHub action execution screen. You could do various things with the returned steps.deploy.outputs.url such as posting it to slack.
You can also automatically post the URL as a comment on a Pull Request.
- name: Output the deployment URL
run: echo "URL ${{ steps.deploy.outputs.url }}"
- name: Output the deployment URL in a comment on the pull request
uses: actions/[email protected]
if: github.event_name == 'pull_request'
with:
github-token: ${{ secrets.GITHUB_TOKEN }}
script: |
const { issue: { number: issue_number }, repo: { owner, repo } } = context;
github.issues.createComment({ issue_number, owner, repo, body: 'URL ready: ${{ steps.deploy.outputs.url }}' });
Full GitHub Action output
As you can see below, the entire process, build, deploy and returning the URL takes less than a minute, with the deployment step via GoStatic taking less than 10 seconds!
Full example code
You should be able to copy and paste the code below into a file called .git/workflows/deploy.yml, add your GoStatic API token to the secrets tab, and then push your code to trigger the GitHub Action
on: [push, pull_request]
jobs:
example_job:
runs-on: ubuntu-latest
name: Deploy Jigsaw using GoStatic
steps:
- uses: actions/checkout@v2
- name: Install Composer PHP dependencies
run: composer install --no-ansi --no-interaction --no-scripts --no-suggest --no-progress --prefer-dist
- name: Install NPM dependencies
run: npm install
- name: Build the site
run: npm run production
- name: Deploy
id: deploy
uses: DigitalSVN/[email protected]
with:
api-token: ${{ secrets.GOSTATIC_API_TOKEN }}
source-dir: './build_production'
- name: Output the deployment URL
run: echo "URL ${{ steps.deploy.outputs.url }}"
- name: Output the deployment URL in a comment on the pull request
uses: actions/[email protected]
if: github.event_name == 'pull_request'
with:
github-token: ${{ secrets.GITHUB_TOKEN }}
script: |
const { issue: { number: issue_number }, repo: { owner, repo } } = context;
github.issues.createComment({ issue_number, owner, repo, body: 'URL ready: ${{ steps.deploy.outputs.url }}' });