GitHubで簡単にソフトウェア開発者としてのポートフォリオサイトを作れる
最近、GitHubで簡単にポートフォリオ的なサイトを作れることを知りました。私の場合は、以下のような感じです。
ちなみに、以下のGitHubが提供している「personal-website」というリポジトリの説明通りにやっただけです。
ネットで調べてみたところ、意外に知られてないような気もしたので、簡単に日本語で使い方を解説してみることにします。ちなみに、当然ながらGitHubのアカウントと知識がある方が対象となります。GitHubが何かわからない人は、ここで読むのをやめるか、もし興味あれば以下の記事を読んでみて下さい。
GitHubでのポートフォリオサイトの作り方
ポートフォリオサイトを作る仕組みですが、そもそもGitHubにはリポジトリの内容をWebサイトとして公開できる「GitHub Pages」という機能があります。詳細は以下記事参照下さい。
「personal-website」はこの「GitHub Pages」の機能を使って公開するWebサイトの内容を自動で生成するものです。
そのために、まずは「personal-website」を自分のGitHubアカウントにforkします（forkの仕方は省略します、基本的には右上にあるforkってボタンをクリックするだけです）。
私の場合、forkしたリポジトリは以下となります。
続いて、Rubyをセットアップします。Rubyのセットアップ方法は、OSによって異なるため、以下サイト参照下さい。
私の場合は、以前一度インストールしていたこともあったのか、以下コマンド実行するだけで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のアカウント情報を元に自動生成されたポートフォリオサイトが以下のように表示されます。
問題なければ、以下コマンド実行して、生成したWebサイトをリポジトリにアップしましょう。
$ git add . $ git commit -m "Initial commit" $ git push
続いて「personal-website」の設定画面で、以下の通り設定しましょう。
詳細は以下記事参照下さい。
ポートフォリオサイトのカスタム
作成したポートフォリオサイトが気に入らなければ、カスタムすることも可能です。
私の場合は、表示できるリポジトリの数が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」で面白いサイト作れたりするかもなーとか少し思ったりしました。
