DEV Community

Steven Jenkins De Haro
Steven Jenkins De Haro

Posted on • Updated on

Show your Tweets on your GitHub Profile README

GitHub recently released a feature that allows you to create a profile for your GitHub account, which is powered by a simple README.md file. As one might have guessed, people have already found ways to create creative profiles with dynamic content using APIs and GitHub Actions. In this quick tutorial, I will show you one way to dynamically display your tweets on your GitHub profile.

Before We Start

You will first need to enable the profile feature on your account by creating a new repo that matches your GitHub username. For example, my username is StevenJDH so my repo is called StevenJDH. Once done, you can quickly create a starter profile using the GitHub Profile README Generator tool to get the needed markdown as you see here:

GitHub Profile README Generator

Generating an RSS Feed Link

The approach being taken today requires an RSS feed link for your tweets, which Twitter does not provide. Fortunately, the Rss.app service can provide us with one. To get this link, do the following:

  • From the Rss.app website, sign in or sign up with your Twitter account.
  • Optional: If this is a new account, you will be automatically enrolled into the 7 day trial for the Premium tier. Downgrading later to the Free tier will undo the following steps unless you opt to pay for that tier. I recommend downgrading to the Free tier now to avoid a message like [[Action required] Your RSS.app Trial has Expired - Sat Oct 31 2020](https://rss.app) replacing your tweets, and having to repeat the steps that follow.
  • Select the + New Feed button on the left after logging in, and then choose the Twitter RSS Feed tile on the right.
  • In the first field provided, enter the URL to your Twitter profile and click the Generate button.
  • You should now see your RSS feed link associated with your Twitter account. In trial mode, the data behind this link will refresh every 30 minutes for the first week, but afterward, it will refresh once a day.

Setting Up Your GitHub Profile README

Now for the fun part, adding the tweets to the GitHub profile. This is made possible thanks to the Blog Post Workflow that we are adapting to make it work for Twitter.

  • Create a folder called .github at the root of your profile repo. Inside that folder, create another folder called workflows. You should have something like this .github\workflows now.
  • In the workflows folder, create a file called twitter-workflow.yml with the following contents along with your RSS feed link:
name: Latest Twitter Tweets
on:
  schedule:
    # Runs once a day because using Free tier in Rss.app
    - cron: '0 0 * * *'
  workflow_dispatch: # Run workflow manually (without waiting for the cron to be called), through the Github Actions Workflow page directly.

jobs:
  update-readme-with-twitter:
    name: Update this repo's README with latest tweets
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: gautamkrishnar/blog-post-workflow@master
        with:
          comment_tag_name: "TWITTER"
          feed_list: "<<[[PLACE YOUR RSS FEED LINK HERE]]>>"
          commit_message: "Updated with the latest tweets"
          committer_username: "twitter-bot"
          committer_email: "twitter-bot@example.com"
Enter fullscreen mode Exit fullscreen mode
  • Back at the root of your repo, add the following to your README.md file where you want the tweets to appear:
### 📱 Latest Tweets

<!-- TWITTER:START -->
<!-- TWITTER:END -->
Enter fullscreen mode Exit fullscreen mode
  • Once everything is saved, you can manually trigger the GitHub action that will replace the above TWITTER comments with your tweets so you don't have to wait. Just go to Actions at the top of your profile repo, select Latest Twitter Tweets on the left under Workflows, and then select Run workflow on the right. Assuming enough time has passed for the Rss.app service to parse your tweets, you should see the last 5 tweets on your GitHub profile.

Conclusion

In theory, the Blog Post Workflow can support any RSS feed-based service, but it already has direct, out-the-box support for many popular services. It also provides tons of configuration options, which I used to adapt the output more for Twitter. Other than the Free tier service only parsing once a day, this approach works well, and it is compact. If you know of any other approaches that do not use cards, or has a better Free tier for parsing tweets, please share it in a comment.

Latest comments (2)

Collapse
 
christinepinto profile image
Christine Pinto

It works like a charm. Thanks for sharing

Collapse
 
c0der4t profile image
Montè

Thanks for this, it worked like a charm 🚀