demo-gifs

Simple pipeline to create an animated demo of a project every time it's deployed. Generates a screencasting type gif of the homepage and saves it to an Amazon S3 bucket. Built with Node.js and GitHub Actions, based on this prompt using this tutorial by Aimeri Baddouh.

Installation

AWS setup

Create an S3 bucket. In the IAM console, first create a policy using the template policy.json. Be sure to swap in your bucket's name in the following line:

"Resource": "arn:aws:s3:::bucket-name/*"

Next, create an IAM user for this workflow and assign the newly created policy to it. Make sure you choose programmatic access as type of credentials.

Generator

Fork this repository. In the Settings tab, create the following secrets using the new IAM credentials:

• AWS_ACCESS_KEY_ID
• AWS_SECRET_ACCESS_KEY

Replace the following values:

# demo-gifs/.github/workflows/generator.yml
aws-region: us-east-1 # bucket's AWS region
run: [...] s3://cco-demo-gifs --acl public-read # s3://bucket-name

# demo-gifs/templates/demo.yml
repo: claudiacachayosorio/demo-gifs # username/demo-gifs

Project workflow

Create a personal access token. Add it as a secret to the repository of the project you want to create a gif for.

Add a copy of demo.yml to the following path: project-repo/.github/workflows/demo.yml

To get the necessary inputs for the generator, your project should have a package.json file with the following fields filled out:

• name project repository's name to be used for the gif filename
• homepage url of the live demo to take screenshots and animate as a gif

Deploy all changes. You can check the Actions tab of both repositories to watch the progress. From then on, [name].gif will be saved to your S3 bucket every time the corresponding project repository is pushed to origin. Repeat for each project with a live web page you want to showcase.

Usage

npm run start [name] [homepage]

License

MIT