How to add a snake game to your Github page

3 min readJul 31, 2023

When you open Github profile of someone, maybe you can see a snake game to your contribution graph.

Compared with the Github default contributions, the snake game to the contributions is very impressive, so how can you get yours.

Step 1. Create repository

Create a repository with your username . Github will tell you that

It 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. Write the README

If you like my read me style, you can find it here. The snake game is just a svg file, you can get it in README.

![Snake animation](https://raw.githubusercontent.com/{username}/{username}/output/github-contribution-grid-snake-dark.svg)

Please replace the {username} in the above link for yourself.

Step 3. Create the Workflow

Go you your tab Actions in your README repository and create a New Workflow. Click the New workflow button, and last the set up workflow yourself link.

This will generate a new folder in your repository called .github/workflows and a new file inside of it called main.yml.

Copy the content from here to your main.yml. Nothing changed.

name: generate animation

on:
  # run automatically every 24 hours
  schedule:
    - cron: "0 */12 * * *" 
  
  # allows to manually run the job at any time
  workflow_dispatch:
  
  # run on every push on the main 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 }}