Adding a github chart/calendar to Hugo

[flight505]

@flight505

HI,
I am new to Hugo and I am trying to customize my site. One thing I wanted to add to the home page is a github chart/calendar. I am not really sure how to do it, but I found a couple of possibilities:
GitHub - Bloggify/github-calendar: Embed your GitHub calendar everywhere. - I am not sure where to add the code, or how to install so it still works after deployment and also how to control the size.

Another option is GitHub - 2016rshah/githubchart-api: Embed github contributions chart as image - it looks easy but again where should I add the one-liner if I just want it on the main home page?

I am sure a good description would be great for others looking to add this. - Thanks

One solution:
setup a basic _index.md
now you have two choices the only thing you need is the exchange the Your_git_handle_here with your own git username.

First the simple version:

<!-- Alignment options!!!!! -->
<div align="center">
  <img width="600" height="300" src="https://ghchart.rshah.org/409ba5/Your_git_handle_here">
</div>

This will give you a blue version - you can change it as you like. Change this → /409ba5/

The second option also provides additional information such as longest streak etc.
add the following to your _index.md or other .md

<!-- Include the library. -->
<script
  src="https://unpkg.com/github-calendar@latest/dist/github-calendar.min.js">
</script>

<!-- Optionally, include the theme (if you don't want to struggle to write the CSS) -->
<link
  rel="stylesheet"
  href="https://unpkg.com/github-calendar@latest/dist/github-calendar-responsive.css"
/>

<!-- Prepare a container for your calendar. -->
<div class="calendar">
    <!-- Loading stuff -->
    Loading the data just for you.
</div>

<script>
    // or enable responsive functionality:
    GitHubCalendar(".calendar", "Your_git_handle_here", { responsive: true },{ tooltips: true });

</script>

Thanks chrillek