GitHubでソフトウェア開発者としてのポートフォリオサイトを自動的に楽々作成する方法

personal-website

GitHubで簡単にソフトウェア開発者としてのポートフォリオサイトを作れる

 最近、GitHubで簡単にポートフォリオ的なサイトを作れることを知りました。私の場合は、以下のような感じです。

 ちなみに、以下のGitHubが提供している「personal-website」というリポジトリの説明通りにやっただけです。

 ネットで調べてみたところ、意外に知られてないような気もしたので、簡単に日本語で使い方を解説してみることにします。ちなみに、当然ながらGitHubのアカウントと知識がある方が対象となります。GitHubが何かわからない人は、ここで読むのをやめるか、もし興味あれば以下の記事を読んでみて下さい。

GitHubでのポートフォリオサイトの作り方

 ポートフォリオサイトを作る仕組みですが、そもそもGitHubにはリポジトリの内容をWebサイトとして公開できる「GitHub Pages」という機能があります。詳細は以下記事参照下さい。

 「personal-website」はこの「GitHub Pages」の機能を使って公開するWebサイトの内容を自動で生成するものです。

 そのために、まずは「personal-website」を自分のGitHubアカウントにforkします(forkの仕方は省略します、基本的には右上にあるforkってボタンをクリックするだけです)。

 私の場合、forkしたリポジトリは以下となります。 GitHub - karaage0703/personal-website: Code that'll help you kickstart a personal website that showcases your work as a software developer.

 続いて、Rubyをセットアップします。Rubyのセットアップ方法は、OSによって異なるため、以下サイト参照下さい。

Installation | Jekyll • Simple, blog-aware, static sites

 私の場合は、以前一度インストールしていたこともあったのか、以下コマンド実行するだけでOKでした。

$ gem install jekyll bundler
$ bundle install

 あとは、ターミナルで以下コマンド実行し、forkした「personal-website」をクローンし、サイトを自動生成してテストします。

$ git clone https://github.com/karaage0703/personal-website
$ cd personal-website
$ bundle exec jekyll serve

 最後の$ bundle exec jekyll serveを実行した後に、http://localhost:4000をブラウザで開くと、GitHubのアカウント情報を元に自動生成されたポートフォリオサイトが以下のように表示されます。

personal-website

 問題なければ、以下コマンド実行して、生成したWebサイトをリポジトリにアップしましょう。

$ git add .
$ git commit -m "Initial commit"
$ git push

 続いて「personal-website」の設定画面で、以下の通り設定しましょう。

f:id:karaage:20190225001157p:plain:w640

 詳細は以下記事参照下さい。

ポートフォリオサイトのカスタム

 作成したポートフォリオサイトが気に入らなければ、カスタムすることも可能です。

 私の場合は、表示できるリポジトリの数が9個までだと、全部表示されなかったので、100まで増やしてみました。_includes/projects.htmlを以下の通り修正しただけです。

 <h2 {% if site.style == 'dark' %}class="text-white"{% endif %}>My Projects</h2>
 <p class="f4 mb-4 {% if site.style == 'dark' %}text-white{% else %}text-gray{% endif %}">GitHub repositories that I've built.</p>
 <div class="d-sm-flex flex-wrap gutter-condensed mb-4">
-  {% for repository in site.github.public_repositories limit: 9 %}
+  {% for repository in site.github.public_repositories limit: 100 %}
     <div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
       {% include repo-card.html %}
     </div>

 もちろん、他の箇所もいくらでも修正可能です。

まとめ

 GitHubでポートフォリオサイトを簡単に作成する方法を紹介してみました。「GitHubのプロフィールページがポートフォリオサイトみたいなものだし、それで良いじゃん」と言われたら、まあその通りなのですが「personal-website」を使えば、好きにカスタマイズできるのが良い点ですね。その気になれば、デザイン含め1からサイトを構築できます(もっとも、その場合は「personal-website」使う意味あんまり無いですが)。

 個人的には、Ruby使ってサイトを生成する仕組みが知れたのがよかったかなと思います。ここら辺の分野は全然知識ないのですが、カスタムしようと色々みてたら、なんとなく仕組みが分かって、面白いですね。これ応用したら「GitHub Pages」で面白いサイト作れたりするかもなーとか少し思ったりしました。

関連記事