Github contribution grid snake is showing wrong

Question

I want to show this cute snake in my Github.

Referenced this site and wrote this in [MY_GITHUB_USERNAME]/.github/workflows/main.yml using base branch 'main'.

name: Generate Snake

on:
  schedule:
      # every 6 hours
    - cron: "0 */6 * * *"
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: Platane/snk@master
        id: snake-gif
        with:
          github_user_name: ${{ secrets.USERNAME }}
          # these next 2 lines generate the files on a branch called "output". This keeps the main branch from cluttering up.
          gif_out_path: dist/github-contribution-grid-snake.gif
          svg_out_path: dist/github-contribution-grid-snake.svg

      - run: git status

      - name: Push changes
        uses: ad-m/github-push-action@master
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          branch: main
          force: true

      - uses: crazy-max/ghaction-github-pages@v2.1.3
        with:
          # the output branch we mentioned above
          target_branch: output
          build_dir: dist
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Build is success, then switch 'output' branch and when click github-contribution-grid-snake.gif, it shows weird.

What's wrong and How can i do?

reference a lot of other blogs and try..

Answer 1

I recommend following the official instructions from the snk github repository because other sources on the internet can be outdated. You can also find sample workflows in their .github folder.

Here is correct workflow file which I tested myself. It uses v3 of snk instead of v2 like you were using. Place it in the .github/workflows folder on your main branch:

name: Snake generator

on:
  push:
  workflow_dispatch:
  schedule:
    - cron: "0 * * * *" #  run every hour

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Create snake
        uses: Platane/snk@v3
        with:
          # github user name to read the contribution graph from (**required**)
          # using action context var `github.repository_owner` or specified user
          github_user_name: ${{ github.repository_owner }}

          # list of files to generate.
          # one file per line. Each output can be customized with options as query string.
          #
          #  supported options:
          #  - palette:     A preset of color, one of [github, github-dark, github-light]
          #  - color_snake: Color of the snake
          #  - color_dots:  Coma separated list of dots color.
          #                 The first one is 0 contribution, then it goes from the low contribution to the highest.
          #                 Exactly 5 colors are expected.
          outputs: |
            dist/github-snake.svg
            dist/github-snake-dark.svg?palette=github-dark
            dist/ocean.gif?color_snake=orange&color_dots=#bfd6f6,#8dbdff,#64a1f4,#4b91f1,#3c7dd9


      - 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 }}

The files will be generated on the snake-output branch. My gif for example looks like this: