BlogにGitHub Activityを表示した

GitHub使ってるんだから、Blogに草生やしたいよね!!

ブログでサイトバーに草(GitHub Activity)生やしてたのでやってみたくなった

  • はてなブログのモジュールにそんなのあるのかと探したけど見当たらない
  • GitHub Activityで調べても何も出ない
  • 見かけた本人の以下ブログに記載見つけた

blog.jnito.com

はてなブログに草生やすには

  • はてなブログの記事の管理画面から、デザイン→カスタマイズ→サイトバー→モジュール追加→HTMLをクリック
  • 以下を貼り付け
<div class="github-link">
  <i class="fab fa-github-square"></i>
  <a href="https://github.com/GitHubアカウント名" target="_blank">GitHubアカウント名</a>
</div>
<img src="https://grass-graph.moshimo.works/images/GitHubアカウント名.png?rotate=270&width=568&height=88">
  • GitHubアイコン出すために先程の「ヘッダ」の「タイトル下」に以下追加
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

参考サイト。利用させて頂いたHerokuApp作者に感謝

  • 以下作者様サイト GitHub の草状況を PNG 画像で返す heroku app をつくってみた

blog.a-know.me

github.com

  • ちなみにこのサイトではサイドバーないので、ヘッダにrotateなしで表示してます