Add a Year Progress 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 year progress (automatically updated every day) to the GitHub profile page—so it looks like this:

1
2
3
4
5


⏳ Year progress { █████████████████▁▁▁▁▁▁▁▁▁▁▁▁▁ } 58.11 %

---

⏰ Updated on Fri, 01 Aug 2025 02:10:41 GMT

Pre-Conditions

GitHub Accounts
A GitHub Repository with the same name as your GitHub username (see my another blog post Add a Funny Snake Animation to Your GitHub Profile Page for tutorials)

Implementation Steps

We need to add two files to the repository (we mentioned above): one is the workflows file that implements automatic updating of the year progress bar, and the other is the index.js file that sets the style of the generated year progress bar.

Step 0: Find GitHub Email Prefix

Before implementing the year progress bar, you’ll first need to locate your GitHub email prefix - we’ll use this in the following steps.

Log in to your GitHub account.
Click on your avatar in the top-right corner → “Settings” → “Emails”.
Under “Keep my email addresses private,” locate the noreply email address formatted as [numeric ID]+[username]@users.noreply.github.com.
The [numeric ID] (e.g., 12345678) is your GitHub email prefix.

After finding the GitHub email prefix, let’s start the implementations of year progress bar.

Step 1: Create Workflows

Firstly, let’s focus on the workflows file.

Click the Add file button in the repository and select Create new file to create a new file.
Name the newly created file by entering .github/workflows/main.yml (the file name includes the path where the file is located).
Add the following code to the yml file:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


name: Progress Bar CI 
on: 
  workflow_dispatch: 
  schedule: 
	- cron: '0 */6 * * *' 
jobs: 
  build: 
	runs-on: ubuntu-latest 
  steps: 
  - uses: actions/checkout@v2 
  - name: Use Node.js 
	uses: actions/setup-node@v1 
	with: 
	  node-version: '14.x' 
  - name: Update README.md 
	run: node index.js > README.md 
  - name: Commit change & Push 
	run: | 
		git config user.name 'github-actions[bot]' 
		git config user.email 'YOUR_ID+github-actions[bot]@users.noreply.github.com' 
		git commit -am "bot: update README.md automatically" 
		git push

Replace the GitHub email prefix YOUR_ID in line 24 of the code git config user.email 'YOUR_ID+github-actions[bot]@users.noreply.github.com' with your own GitHub email prefix derived in Step 0.

Step 2: Create `index.js`

Secondly, let’s focus on the index.js file.

Create another file in the repository named index.js (the same directory as README.md).
Add the following code into the file:

 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


const thisYear = new Date().getFullYear()
const startTimeOfThisYear = new Date(`${thisYear}-01-01T00:00:00+00:00`).getTime()
const endTimeOfThisYear = new Date(`${thisYear}-12-31T23:59:59+00:00`).getTime()
const progressOfThisYear = (Date.now() - startTimeOfThisYear) / (endTimeOfThisYear - startTimeOfThisYear)
const progressBarOfThisYear = generateProgressBar()

function generateProgressBar() {
    const progressBarCapacity = 30
    const passedProgressBarIndex = parseInt(progressOfThisYear * progressBarCapacity)
    const progressBar =
      '█'.repeat(passedProgressBarIndex) +
      '▁'.repeat(progressBarCapacity - passedProgressBarIndex)
    return `{ ${progressBar} }`
}

const readme = `\
### Hi there 👋

/*
Add something originally in the README.md file.
*/

⏳ Year progress ${progressBarOfThisYear} ${(progressOfThisYear * 100).toFixed(2)} %

---

⏰ Updated on ${new Date().toUTCString()}

/*
Add something originally in the README.md file.
*/

`;
console.log(readme)

Please note the line const readme = ! Here const readme will fully covers README.md. Therefore, please concatenate the original contents in README.md in index.js (at “/* Add something originally in the README.md file. */ “), rather than just the progress bar.
Click on Actions button in the repository, Test the Progress Bar CI workflows, and Check whether implemented successfully.

Debugging for the Potential Problems

Failed at `Commit change & Push`

When I attempted to run the Progress Bar CI workflows, I found an error, in detail:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


▼ Run git config user.name 'github-actions[bot]"
	git config user.name 'github-actions[bot]'
	git config user.email'YOUR_ID+github-actions[bot]@users.noreply.github.com'
	git commit -am"bot: update README.md automatically"
	git push
	shell:/usr/bin/bash -e {0}
	env:
		GITHUB_TOKEN:***
[main 38a8a8d] bot: update README.md automatically
1 file changed,4 insertions(+)，25 deletions(-)
remote: Permission to serendipityerr/serendipityerr.git denied to github-actions[bot].
fatal:unable to access'https://github.com/serendipityerr/serendipityerr/':The requested URL returned error:403
Error: Process completed with exit code 128.

Solutions

Add the following codes in .github/workflows/main.yml (add a write-enabled permission configuration to the workflows):

1
2


permissions:
  contents: write

The updated yml would be:

 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


name: Progress Bar CI 
on: 
  workflow_dispatch: 
  schedule: 
	- cron: '0 */6 * * *' 

permissions:
  contents: write

jobs: 
  build: 
	runs-on: ubuntu-latest 
  steps: 
  - uses: actions/checkout@v2 
  - name: Use Node.js 
	uses: actions/setup-node@v1 
	with: 
	  node-version: '14.x' 
  - name: Update README.md 
	run: node index.js > README.md 
  - name: Commit change & Push 
	run: | 
		git config user.name 'github-actions[bot]' 
		git config user.email 'YOUR_ID+github-actions[bot]@users.noreply.github.com' 
		git commit -am "bot: update README.md automatically" 
		git push

Then run the Progress Bar CI workflows again and check. I find the problem solved.

Copyright Notice

The original code was developed by GitHub user 👉👉 @liununu. All credits go to the author.