📦 GitHub Profile: The RIGHT Way to Show your latest DEV articles + BONUS 🎁
Tags: github, markdown, showdev, productivity
Published: 2020-08-05 15:18:35

Hello there ! 👋

1 week ➡️ 1 article ! [#followMe](https://dev.to/viclafouch)

> We just hit __1250__ followers ! Thank you very much ! 🥰

As you may have noticed, it is now possible to display a __GitHub profile__. 🧑‍🌾

If you don't already have one, I recommend that you create one using this link below:

{% link https://dev.to/m0nica/how-to-create-a-github-profile-readme-1paj %}

Here, I'm going to show you __how in 2 minutes it is possible to show your latest blog posts__ directly to your __GitHub profile__ in an automated way.

![viclafouch profile](https://dev-to-uploads.s3.amazonaws.com/i/oclds3iptyxhj7ylfidt.png)
<figcaption>Example of GitHub Profile</figcaption>

* [GitHub Profile Example 1](https://github.com/viclafouch)
* [GitHub Profile Example 2](https://github.com/gautamkrishnar)
* [GitHub Profile Example 3](https://github.com/khaosdoctor)
* ...
* *Share yours in the comments below!*

---

### Before to begin, be sure to have a Github Profile 💪

To get a profile on GitHub, follow these 3 steps below, if you have already one, you can skip this part.

1️⃣ [Create a new repository](https://github.com/new) with the same name (including casing) as your GitHub username.
2️⃣ Create a `README.md` file inside the new repo and add your content you want to show.
3️⃣ Commit and push your new README file!

---

## Show your last 3/5/10 DEV articles 🔥

[@gautamkrishnar](https://github.com/gautamkrishnar) whom we thank 😙, has created a small package allowing us to automate the retrieval of articles on different websites ([Dev.to](https://dev.to/), [Medium](https://medium.com/), [Stackoverflow](https://stackoverflow.com/), ...) and to show the result into your README file.

{% github gautamkrishnar/blog-post-workflow no-readme %}

### Step 1: Edit your __README.md__ 📝

Just add these 2 little Markdown lines to your `README.md` file. You can of course add your own content to the file, but __these 2 lines are required__ for the tutorial.

```yml
<!-- BLOG-POST-LIST:START -->
<!-- BLOG-POST-LIST:END -->
```

__Copy the code above__ and __paste it__ into your __README.md__.

For example on my [GitHub profile](https://github.com/viclafouch), I placed my DEV articles at the end of my file like that: 

![Readme Github profile](https://dev-to-uploads.s3.amazonaws.com/i/02dhy06zgb51za807d20.png)
<figcaption>🚸 CODE</figcaption>

![Example Github profile](https://dev-to-uploads.s3.amazonaws.com/i/28suf2sq6arr2tibx0fr.png)
<figcaption>🚸 WILL RENDER AFTER STEP 2</figcaption>

### Step 2: Create a simple bot 🤖

Now, we have to create a __GitHub workflow__. The goal 🎯 is to replace these 2 lines of markdown code by your DEV articles!

> A __workflow__ is a configurable automated process made up of one or more jobs. You must create a YAML file to define your __workflow__ configuration. *[Understanding the GitHub flow](https://guides.github.com/introduction/flow)*

To create a workflow 👇

* Go to the __Actions__ tab of your repository.

or
 
* Go to [github.com/$USERNAME/$USERNAME/actions/new](github.com/$USERNAME/$USERNAME/actions/new) (replace `$USERNAME` by your GitHub username.<br/>

e.g: [github.com/viclafouch/viclafouch/actions/new](https://github.com/viclafouch)

Then, select the simple workflow in order to start with the minimum necessary structure.

![GitHub workflow](https://dev-to-uploads.s3.amazonaws.com/i/1fxdtvnuwck2cclg7mve.png)

Rename the `blank.yml` file to `blog-post-workflow.yml` and simply insert this code below:

```yml
name: Latest blog post workflow
on:
  workflow_dispatch:
  schedule:
    # Runs every hour
    - cron: '0 * * * *'

jobs:
  update-readme-with-blog:
    name: Update this repo's README with latest blog posts
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: gautamkrishnar/blog-post-workflow@master
        with:
          # Your RSS feed url
          feed_list: "https://dev.to/feed/viclafouch"
          # Maximum number of posts you want
          max_post_count: 3
```

Here my [blog-post-workflow.yml file](https://github.com/viclafouch/viclafouch/blob/master/.github/workflows/blog-post-workflow.yml) if you need help.

2 important parameters ❗️ 

* `feed_list` which is __required__! It's your RSS feed url.
* `max_post_count` which is the maximum number of posts you want to show on your readme file. Default value is `5`.

You can find all parameters at [gautamkrishnar/blog-post-workflow#options](https://github.com/gautamkrishnar/blog-post-workflow#options).

And finally, __confirm the creation__ of the workflow. 

Now, the workflow works by itself and will retrieve every hour your DEV articles and will `commit` and `push` the result to your __README.md__ file.

> Note: In order to avoid waiting 1 hour to see the first change appear, you can manually trigger the workflow.

![History commit Update](https://dev-to-uploads.s3.amazonaws.com/i/p2mwru0s8ealtpwi33ln.png)
<figcaption>BEFORE / AFTER</figcaption>

## BONUS 🏆

Want to show your __latest Medium articles__ into your Github profile, or your __StackOverflow activity__, your __blog articles__ or even your __YouTube videos__ automatically ?

![Lucas Santos GitHub](https://dev-to-uploads.s3.amazonaws.com/i/qrpt98h42srv1qp92hwo.png)

Following are the list of some popular blogging platforms and their RSS feed urls:

| Name | Feed URL |
|--------|--------|--------|--------|
| [Dev.to](https://dev.to/) | `https://dev.to/feed/username` |
| [Wordpress](https://wordpress.org/) | `https://www.example.com/feed/` |
| [Medium](https://medium.com/) | `https://medium.com/feed/@username` |
| [Stackoverflow](https://stackoverflow.com/) | `https://stackoverflow.com/feeds/user/userid` |
| [Ghost](https://ghost.org/) | `https://www.example.com/rss/` |
| [Drupal](https://www.drupal.org/) | `https://www.example.com/rss.xml` |
| [YouTube Playlists](https://www.youtube.com) | `https://www.youtube.com/feeds/videos.xml?playlist_id=playlist_id` |
| [YouTube Videos](https://www.youtube.com) | `https://www.youtube.com/feeds/videos.xml?channel_id=channelId` |

You can find an example here: https://github.com/viclafouch. 

Do not hesitate to __share your GitHub Profile__ in order to show the way you have displayed your DEV articles! 😉

Cheers 🍻 🍻 🍻 

If you enjoyed this article you can follow me on [Twitter](https://twitter.com/TrustedSheriff "TrustedSheriff") or here on [dev.to](https://dev.to/viclafouch) where I regularly post bite size tips relating to HTML, CSS and JavaScript.

{% link https://dev.to/viclafouch/cancel-properly-http-requests-in-react-hooks-and-avoid-memory-leaks-pd7 %}

{% link https://dev.to/viclafouch/improve-your-productivity-with-snippets-of-javascript-on-the-chrome-devtools-3gfm %}