DEV Community 👩‍💻👨‍💻

Cover image for Automatically update your GitHub profile with your latest dev.to post
Aveek Saha
Aveek Saha

Posted on

Automatically update your GitHub profile with your latest dev.to post

Introduction

Your GitHub profile page is the face of your GitHub presence and recently there have been a lot of interesting ways to make your profile stand out.

One way you can make your GitHub profile unique is by automatically updating it with a summary of your most recent DEV.to blog post, and that's what I'll be showing you how to do in this post using blog-box.

The whole process requires no code, and minimal setup so you should have it up and running in no time!

GitHub logo Aveek-Saha / blog-box

📝 Update a gist to show your latest dev.to post.

blog-box

📝 Update a pinned gist to show your latest dev.to blog post


📌 For more pinned-gist projects like this one, check out: https://github.com/matchai/awesome-pinned-gists

Setup

Prep work

  1. Create a new public GitHub Gist (https://gist.github.com/)
  2. Create an access token with the gist scope and copy it. (https://github.com/settings/tokens/new)
  3. Get your Dev.to user name (https://dev.to/settings)

Project setup

  1. Fork this repo
  2. Go to the repo Settings > Secrets
  3. Add the following environment variables:
    • GH_TOKEN: The GitHub access token generated above.
    • GIST_ID: The ID portion from your gist url: https://gist.github.com/Aveek-Saha/8335e85451541072dd25fda601129f7d.
    • DEV_USERNAME: Your Dev.to account username.

Credits

This code was inspired by @matchai's bird-box.




Prep work

  1. Create a new public GitHub Gist (https://gist.github.com/)
  2. Create a personal access token with the gist scope and copy it. (https://github.com/settings/tokens/new)
  3. Get your Dev.to user name (https://dev.to/settings)

Repo setup

  1. Fork the blog-box repo (https://github.com/Aveek-Saha/blog-box)
  2. Go to the repo Settings > Secrets
  3. Add the three following environment variables:
    • GH_TOKEN: The GitHub access token generated from the previous section.
    • GIST_ID: The ID portion from your gist url, eg: https://gist.github.com/Aveek-Saha/ 8335e85451541072dd25fda601129f7d.
    • DEV_USERNAME: Your Dev.to account username.

Show off your blog posts

Once you've finished with these steps, you can go to Actions > Update gist with latest post and manually trigger the workflow to update the gist with your latest DEV blog post.

Once the gist is updated you can pin it to your GitHub profile, so that it looks something like this:

blog-box-screenshot

When users click on this pinned gist, there will be a comment with the link to the post like this:

Image description

Top comments (0)

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

⭐️🎀 JavaScript Visualized: Promises & Async/Await

async await