0x5E

It's that time of year again to tinker with my GitHub homepage. This article will use my homepage as an example to discuss various interesting decorative tools and the pitfalls encountered along the way.

Create a README file#

Create a repository with the same name as your GitHub username (case-sensitive), check Public, check Add a README file, and click the Create repository button at the bottom:

After a moment, you will enter the created repository:

Next, you can configure our decorative tools or write a self-introduction in the README.md file of this repository.

🧪 Contribution Graph Snake#

Use 🔗snk to display a contribution snake animation on the README file, which updates automatically every day.

Create a file#

Click the Create new file button:

Copy the following path into the filename text box, and it will be recognized automatically:

.github/workflows/main.yml

Then copy the following code into the large text box below (the code can also refer to 🔗main.yml), without any modifications, and click the Commit changes button:

name: generate animation

on:
  # run automatically every 2 hours
  schedule:
    - cron: "0 */2 * * *" 
  
  # allows to manually run the job at any time
  workflow_dispatch:
  
  # run on every push on the master branch
  push:
    branches:
    - master
    
  

jobs:
  generate:
    permissions: 
      contents: write
    runs-on: ubuntu-latest
    timeout-minutes: 5
    
    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
          
          
      # 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 }}

Edit the README file#

Return to the repository homepage and click Edit README:

You will see some preset self-introduction templates, which we will ignore for now since they are commented out and will not be displayed:

Copy the following code into the text box, replacing the username part with your own (i.e., replace all instances of DevJayson), and click the Commit changes button. The purpose of this code is to load the snake animation, which will automatically adapt to the light and dark styles of your GitHub.

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

At this point, the snake is not visible yet; you need to run it manually (since it is set to update every 2 hours), after which it will be fully automated.

Click Action:

Click generate animation, then click Run workflow:

After a moment, it will show that the run was successful. Return to the repository homepage, and you will see that the snake animation has been loaded:

Note: The generated snake animation file is stored in the output branch of the repository:

🧪 Blog Post Synchronization#

This tool can only be configured if you have a blog website with RSS functionality.

Use 🔗blog-post-workflow to display the latest blog posts on the README file.

Create a file#

Return to the repository homepage and click Create new file:

Copy the following path into the filename text box:

.github/workflows/blog-post-workflow.yml

Copy the following code into the large text box below, changing the last line's feed_list content to your own website's RSS link (e.g., https://realyujie.xlog.app/feed), and click Commit changes to complete the creation.

For more build parameters, please refer to 🔗here, including the number of articles to display, themes, etc.

name: Latest blog post workflow
on:
  schedule: # Run workflow automatically
    - cron: '0 */2 * * *' # Runs every hour, on the hour
  workflow_dispatch: # Run workflow manually (without waiting for the cron to be called), through the GitHub Actions Workflow page directly
permissions:
  contents: write # To write the generated contents to the readme

jobs:
  update-readme-with-blog:
    name: Update this repo's README with latest blog posts
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Pull in blog's posts
        uses: gautamkrishnar/blog-post-workflow@v1
        with:
          feed_list: "https://realyujie.xlog.app/feed"

Edit the README file#

Return to the repository homepage and click Edit README:

Place the following content in the README, and the program will automatically fetch article titles, links, etc., and display them. Click Commit changes:

📕  **Latest Blog Posts**
<!-- BLOG-POST-LIST:START -->
<!-- BLOG-POST-LIST:END -->

At this point, the article list is still not visible; you also need to run it manually first. Click Action:

Click Latest blog post workflow, then click Run workflow:

After a moment, it will show that the run was successful. Return to the repository homepage, and the article list will be displayed perfectly:

Other Settings#

Go to the repository settings Settings, click Actions -> General.

Scroll to the bottom of the page, find Workflow permissions, change the option to Read and write permissions, check Allow GitHub Actions to create and approve pull requests, and click save Save:

At this point, this tool is also configured. Return to your GitHub profile page, and you will see the two tools you just configured:

To write this tutorial, this article uses the configuration of the blogger's GitHub secondary account.

If your open-source contributions are not many, then the contribution graph may look like the blogger's secondary account, showing only a few dots or none at all. As you gradually enrich your contributions, it will look better and better.

Others#

Do you remember the self-introduction that was commented out at the beginning? You can uncomment it and modify it appropriately to display it. You can refer to the blogger's main account's 🔗README file.