Creating a JSON API in GitHub Pages using the Twitter API and GitHub Actions

Posted on May 26, 2022 (1 minute read)

by Ivan Campos

  1. Create a new GitHub repository

  2. Add the following .yml file to .github/workflows with your BEARER Token

name: Refresh Elon Likes on: workflow_dispatch: schedule: # Runs every day at 5AM - cron: '0 5 * * *' jobs: refresh-feed: runs-on: ubuntu-latest steps: - name: Fetch API Data 📦 uses: JamesIves/fetch-api-data-action@releases/v1 with: ENDPOINT: https://api.twitter.com/2/users/44196397/liked_tweets?max_results=25&expansions=referenced_tweets.id,in_reply_to_user_id,referenced_tweets.id.author_id&tweet.fields=id,text,in_reply_to_user_id,referenced_tweets&user.fields=id,name,username CONFIGURATION: '{ "method": "GET", "headers": {"Content-Type": "application/json", "Authorization": "Bearer YOUR_BEARER_TOKEN"} }' SAVE_LOCATION: likes-elonmusk - name: Update resources uses: test-room-7/action-update-file@v1 with: file-path: likes-elonmusk/*.json commit-msg: Updated data github-token: ${{ secrets.GITHUB_TOKEN }}
  1. Ensure that your workflow has Read and write permissions within https://github.com/YOUR-NAME/REPO-NAME/settings/actions

  2. Test workflow within the Actions tab in your repository

  3. Once the workflow completes successfully, you will see a file named data.json within your SAVE_LOCATION (i.e. likes-elonmusk/data.json) which will be created even if the SAVE_LOCATION directory does not exist

  4. Add a basic index.html file to your repository's Code base

  5. Enable GitHub Pages on this repo's main branch

  6. Make an HTTPS GET request to retrieve your refreshed JSON file at https://YOUR-NAME.github.io/REPO-NAME/likes-elonmusk/data.json

Comments