MyEnigma

とあるエンジニアのブログです。#Robotics #Programing #C++ #Python #MATLAB #Vim #Mathematics #Book #Movie #Traveling #Mac #iPhone

GitHubのサマリを自分のブログやホームページに表示させる方法

f:id:meison_amsl:20170321090708p:plain

目次

はじめに

最近、すっかり

公開して問題無いコードは

GitHubに公開するようになったのですが、

GitHubでの活動のサマリー

(アカウント名や、スターの多いリポジトリなど)

を自分のブログやホームページに埋め込みたくなり、

色々調べた所、下記のjavascriptライブラリを見つけました。

github.com

 

いくつか修正を加えて、使ってみた所

冒頭の写真ようなGitHubのサマリー(GitHub Widget)を

自分のホームページに簡単に表示させることができたので、

その方法を紹介したいと思います。

  

改良版github-widgetの使い方

前述のjavascriptライブラリですが、

いくつか問題があったので、

下記のリンクのforkし改良したものを現在使用しています。

github.com

  

修正点としては、

  • 表示されるTop repositories (スターの多いリポジトリ)を3から5つに

  • Widgetの末尾に総取得スター数を表示

するようにしました。

 

使い方としては、

上記のリポジトリをWebサーバのどこかにcloneして、

下記のようにsrc/widget.jsをhtmlの中でロードし、

divタグのdata-usernameを自分のGitHubのアカウント名にするだけです。

<div class="github-widget" data-username="AtsushiSakai"></div>
<script src="static/github-widget/src/widget.js"></script>

すると冒頭のスクリーンショットのような

GitHubのアカウント名や、

リポジトリ数、フォロー数、フォロワー数、

スターの多いリポジトリリスト、

フォローボタン、総スター取得数

などを表示したウィジェットが表示されるはずです。

 

ちなみに自分は下記のような個人プロジェクトのホームページに

上記の方法で埋め込んでいます。

atsushisakai.github.io

 

最後に

できれば、

GitHubの緑の草も表示させるようにしたいです。

 

参考資料

myenigma.hatenablog.com

myenigma.hatenablog.com

myenigma.hatenablog.com

myenigma.hatenablog.com

myenigma.hatenablog.com

わかばちゃんと学ぶ Gitの使い方入門〈GitHub、Bitbucket、SourceTree〉

わかばちゃんと学ぶ Gitの使い方入門〈GitHub、Bitbucket、SourceTree〉