無料サービスGtiHub Pagesで作るポートフォリオ

ポートフォリオが必要な理由

Webデザイナー・エンジニア両方でオススメのWeb上のポートフォリオのツールをご紹介します。

就職や転職活動において成果物やスキルを効果的に示すことで、自分をPR出来るうえに採用担当者の印象もグッと良くなります。

採用の担当者にも「できる事」「できない事」が伝わりやすくなります。

何をやってきたかを証明することにも繋がるポートフォリオの作り方を見ていきましょう。

ポートフォリオをサイトで公開しよう!

Webでポートフォリオを作成するにあたり記載しなければいけない事項は以下の通りです。

  • 自己紹介
  • スキル・技術レベル
  • 成果物
  • 自身の連絡先

紙ベースで作るものと基本的には変わりません。しかしポートフォリオサイトでは、サイト自体が成果物になります。

おしゃれなテンプレートで工程をスピードアップ!

ポートフォリオサイトを作成する時間があまりない、デザインが難しいといった場合には配布されているテンプレートを利用することが出来ます。

用意されているテンプレートに自分のプロフィールやスキルを書き込んでいくだけで、見栄えの良い素敵なサイトが作成できます。

GitHub Pagesでポートフォリオを公開

Webでポートフォリオを見せる場合、通常レンタルサーバーなどを借りる必要があります。

GitHubであればソースコードを管理しそのままGitHub Pagesで公開できるため手間も省けます。

GitHub Pages 4つの特徴

  • 独自ドメインが利用できる
  • 静的なウェブサイトのみ公開できる
  • ストレージ:1GBまで(推奨)
  • 転送量:100GB/月

通常は「ユーザー名.github.io」のアドレスでページは公開されますが、独自ドメインの設定をすることでGitHub Pagesでのホスティングが可能となります。

PHPやRuby、Pythonなどのサーバーサイドで動く言語については対応していないため、静的なウェブサイトのみ公開できる仕様です。

つまりHTML・CSS・JavaScriptで作成したページを公開する必要があります。

実際に利用する際の注意点として、「ストレージ:1GBまで」「転送量:100GB/月」の2つが挙げられますが、超過した場合はGitHub Supportから通知が届くようです。

※ホスティングとは
提供されているサーバーを借りて、そこにWebページを預ける事を指します。

GitHub Pagesの使い方

Youtubeで見るGithub Pages
https://youtu.be/2MsN8gpT6jY

GitHub Pageを作成するに当たって必要なものは以下の通りです。

  • GitHubアカウント
  • ポートフォリオサイト

Githubアカウントの作成

GitHub
https://github.com

「ユーザー名」「メールアドレス」「パスワード」を登録します。

リポジトリの作成

登録後、GitHub Pagesを公開する為にリポジトリを作成します。
命名の仕方は決められており、「<ユーザー名>.github.io」という名前で作成します。今後、このリポジトリにWebサイトのデータをアップロードします。

Github Desktopでデータをアップロードする

GitHub Desktopを利用することで簡単にGitの操作と、GitHubへのデータのアップロードが出来ます。

GitHub Desktop | Simple collaboration from your desktop

用意したポートフォリオサイトのデータを指定した保存先のフォルダにコピーします。コピー後、Github Desktopを開くと追加したファイルが反映されています。

「Summary」と「Description」と書かれた欄が、左サイドバーにありますが、今回追加したファイルの変更内容について、簡潔にタイトルを付ける必要があります。その後、「Commit to master」のボタンをクリックするとアップロードが出来ます。

Summary
必須項目。追加・編集した内容について簡潔に記載する。最初は、「first commit」などと付けてOK。日本語も可。
Description
オプション項目。追加・編集した内容について詳細に記載する。

最後に、「Publish branch」ボタンを押すことで、GitHub上にデータがアップロードされ、サイトが公開されます。

公開されたサイトを確認

「https://<ユーザー名>.github.io/」をブラウザで開くことで公開されたサイトを確認することが出来ます。表示されない場合は、少し待ってからリロードしてみましょう。

これで素敵なポートフォリオでPR出来ますね!

如何でしょうか。Webポートフォリオはインターネットが繋がっている環境であれば誰でも見ることが出来るので、多くの人に自分のスキルをPRすることが可能です!

就職や転職活動においてポートフォリオを利用すれば、成果物やスキルを効果的に示すことが出来ます。個人でも少ないコストでポートフォリオサイトを公開することが出来ますので、是非試してみて下さい。