Add a Funny Snake Animation to Your GitHub Profile Page

Introduction

A GitHub personal home page, officially called a profile, is a personal GitHub presentation master page written in Markdown. In this article, we’ll demonstrate how to add a funny snake animation to the GitHub profile page.

The Snake animation is actually a kind of “heat map”, each small grid corresponds to each day, the grid is gray by default, where the green grid means we submitted code on that day, the darker the color of the grid, the more times we committed code on that day.

Pre-Conditions

GitHub Accounts
Some GitHub commits

Implementation Steps

Step 1: Create the Repository

Create a new repository with the same name as your GitHub username and select Add a README file.

For example, I would create a serendipityerr repository. After filling in the repository name (same as your GitHub username), some information would pop up like:

1

serendipityerr/serendipityerr is a ✨️special✨️ repository that you can use to add a README.md to your GitHub profile. Make sure it's public and initialize it with a README to get started.

Step 2: New Action and Workflow

Click on Actions in the repository you just created to enter the website like https://github.com/serendipityerr/serendipityerr/actions.
Click on New workflow in the left side and select Skip this and set up a workflow yourself .

In the main.yml, copy and paste the following codes:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41


name: generate animation
on:
# run automatically every 24 hours
schedule:
    - cron: "0 */24 * * *" 

# allows to manually run the job at any time
workflow_dispatch:

# run on every push on the master branch
push:
    branches:
    - main

jobs:
generate:
    runs-on: ubuntu-latest
    timeout-minutes: 10

    steps:
    # generates a snake game from a github user (<github_user_name>) contributions graph, output a svg animation at <svg_out_path>
    - name: generate github-contribution-grid-snake.svg
        uses: Platane/snk/svg-only@v3
        with:
        github_user_name: ${{ github.repository_owner }}
        outputs: |
            dist/github-contribution-grid-snake.svg
            dist/github-contribution-grid-snake-dark.svg?palette=github-dark
        env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}


    # push the content of <build_dir> to a branch
    # the content will be available at https://raw.githubusercontent.com/<github_user>/<repository>/<target_branch>/<file> , or as github page
    - name: push github-contribution-grid-snake.svg to the output branch
        uses: crazy-max/ghaction-github-pages@v3.1.0
        with:
        target_branch: output
        build_dir: dist
        env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Click on Commit changes...
Click on Run workflow

Check whether successfully pushed, if successful, turn on Step 3. If not successful, turn to Debug part.

Step 3: Revise README.md to Demonstrate the Action

Add the following codes in the README.md and please DO NOT FORGET to change the serendipityerr to your GitHub username:

1
2
3
4
5


<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/serendipityerr/serendipityerr/output/github-contribution-grid-snake-dark.svg">
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/serendipityerr/serendipityerr/output/github-contribution-grid-snake.svg">
<img alt="github contribution grid snake animation" src="https://raw.githubusercontent.com/serendipityerr/serendipityerr/output/github-contribution-grid-snake.svg">
</picture>

Preview the changes to check if successfully deployed and Click on Commit changes....

Debugging for the Potential Problems

Failed to commit the `main.yml` in the workflow.

When I attempted to commit the main.yml in the workflow, I found error All checks have failed. 1 failing check. In detail:

1
2
3
4
5


Pushing dist directory to output branch on serendipityerr/serendipityerr repo
    /usr/bin/git push --force ***github.com/serendipityerr/serendipityerr.git output
    remote: Permission to serendipityerr/serendipityerr.git denied to github-actions[bot].
    fatal: unable to access 'https://github.com/serendipityerr/serendipityerr.git/': The requested URL returned error: 403
    Error: The process '/usr/bin/git' failed with exit code 128

Solutions

Setup GitHub personal access: Actions deployed require access to your repository.

Click on your avatar in the upper right corner

→ Settings

→ Developer settings

→ Personal access tokens

→ Tokens (classic)

→ New personal access token or Click on the existing token

→ Select all the scopes and choose No expiration

→ Remember the TOKEN (it can’t be viewed after the page is closed!!!!)

→ Go back to the repository, click on Setting - Secrets - Actions - New repository secrets. Name is ACCESS_TOKEN and Value is the TOKEN you just got.

Revise the main.yml and Add two lines of codes:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43


name: generate animation
permissions: 
    contents: write
on:
# run automatically every 24 hours
schedule:
    - cron: "0 */24 * * *" 

# allows to manually run the job at any time
workflow_dispatch:

# run on every push on the master branch
push:
    branches:
    - main

jobs:
generate:
    runs-on: ubuntu-latest
    timeout-minutes: 10

    steps:
    # generates a snake game from a github user (<github_user_name>) contributions graph, output a svg animation at <svg_out_path>
    - name: generate github-contribution-grid-snake.svg
        uses: Platane/snk/svg-only@v3
        with:
        github_user_name: ${{ github.repository_owner }}
        outputs: |
            dist/github-contribution-grid-snake.svg
            dist/github-contribution-grid-snake-dark.svg?palette=github-dark
        env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}


    # push the content of <build_dir> to a branch
    # the content will be available at https://raw.githubusercontent.com/<github_user>/<repository>/<target_branch>/<file> , or as github page
    - name: push github-contribution-grid-snake.svg to the output branch
        uses: crazy-max/ghaction-github-pages@v3.1.0
        with:
        target_branch: output
        build_dir: dist
        env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Turn on Step 2 and the problem is solved.

Final Animated Demo

The final results of my GitHub profile page can be found here: https://github.com/serendipityerr.