How To Easily Automate Your Github Profile to Showcase Your Work

I have a confession to make. I'm lazy when it comes to updating my Github profile. I love creating content (both here and on Youtube). And I know I should really link to it from my GitHub profile. But when it comes to actually doing the drudge work of linking everywhere to it I just can't be bothered, even though I know it makes sense. But I subscribe to the "automate all the things" mantra. And if I can learn stuff in the process, it's a win-win.

Photo by alise storsul on Unsplash

And Github gives us the means to automate processes, using a tool called Github Actions. So let's see what we can do with that. We will be :

· Creating a profile repository(#77b0 "Creating a profile repository")\ · Setting up the Markscribe Template(#554b "Setting up the Markscribe Template")\ · Fetching Medium's RSS Feed(#3de9 "Fetching Medium's RSS Feed")\ · Fetching YouTube content & stats (using Shields.io)(#5d85 "Fetching YouTube content & stats (using Shields.io)")\ · Configuring GitHub actions(#eced "Configuring GitHub actions ")\  ∘ Create the Personal Acces Token(#fdd5 "Create the Personal Acces Token")\  ∘ Create the GitHub Action(#482c "Create the GitHub Action ")\ · And Sitting back and Relaxing (or not)(#b17e "And Sitting back and Relax (or not)")

(And if you want a peek at the end result, you can see my automatically updating profile(https://github.com/Kodaps). )

Creating a profile repository

The first step, if you haven't done so yet, is to set up a special repository in GitHub that will serve as your profile repository (i.e. a README.md file in the repository provides the content for the profile page). This is really simple: for a personal account, create a repository with the same name as your GitHub user name. For an organization profile, create a repository called .github.

GitHub will now tell you that you've found a special repository. Yay! The first step is to clone that repository locally onto your computer. Once that is done, we're ready to move on. All the rest below is done within the repository.

Setting up the Markscribe Template

We'll be using Markscribe, a templating system for producing markdown files, using the go template language syntax. If you don't know how to use the go template syntax, don't worry, I don't either. It's easy enough to understand what is going on, as you'll see if you look at the example template. In fact, the first step is to create a template/README.md.tpl file and copy the contents of the example template(https://raw.githubusercontent.com/muesli/markscribe/master/templates/github-profile.tpl) over to it. The template looks something like this:


    ### Hi there 👋

    #### 👷 Check out what I'm currently working on
    {{range recentContributions 10}}
    - [{{.Repo.Name}}]({{.Repo.URL}}) - {{.Repo.Description}} ({{humanize .OccurredAt}})
    {{- end}}



    [... and other Github related content ...] 

    #### 💬 Feedback

    Say Hello, I don't bite!

    #### 📫 How to reach me

    - Twitter: https://twitter.com/...
    - Fediverse: https://mastodon.social/@...
    - Blog: https://...
	- 

Feel free to add a header image at the top, and make sure you configure the "How to reach me" section of the template.

Fetching Medium's RSS Feed

Markscribe also supports connecting to RSS feeds. The good news is that you can connect to both YouTube and here to Medium to retrieve the RSS feeds. The basic structure of a generic RSS section is something like this:

    #### 📜 My recent blog posts
    {{range rss "https://.../posts/index.xml" 5}}
    - [{{.Title}}]({{.URL}}) ({{humanize .PublishedAt}})
    {{- end}}


Where you just need to replace the url (https\://…/posts/index.xml) with a valid value.

Let's start with the simple case. To fetch the RSS feed of your Medium articles, simply add your user name in https\://medium.com/feed/@\<username>. So for instance my feed is https://medium.com/feed/@gosev

Key Takeways

Fetching YouTube content is simple, at least initially. Getting an RSS feed for a channel's latest videos can be set up by fetching:

https://www.youtube.com/feeds/videos.xml?channel_id=<channelId>

However… Let's not settle for something as basic as that. After all, you can also show images in your GitHub profile, and that leaves room for a bit of fun. For example, if you add :

 <img src="https://img.shields.io/youtube/channel/subscribers/<id>?style=for-the-badge"></img>

You end up with a badge that looks like this (under the title):

(https://cdn-images-1.medium.com/max/800/1*yp1DAU-tmYj-2n0WwACoiw.png)

And using the video's URL we are also able to deduce the URL for the thumbnail. Because if we slice the URL from the 32nd character onwards we get the Video Id, and the thumbnail can be found at:

    https://img.youtube.com/vi/<videoId>/default.jpg

Now all that is left is to format the results as a table using HTML to have the thumbnails on the left and the titles on the right and add in a shield.io badge that shows the number of views a video has. So one section looks like this in code:

📜 🇫🇷 My recent French videos

<img src="https://img.shields.io/youtube/channel/subscribers/UCzdX32OIhpfrdxQRhN2s98w?style=for-the-badge"></img>
<table>
{{range rss "https://www.youtube.com/feeds/videos.xml?channel_id=UCzdX32OIhpfrdxQRhN2s98w" 10}}
<tr>
  <td>
    <img src="https://img.youtube.com/vi/{{slice .URL 32}}/default.jpg"></img>
  </td>
  <td>
    <a href="{{.URL}}">{{.Title}}</a> ({{humanize .PublishedAt}})  
    <br/>
    <img src="https://img.shields.io/youtube/views/{{slice .URL 32}}?style=flat-square"> </img>
  </td>
</tr>
{{- end}}
</table>

This ends up looking something like this:

![](#)(https://cdn-images-1.medium.com/max/800/1*JYRuCrUzUiPFAz7leTiYSw.png)

Now that we've set that up… time to automate the profile updates!

### Configuring GitHub actions

#### Create the Personal Acces Token

The first thing to do (if you don't have one already) is to set up a **Personal Access Token** on GitHub. You will need to go to `Developer settings` \> `Personal access tokens` \> `Generate new token`.You will need the following scopes : `repo:status`, `public_repo`, `read:user`, `read:org`. Give it an **indefinite lifetime**. It will look something like this:

ghp_zabwMCx576kdcvStiyG19D96J2jWnd4MDgQI

  You might like to **save it somewhere safe** since GitHub is not going to show it to you again. Then go over to your profile repository, and then go to `Settings` \> `Secrets` \> `Actions` and click on `New Repository Secret` . Here, you'll want to **create a new secret** called `PERSONAL_GITHUB_TOKEN` and paste in the token you've just created.

#### Create the GitHub Action

Now we just need to set up the GitHub Action. For that, we just need to create a folder called `.github` and within that folder, another one called `workflows` .

Inside the .github/workflows folder create a file called "readme-scribe.yaml". (see [here](#)(https://raw.githubusercontent.com/Kodaps/.github/main/.github/workflows/readme-scribe.yml)) The action is configured to run every hour and on every push, and it has one job with three simple steps:

*   **Checkout** the repository code
*   **Render the template** using the personal access token
*   **Push** the code back to the repository

Beware: if the profile is for an organization (as is mine), make sure you update the path for the README output file within the Render Template step.

```yaml
name: Update README

    on:
      push:      # run @ every push
      schedule:  # run @ every hour
        - cron: "0 */1 * * *"

    jobs:
      markscribe:
        runs-on: ubuntu-latest
        steps:
          - name: Checkout
            uses: actions/checkout@v2
            with:
              ref: main
          - name: Render Template
            uses: muesli/readme-scribe@master
            env:
              GITHUB_TOKEN: ${{ secrets.PERSONAL_GITHUB_TOKEN }}
            with:
              template: "templates/README.md.tpl"
              # Use "profile/README.md" instead on an org profile
              writeTo: "README.md"
          - name: Push
            run: | 
              git config user.name readme-scribe 🤖
              git config user.email actions@github.com
              git add .
              git commit -m "generated profile"
              git push origin main

Now commit the file and git push to the remote repository. Everything should be working. You can check by going to the Actions tab in your profile repository and checking out what the actions are logging out.

And Sitting back and Relaxing (or not)

Now that's done, you should have an automatically updating profile that shows your work within GitHub, your content here, and any YouTube videos you might have produced. Time to kick back and relax… or to get back to producing content to flesh out the profile!

Social
Made by kodaps · All rights reserved.
© 2023