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.
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.
Fork this repository. In the Settings tab, create the following secrets using the new IAM credentials:
AWS_ACCESS_KEY_IDAWS_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-gifsCreate 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:
nameproject repository's name to be used for the gif filenamehomepageurl 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.
npm run start [name] [homepage]