Adding the daily DevCard to your GitHub profile

A while ago, we launched dev cards! A fantastic concept where you can show off how many articles you read, your favorite publications, and show off your rank!

Keen to generate your own dev card?

I want a DevCard

However, this article takes your DevCard to the next level by adding it to your GitHub profile!

For instance, like Ole-Martin!

He added this card to his profile. He created a GitHub action to pull the latest card automatically!

And in this article, we’ll show you how you can leverage his amazing GitHub action to showcase your DevCard on your GitHub profile as well.

Creating a GitHub profile page

Perhaps you are still without a GitHub profile and not sure how you can create one yourself.

The process of creating one is not too hard to follow.

Head over to GitHub and create a new public repository.
The name of this repository must be your username.

For instance, my username on GitHub is rebelchris, so the repository must also be called rebelchris.

You’ll even be prompted that you found the secret hack to creating a GitHub profile.

The profile is limited to a markdown file, but don’t worry, there are many cool things you can do to make it look very stylish!

And one of those things is adding the Daily DevCard.

Manually adding the DevCard to your GitHub profile

The easiest way to add your DevCard to your profile is by visiting the DevCard page and generating your card.

You can then go ahead and copy the code on the right by clicking the copy button.

Head back over to your GitHub profile README.md file and paste the code.

It looks something like this:

<a href="https://app.daily.dev/DailyDevTips"><img src="https://api.daily.dev/devcards/b2a0b896ef724e68a2364c727e8e9e6e.png?r=20z" width="400" alt="Chris Bongers's Dev Card"/></a>

If you save this file and view your profile, you should now see the DevCard in action.

Pretty cool, right. However, there is one downside to this approach.

The DevCard is cached, so it won’t automatically update the content inside it 😢.
However, don’t worry. That’s where the GitHub Action comes in.

Using a GitHub action to update your DevCard automatically

As mentioned, Ole-Martin decided to make this amazing GitHub action for us!

What it does is it will automatically get your own DevCard and download it to your profile repository.

This means we can automatically run this action every x time and get the latest DevCard.

Let’s see how we can use it for our profile.

Click on the Actions button for your profile repository and set up a new workflow yourself.

From there, it will create a basic workflow that we’ll start modifying.

Change the name of the workflow to ‘DevCard’.

Then we want to set two ways our action should be triggered, the first being if there is a push on the master branch.

The other one is a schedule, which acts as a cronjob and will return every {x} time.
In our case, we will run it every night at 00:00.

on:
  workflow_dispatch:
  push:
    branches:
      - main
  schedule:
    - cron: "0 0 * * *"

The workflow_dispatch tells the action it can manually run from the Actions tab.

Then we want to create a new job that will run the DevCard GitHub action.
We need to set one variable for our version, which will be the ID of the DevCard we are fetching.

jobs:
  devcard:
    runs-on: ubuntu-latest
    steps:
      - name: devcard
        uses: dailydotdev/action-devcard@2.0.2
        with:
          devcard_id: ${{ secrets.DEVCARD_ID }}

Making the total file look like this:

name: DevCard

on:
  workflow_dispatch:
  push:
    branches:
      - main
  schedule:
    - cron: "0 0 * * *"

jobs:
  devcard:
    runs-on: ubuntu-latest
    steps:
      - name: devcard
        uses: dailydotdev/action-devcard@2.0.2
        with:
          devcard_id: ${{ secrets.DEVCARD_ID }}

The next thing we need to do is fetch our DevCard ID and set it as a secret in this GitHub repository.

Head over to the DevCard page and generate your DevCard.

The ID we need is the part before the .png part.

So in the above example, the URL looks like this:

https://api.daily.dev/devcards/b2a0b896ef724e68a2364c727e8e9e6e.png?r=6mk

Which means our ID is b2a0b896ef724e68a2364c727e8e9e6e.

Now we can head back to GitHub and click the Settings tab.
From there, choose the Secret section and generate a new secret.

This secret should have the following name: DEVCARD_ID and the value we just retrieved from the image.

Now we can head over to the Actions tab and run our workflow.
Once the workflow is done, you should see a green icon on your workflow.

Head back to your repository, and suddenly you will see there is a new file called devcard.svg.

All we have to do now is update our README.md file to use this generated file like so:

<a href="https://app.daily.dev/DailyDevTips"><img src="https://github.com/rebelchris/rebelchris/blob/master/devcard.svg" width="400" alt="Chris Bongers's Dev Card"/></a>

Where you have to modify the href, rebelchris/rebelchris, and alt parts to be your repository name.

And there you go! You now have an automatically updating DevCard on your GitHub profile.

Conclusion

In this article, we covered two different ways of showing your reading interests through your GitHub profile:

1. Manual adding your DevCard by copying the code
2. Automatic updating DevCard by leveraging GitHub actions

I’m sure you can’t wait to generate your DevCard: https://app.daily.dev/devcard.

Don’t forget to share your DevCard on social media using the #DevCard hashtag so we can check out the fantastic profile you created 🤩.