Rendering with Static Site Generators

If you build your website with a static site generator such as Jekyll or Gatsby, you can choose to run Screenshotbot as part of your CI job, without having to maintain an infrastructure for running browsers such as Selenium.

In this set up, the Screenshotbot SDK will scan your static site and upload all HTML files and associated assets (including external referenced assets) to our servers, and from there Screenshotbot asynchronously renders the pages in the browser configurations of your choice.

Using this set up instead of the No-code set up, you will be able to take advantage of notifications on your Pull Requests.

Local run

Before we demonstrate how to set this up on your CI, let's show you how to run this locally. The same steps will approximately translate over to your CI configurations.

Setting up the CLI

First install the Screenshotbot CLI:

        curl https://cdn.screenshotbot.io/recorder.sh | sh

          PS C:\> curl https://screenshotbot.io/recorder.exe -O recorder.exe

You can get the API Key and Secret from your dashboard.

        export SCREENSHOTBOT_API_KEY=<api-key>
        export SCREENSHOTBOT_API_SECRET=<api-secret>

        # You might have to restart the shell or you can set `set` instead
        C:\> setx SCREENSHOTBOT_API_KEY <api-key>
        C:\> setx SCREENSHOTBOT_API_SECRET <api-secret>

Upload resources

Now build your static site. Say your static site is generated to out/, then you can call the CLI as follows:

      $ ~/screenshotbot/recorder --static-website \
         tests/_output/debug/screenshotbot/ \
         --channel amazon-test

    ...
    INFO - Uploading file: /tmp/tmpdirT6RJOGNY.tmp/2f90e7c...
    INFO - Uploading file: /tmp/tmpdirT6RJOGNY.tmp/cd7d52d...
    INFO - Screenshot job queued: https://screenshotbot.io/replay/logs/628e...

Specifying browser configurations

By default the above job will only run a pre-defined Google Chrome browser.

You can choose your browser configurations by providing a `browser-config.json` file:

{
  "Google Chrome Desktop": {
    "type": "chrome",
    "dimensions": "1280x800"
  },
  "Nexus 6P": {
    "type": "chrome",
    "mobile-emulation": "Nexus 6P"
  },
  "Firefox": {
    "type": "firefox",
    "dimensions": "1280x800"
  }
}

In order for the CLI to discover this file, you should pass in an additional argument: --browser-configs browser-config.json

Running on CI

For most Continuous Integration frameworks and services, your CI set up will mirror the set up above. First you store your API Key and secret as an environment variable. Second, in your CI config add a step to download and install the CLI. Third, call the CLI against the directory with your static files.

For most common set ups, this should just work! We parse environment variables from most CI services (in particular, Circle CI, Bitrise, Netlify) to get the additional information we need to attribute the screenshots and update pull requests.

If you are using a different CI service, just let us know! Alternatively you just need to pass the missing environment variables as command line arguments.