DEV Community

Cover image for Show Latest Blog Posts in Twitter Header with GitHub Actions
Simon Wicki
Simon Wicki

Posted on

Show Latest Blog Posts in Twitter Header with GitHub Actions

I like writing about my dev journey.

Wouldn't it be great if you could show off your latest blog posts in my Twitter header automatically?

This way you could better showcase what you're about. People visiting your Twitter profile will know right away if they should or shouldn't leave a follow.

My Workflow

My GitHub workflow that uses my GitHub action.

This twitter-header-blog-posts-action GitHub Action is responsible for doing the following:

  • Fetch last 3 blog posts from your blog
  • Draw fetched blog posts titles onto header
  • Draw any text onto header
  • Draw any images onto header
  • Use Twitter API to upload your dynamic banner

Submission Category:

Maintainer Must-Haves / Wacky Wildcards

Yaml File or Link to Code

In this posts cover image you see my Twitter header that I created with this action. Checkout the following workflow.yml I used to create it:

name: Update Twitter header with latest blog posts
on:
  schedule: # Run workflow automatically
    # This will make it run twice a day (06:00 and 18:00)
    - cron: 0 18 * * *
    # Run workflow manually (without waiting for the cron to be called), through the Github Actions Workflow page directly
  workflow_dispatch:
jobs:
  udpate-twitter-blog-posts:
    name: Update Twitter header with latest blog posts
    runs-on: ubuntu-latest
    steps:
      - uses: zwacky/twitter-header-blog-posts-action@main
        with:
          BLOG_RSS: https://dev.to/feed/zwacky
          DRAW_TEXTS: '[["h1", "Hey, I''m Simon", 125, 100], ["h1", "My latest blog posts", 835, 70], ["h1", "Follow   and say hi!", 545, 390], ["p", "I tweet about webperf, javascript,", 125, 177], ["p", "my learnings and books.", 125, 212]]'
        env:
          TWITTER_API_KEY: ${{ secrets.TWITTER_API_KEY }}
          TWITTER_API_SECRET: ${{ secrets.TWITTER_API_SECRET }}
          TWITTER_ACCESS_TOKEN: ${{ secrets.TWITTER_ACCESS_TOKEN }}
          TWITTER_ACCESS_SECRET: ${{ secrets.TWITTER_ACCESS_SECRET }}
Enter fullscreen mode Exit fullscreen mode

See the how to use section to get a step-by-step guide how to obtain Twitter API credentials and more.

See the input docs to see what customisation is available.

Additional Resources / Info

Discussion (0)