Customizing & Automating GitHub Readme

Hey guys!

This year, I decided to work on my rebranding, and the first item on my to-do list was to transform my GitHub Readme page.

I will work you through how I got things done in a quick summation.

Banner

I saw a Linkedin Banner template in the Figma Community and, a profile picture frame in webpik.com, knowing my little way around Figma customized my banner to my liking.

Structure & Layout

In the overall structure and layout of my readme, I took initiative to work towards the feel and presentation I wanted, and also drew inspiration from a couple of GitHub users' readme pages i.e https://github.com/FrancescoXX/FrancescoXX and https://github.com/eddiejaoude/eddiejaoude.

Icons & Badges

All stack and technologies icons were gotten from https://devicon.dev/, and badges from https://shields.io/ and "https://forthebadge.com.

Automation of blog posts from Hashnode & Dev.To

I automated my Hashnode and Dev.To articles to reflect on my GitHub page. Which was quite easy to set up using GitHub Actions.

Navigate to the action tab on your GitHub account and create a workflow. That is one for your Hashnode articles and another for your Dev.TO articles (although you can run both in a single file)

This would go in your GitHub readme page

<table><tr><td valign="top" width="50%">
## Hashnode Articles
<!-- HASHNODE-BLOG-LIST:START -->
<!-- HASHNODE-BLOG-LIST:END -->

</td><td valign="top" width="50%">

## DevTo Articles
 <!-- DEVTO-BLOG-LIST:START -->
<!-- DEVTO-BLOG-LIST:END -->

</td></tr></table>

Kindly ensure you commit the changes in your Read.md file before running the workflows below, and also update the file with your username as indicated.

<github-username>/.github/workflows/devto.yml

name: Automating DevTo Articles
on:
  schedule:
    - cron: '0 6 * * *'
  workflow_dispatch:

jobs:
  update-readme-with-devto-articles:
    name: Update this repo's README with the latest DEV.to Articles
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: gautamkrishnar/blog-post-workflow@master
        with:
          comment_tag_name: "DEVTO-BLOG-LIST"
          feed_list: "https://dev.to/feed/<your-user-name>"
          commit_message: "recent dev.to posts updated"

<github-username>/.github/workflows/hashnode.yml

name: Automating Hashnode Articles
on:
  schedule:
    - cron: '0 6 * * *'
  workflow_dispatch:

jobs:       
  update-readme-with-hashnode-articles:
    name: Update this repo's README with the latest Hashnode Articles
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: gautamkrishnar/blog-post-workflow@master
        with:
          comment_tag_name: "HASHNODE-BLOG-LIST"
          feed_list: "https://<your-hashnode-username>.hashnode.dev/rss.xml"
          commit_message: "recent hashnode posts updated"

The workflows are each set to run for a 6 hours interval but can be customized to your preference.

Kindly leave a star if you found this useful, and feel free to reach out for further clarifications. https://github.com/gbengafagbola/gbengafagbola