I have my GitHub link on my resume and if I'm lucky, potential employers might check out my apps on GitHub. However, I know they're busy and won't have much time to spend so I wanted to make it easy for them and others visiting my repo and show the app in action in the
README.md file that's displayed when you go to a repository.
Embedding a video in a GitHub README would be a dream come true, but as I found out, it's not possible--you'd have to link to the video instead. You can, however put an animated GIF in a README file and that's what I've done with many of my projects.
Here's one for my Farmer's Market Finder app:
Unfortunately, animated GIFs can't normally be as long as videos, but you can use them to quickly show off some core functionality of your app.
Here are a couple apps you can use to create animated GIF screen recordings.
I like to use ScreenToGif which is a free open source app for Windows 7 or later. The software is intuitive to use for simply creating an animated GIF of an area you choose on your screen and they also have a User Guide.
I use Gifox when creating animated GIFs of my screen on the Mac. It sits up in my menu bar and is easy to use. I use the paid version because GIFs created with the free version are limited to 10 seconds and have a watermark.
I know I've left out options for other operating systems and devices, but I only wanted to recommend the ones I've tried myself. Please comment below if you can recommend other apps for taking animated GIF screen recordings.
Once you've created the animated GIF, you can embed it in your
README.md file like you would a regular image.
I usually create a 'Demo' Heading in my README under the description of the app and put the animated GIF under the Demo heading along with a link to a demo of the site online.
If you don't have a good place to host images, you could do what I have done and create a
demo (or better named) folder in your GitHub repository and upload the GIF there, then link to it in the README.
![Farmers Market Finder Demo](demo/demo.gif)
Note: The alt text is what goes between the square brackets and then the URL to the GIF goes between the parentheses. If the image is in your GitHub repository, you can use a relative link like I did in the example.
Thanks for reading my first post!