【要約】GitHub Pagesで自己紹介サイト「たきつぼ」を制作・公開しました
この投稿は昨日たきぶろぐで投稿された記事の要約です。
全文はこちら
表題のとおり、GitHub Pagesで自己紹介サイトを制作・公開したのでご報告と、なんで制作したのかとかそういう裏話的なものをしていけたらと思います。
GitHub Pagesとは？
GitHub PagesとはGitHubが提供する静的Webサイトのホスティングサービスです。GitHub Pagesの説明にもある通り、GitHub Pages上で公開できるWebサイトは、HTML、CSS、JSで構成されたWebサイトのみです。
なぜGitHub Pagesにしたか
ブログみたいに頻繁に更新する予定はあまりないので、WordPressつかってサーバー借りて...という必要性は無いと思っていました。また、後述のように学習・コーダーとしてのレベルアップもかねてまだやったことのないことをやりたかったので、テンプレートに縛られるようなサービスは使用せずに、GitHub Pagesにしたというわけです。
今回の制作ではじめて使用したもの
GitHub Pages（GitHub）
GitHub自体は実ははじめてではなく、学生時代にちょっと学習して触ったことがあるのですが、正直イマイチ理解できていなかったんです。ただ、業務でコーディングをする機会が増えたので、最低限の機能だけでも理解しておくために再度学習することにしました。
最低限のリポジトリをつくって、コミットして、ブランチを切って、プルリク送って、プレビューしてマージするという一連の流れは理解できました。
パララックスライブラリ「Luxy.js」の使用
PCで見た際にはパララックス効果をONにしています。これが今回の制作ではじめて使用したものの2つ目です。
以前にパララックスライブラリを使用したことはあったのですが、今回はそれとはまた別のものを使用しています。パララックスは最近の流行ですからね。高級感を演出したり、サイトに重厚感を出すためには最適です。これからパララックスを使用した案件が来るかもしれないので、事前に使い方とかを調べておこうという感じです。
Flexboxを使わず、CSS Gridを使用したレイアウト構築
僕が専門学生だった頃はレイアウト構築はFlexboxが主流でした。しかし、それに代わる新たなCSS Gridが出て、最近IE11がサポートを終了したことで、モダンブラウザではすべて対応するようになりました。
そのため、今回の制作ではCSS Gridをフル活用しています。Gridさん働きすぎて過労死しないといいですが。Flexは1度も使用していません。
モバイルファーストで構築
これまでCSSを書く際、先にPC・SP共通のコード、後にメディアクエリを使用してSPのコードを書くようにしていました。今回の制作では先にSP・PCのコード、後にメディアクエリを使用してPCのコードを書いています。
CSSは上から順番に読み込まれていくため、SPの記述を一番最後に置くと、読み込みに時間がかかるため、SPのコードを先にした方がサイトの表示が若干早くなるとのことで、はじめてモバイルファーストでCSSを記述しました。
以上、GitHub Pagesで自己紹介サイト「たきつぼ」を制作・公開したお話でした。
この投稿は昨日たきぶろぐで投稿された記事の要約です。全文はこちら↓