GitHub Pagesでポートフォリオを作成してみた【Bootstrap + Font Awesome】
本ページはプロモーションが含まれています
GitHub Pagesを使って、ポートフォリオサイトを作成してみました。簡単にサクッと公開できるように、今回はBootstrapとFont Awesomeを使ってお手軽なサイトを作成しています。
作ったポートフォリオ
GitHub Pagesを使って以下のようなサイトを作成しました。
もなかのポートフォリオ
ソース（GitHub）
ポートフォリオ作成のポイント
Bootstrapを利用した
有名なCSSフレームワークのBootstrapを使っています。配布されているテンプレートを基本にドキュメントを参照して、カスタマイズしながら作成してみました。コーディング・デザインスキルがなくてもそれなりのサイトができるBootstrapは本当に便利ですね。利用したのは以下のページで紹介されている「Album」というテンプレートです。
ページのカスタマイズは以下のページのドキュメントを参照しながらやりました。
やってみたカスタマイズは以下のような感じ
- header部分のハンバーガーメニューを削除、代わりに画像を入れる
- title、meta情報などを入力
- Google アナリティクスを導入
- ボタンを変更
- mainコンテンツのカードに画像を挿入、見出しも追加
- カードの全体にリンクを適用
- 自己紹介以下をドキュメントを参照して手作り（画面サイズで並び替えしたいけどうまく行かなかった）
- 勉強がてら日本語のコメントを追加、あとで修正しやすいように
Font Awesomeを利用した
ページ上部のアイコンについてはFont Awesomeのアイコンを利用しています。アイコンの自作は大変なので、Font Awesomeのものを利用させてもらいました。無料で高品質なアイコンを表示することができるようになりますのでおすすめです。以下のサイトより参照しました。
GitHub Pagesを使ってポートフォリオを作成するメリット
今回、GitHub Pagesを使ってポートフォリオサイトを作成してみました。作ってみて感じたメリットを列挙してみます。
- GitHubのアカウントさえあれば無料でサイトを公開できる
- Google アナリティクスが導入できる
- サーチコンソールにも登録できる
- 無料でドメインを取得できる（ユーザー名.github.io）
- SSL（https://〜）もデフォルトで対応
- やろうと思えば独自ドメインも使える（ドメインは自分で用意）
- 用意した画像をGitHubにアップして、参照可能（多分、CSSやJSも）
- 外部のCSSやJSも参照可能（BootstrapやFontawesomeなど）
- 無料のレンタルサーバーなどでありがちな、広告強制表示はない
思いつきでまとめてしまいましたが、GitHubアカウントさえあればお手軽に公開出来てしまうので、GitHub Pages、すごく良いと思います。ただしのような制約があります。
- GitHub Pagesでサーバーサイドのプログラムを動かすことはNG
- 動的なコンテンツの公開は不可（静的ページのみ）
- 容量は1GBまで
ペライチのLPなどを作成するならGitHub Pagesで十分過ぎますが、ガッツリコンテンツを作り込んで公開したいといった場合には向かないかもしれません。なので、ポートフォリオサイトを作るくらいならGitHub Pagesで十分です。
まとめ
今回はGitHub Pagesを使って実際にページを公開したものを紹介させてもらいました。無料でここまでできるのであれば、非常に魅力的に思えました。ただし、一部日本語化されているものの基本的には英語のドキュメントが中心となりますので、なれるまでは少しハードルを感じてしまうかもしれません。自分もGitHubを始めたばかりなので全部の機能はまだ把握出来ていませんが、まずはGitHub Pagesを触りながら勉強しています。もしWEBページを公開してみたいという方がいましたらぜひ活用してみてくださいね。
