はじめに
自分のスキルや成果物の可視化やGithub以外のアウトプットを一元管理するため、ポートフォリオサイトを作成しました。
今回は作成する上で気をつけたことや使用したツール、ホスティング方法について備忘録としてまとめたいと思います。
URL: https://seiyaiwanabe.github.io/portfolio_site/
目次
1.記載内容
2.使用したサービス
3.Github Pages
1. 記載内容
ポートフォリオサイトを作成した理由は主に企業の採用担当者の方に見てもらうためです。
「誰にポートフォリオサイトを見せたいのか」という要素は最も大事だと思うのでここを決めることでサイト全体の構成も決まってくると思います。
今回は以下の要素を記載しました。
- 使用した言語（技術）
- 作品紹介
- 開発に使用したツール
- アウトプットへのリンク(今回はQiita)
また工夫した点としてサイト全体にアニメーションを盛り込みました。
JSの練習になるのと少しでもビジュアルを魅力的にするためです。
ただし、多様しすぎるとエゴになってしまうので、線引が難しいですが、
情報を整理するという目的を忘れないことが大事だと思いました。
アプリ自体はRuby on Railsで作成し、インフラにAWSを使ってデプロイしています。
2. 使用したサービス
コーディングはイチからしました。
bootstrapやテンプレートの類は使用していません。
自分の手を動かして少しでもプログラミングに慣れたかったためです。
そのため使用した外部サービスはFontAwesomeとFavicon作成ツールにとどまりました。
FontAwesome（ヘッダーの中のアイコンに使用）→https://fontawesome.com/
Faviconの素材（159,700のフリーアイコンが集まるサイト）→https://icons8.jp/
Faviconは拡張子がjpgやpngでも表示させることが出来ます。
まずダウンロードした素材のファイル名をicon.pngに変更しimagesディレクトリに格納します。
図にするとこのような階層になります。↓
あとはhtmlファイルに一行追記するだけです。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"> # FontAwesome導入
<link rel="icon" type="image/x-icon" href="images/icon.png"> # 追記
<title>Document</title>
</head>
これでアイコンが表示されます。
3. Github Pages
GitHub Pages は、GitHub のリポジトリから HTML、CSS、および JavaScript ファイル を直接取得し、任意でビルドプロセスを通じてファイルを実行し、ウェブサイトを公開できる静的なサイトホスティングサービスです。(Github Dogs)
こちらの引用でも記載してる通り、静的なサイトのためのホスティングサービスなので動的なサイトをホスティングさせることは出来ません。なのでRailsアプリはAWSでデプロイを行っています。
今回のポートフォリオサイトのようにサーバーサイドに関与しないコンテンツを世界に公開する手段としては
Github Pagesは無料で利用できて、プロセスが簡単なのでおすすめです。
おわりに
最後まで読んでいただきありがとうございました！
お疲れさまでした。。。