How to add a snake game to your Github page (2024)

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.

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.


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

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.

See Also

Snake Game

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

Go to the Action tab, you will see the workflow named generate animation click it, and the Run Workflow.

If the workflow run successfully, you will get the svg file in the codes under the output branch, which config in the main.yml.