07/09/2021, 01:54 How to enable GitHub Actions on your Profile README for a snake-eating contribution graph 🐍 - DEV Community

🐍
How to enable GitHub Actions on your Profile
README for a snake-eating contribution graph
#github
#markdown
#opensource
#tutorial

Michelle Mannering ・ ・
28 Jun
Updated on 29 Jul
4 min read

https://dev.to/mishmanners/how-to-enable-github-actions-on-your-profile-readme-for-a-contribution-graph-4l66 1/14
07/09/2021, 01:54 How to enable GitHub Actions on your Profile README for a snake-eating contribution graph 🐍 - DEV Community

GitHub Like a Boss (11 Part Series)

1 GitHub Readme for easy to understand code

2 Using the GitHub CLI to update your repo

... 7 more parts...

10 How to build HTML-like forms with GitHub

11 How to use GitHub Pages to host your website, even wit…

Lots of people have been talking about and sharing their GitHub Profile READMEs. It was a project we
launched last year and developers are loving it. As this feature became more popular, more developers
were building templates, plugins, and apps for you to use on your profile.

This post from Supritha caught my attention. I like the way they talk about various pieces of code to have on
your GitHub Profile README.

How to have an awesome GitHub profile ?

Supritha Ravishankar ・
Jun 8 ・
5 min read
#github
#markdown
#opensource
#git

One of the comments from Guillaume Falourd pointed to a really cool project from Platane.
https://dev.to/mishmanners/how-to-enable-github-actions-on-your-profile-readme-for-a-contribution-graph-4l66 2/14
07/09/2021, 01:54 How to enable GitHub Actions on your Profile README for a snake-eating contribution graph 🐍 - DEV Community

Platane
/ snk
🟩⬜ Generates a snake game from a github user contributions graph and output a screen capture
as animated svg or gif

snk
marketplace snake

types TypeScript
code style prettier

Generates a snake game from a github user contributions graph

Pull a github user's contribution graph

Make it a snake Game, generate a snake path where the cells get
eaten in an orderly fashion.

Generate a gif or svg image.

Available as github action. Automatically generate a new image at the end of the day. Which makes for
great github profile readme
View on GitHub

It uses GitHub Actions to build and update a user's contribution graph, and then has a snake eat all your
contributions. The output generates a gif file, that you can then show on your GitHub Profile README. I
thought this was pretty cool, so I set about adding this to my profile.

Step 1. Setting up GitHub Actions

https://dev.to/mishmanners/how-to-enable-github-actions-on-your-profile-readme-for-a-contribution-graph-4l66 3/14
07/09/2021, 01:54 How to enable GitHub Actions on your Profile README for a snake-eating contribution graph 🐍 - DEV Community
The first thing you want to ensure before you start this project, is that you have GitHub Actions setup. Head
to your Profile and ensure the "Actions" tab is available. Everyone should now have this feature.

Next, head to Platane's Action (available on the Marketplace) and make a copy of the code. You'll need to
add this snippet into your Actions file.

Step 2. Creating your GitHub Actions yaml file

This is definitely the part where I got stuck. When looking at the code, I wasn't sure exactly where to add the
lines of code mentioned on Marketplace.

After looking at the way Platane had their Actions file setup, I was able to generate the code (with a little
help from Bdougie of course).

I've added the full code snippet below and added plenty of comments to (hopefully make it easy to
understand).

You can copy this code straight into a blank *.yml file. Make sure you create a new *.yml file under the
following directory:

YOUR_GITHUB_USERNAME --> .github --> workflows --> FILE_NAME.yml

# GitHub Action for generating a contribution graph with a snake eating your contributions.

name: Generate Snake

https://dev.to/mishmanners/how-to-enable-github-actions-on-your-profile-readme-for-a-contribution-graph-4l66 4/14
07/09/2021, 01:54 How to enable GitHub Actions on your Profile README for a snake-eating contribution graph 🐍 - DEV Community
# Controls when the action will run. This action runs every 6 hours.

on:

schedule:

# every 6 hours

- cron: "0 */6 * * *"

# This command allows us to run the Action automatically from the Actions tab.

workflow_dispatch:

# The sequence of runs in this workflow:

jobs:

# This workflow contains a single job called "build"

build:

# The type of runner that the job will run on

runs-on: ubuntu-latest

# Steps represent a sequence of tasks that will be executed as part of the job

steps:

# Checks repo under $GITHUB_WORKSHOP, so your job can access it

- uses: actions/checkout@v2

# Generates the snake

- uses: Platane/snk@master

id: snake-gif

with:

github_user_name: mishmanners

# these next 2 lines generate the files on a branch called "output". This keeps the m
gif_out_path: dist/github-contribution-grid-snake.gif

svg_out_path: dist/github-contribution-grid-snake.svg

# show the status of the build. Makes it easier for debugging (if there's any issues).

- run: git status

https://dev.to/mishmanners/how-to-enable-github-actions-on-your-profile-readme-for-a-contribution-graph-4l66 5/14
07/09/2021, 01:54 How to enable GitHub Actions on your Profile README for a snake-eating contribution graph 🐍 - DEV Community
# Push the changes

- name: Push changes

uses: ad-m/github-push-action@master

with:

github_token: ${{ secrets.GITHUB_TOKEN }}

branch: master

force: true

- uses: crazy-max/[email protected]

with:

# the output branch we mentioned above

target_branch: output

build_dir: dist

env:

GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Step 3. Running GitHub Actions

Once you've added the code above and committed it, head to your Actions tab. Under "Workflows", you
should see the "Generate Snake" Action you created above.

https://dev.to/mishmanners/how-to-enable-github-actions-on-your-profile-readme-for-a-contribution-graph-4l66 6/14
07/09/2021, 01:54 How to enable GitHub Actions on your Profile README for a snake-eating contribution graph 🐍 - DEV Community
Click "Run Workflow" and watch your workflow run. You can even expand your workflow and see what's
happening in real time.

Once your workflow has finished running, you should have received a green ✅ "build" checkmark. If so, this
means your Action is working nicely. If not, you'll have to go through the code and see where the errors are.
The "build" status should give you some indication of where your errors lie. You can also compare it with the
yaml file on my GitHub Profile README.

https://dev.to/mishmanners/how-to-enable-github-actions-on-your-profile-readme-for-a-contribution-graph-4l66 7/14
07/09/2021, 01:54 How to enable GitHub Actions on your Profile README for a snake-eating contribution graph 🐍 - DEV Community

If you have the green "build" ✅ then you should be good to go. Head back to your repo's "Code" directory,
and change your branch to "output". Here you'll find the two versions of your contribution graph with the
snake eating it: a *.gif and a *.svg. The good thing about these files is the file is rewritten over itself every
time the Action runs. Thus, your contribution graph will always be up to date.

https://dev.to/mishmanners/how-to-enable-github-actions-on-your-profile-readme-for-a-contribution-graph-4l66 8/14
07/09/2021, 01:54 How to enable GitHub Actions on your Profile README for a snake-eating contribution graph 🐍 - DEV Community

Step 4. Adding a contribution-eating snake to your profile

Now the final set is to add this to your profile. Grab the file location of your *.gif. It should be something like:

https://github.com/YOUR_USERNAME/YOUR_USERNAME/blob/output/github-contribution-grid-snake.gif

Add this to your profile by copying the file location onto a new line in your markdown file:

https://dev.to/mishmanners/how-to-enable-github-actions-on-your-profile-readme-for-a-contribution-graph-4l66 9/14
07/09/2021, 01:54 How to enable GitHub Actions on your Profile README for a snake-eating contribution graph 🐍 - DEV Community
![snake gif](https://github.com/YOUR_USERNAME/YOUR_USERNAME/blob/output/github-contribution-grid-
snake.gif)

Now you should have a really cool looking snake eating your contributions!

Hopefully this guide was helpful for you and gives you a good base to start building and adding more
Actions on your profile. What have you been adding to your GitHub Profile README? Other there other cool
Actions I should be looking at?

GitHub Like a Boss (11 Part Series)

1 GitHub Readme for easy to understand code

2 Using the GitHub CLI to update your repo

... 7 more parts...

https://dev.to/mishmanners/how-to-enable-github-actions-on-your-profile-readme-for-a-contribution-graph-4l66 10/14
07/09/2021, 01:54 How to enable GitHub Actions on your Profile README for a snake-eating contribution graph 🐍 - DEV Community
10 How to build HTML-like forms with GitHub

11 How to use GitHub Pages to host your website, even wit…

Discussion (8)

Michael jentsch • Jul 9

Great tutorial! Works for me.

Here's mine - github.com/msoftware

Gustavo Martins • Sep 3

Awsome! How did you change the background-color?

Michelle Mannering
• Sep 3

I didn't change the background colour. It's a .png/.svg image, meaning the background is
transparent. It looks dark on mine because I have dark mode enabled on GitHub. You can
enable it by clicking Settings --> Appearance --> choosing your mode.

https://dev.to/mishmanners/how-to-enable-github-actions-on-your-profile-readme-for-a-contribution-graph-4l66 11/14
07/09/2021, 01:54 How to enable GitHub Actions on your Profile README for a snake-eating contribution graph 🐍 - DEV Community
Gustavo Martins • Sep 3

Thank you! actually I was using the .gif version, so I switched to the .svg one and voilá

Michelle Mannering
• Sep 3

Awesome! Glad to be of help 😄

Shasank Periwal • Aug 8
• Edited
on Aug 8

Great tutorial!

But can anyone help me, its not showing all my contributions

github.com/shasank27/shasank27

Michelle Mannering
• Sep 6
• Edited
on Sep 6

Hey Shasank. I can't see it on your profile, but to show all contributions, you need to make sure
all contributions are turned on your profile. You can do this in your settings:

github.com/YOUR_PROFILE --> Settings --> Profile

Then scroll down to "Contributions" and check the box that says "Include private contributions on
my profile".

https://dev.to/mishmanners/how-to-enable-github-actions-on-your-profile-readme-for-a-contribution-graph-4l66 12/14
07/09/2021, 01:54 How to enable GitHub Actions on your Profile README for a snake-eating contribution graph 🐍 - DEV Community
Hope that helps.

Aditya Mangal • Jul 22

Awesome Tutorial! 🐍
Code of Conduct
•
Report abuse

Michelle Mannering

Developer Relations | Hackathon Queen | Community Manager

LOCATION
Australia
WORK
Developer Community Manager at GitHub

JOINED
29 May 2020

More from Michelle Mannering

How to add a social media share card to any website

#tutorial
#webdev

https://dev.to/mishmanners/how-to-enable-github-actions-on-your-profile-readme-for-a-contribution-graph-4l66 13/14
07/09/2021, 01:54 How to enable GitHub Actions on your Profile README for a snake-eating contribution graph 🐍 - DEV Community
Did you know, GitHub has a mobile app?!
#github
#mobile
#productivity

How to use GitHub Pages to host your website, even with multiple repos
#github
#tutorial
#webdev

https://dev.to/mishmanners/how-to-enable-github-actions-on-your-profile-readme-for-a-contribution-graph-4l66 14/14