Salon.ioとGitHub Pagesでポートフォリオサイトをつくってみた

新ポートフォリオサイト新ポートフォリオサイトのスクリーンショット可変グリッドデザインで画像を主役に。
キャプションからGitHub Pages公開ページとリポジトリに飛べるので、
ブラウザ上での動き・コードも見せられるようになりました。

背景

これまではGoogle Page作成のポートフォリオサイトを公開してきたけれど、画像とテキストのみになっていた。
画像は細長いものが多くてなかなか綺麗に見せられないし、量が増えてからレイアウト調整めんどくさいな...
GitHubでコードも見せたいし、実際のブラウザ上での動きも見せられたらな...

とか考えていたところ、こんなツイートが目に入り。

webサイトのポートフォリオなら
salonがおすすめ。直感的に使えてレスポンシブも勝手にやってくれる。グリッドデザインなので細長くてもいける。
静的サイトは画像のリンクをgithubpagesに置けばコードや動きも見せれる(ここまでやったほうがいい！)

無料で手っ取り早いポートフォリオの作り方です😀 pic.twitter.com/rcn9K6NzSF
— ちづみ (@098ra0209) 2019年10月7日

これだー！！

ということで、つくってみました。

Salon.io

ドラッグ&ドロップで誰でも簡単に画像を公開できるサービスとのこと。
Salon.io - A Whole New Way Of Presenting Artwork Online
どんな大きさでも良い感じにグリッドデザインになるようなので、今もやもやしている部分はこれで解決されそうです。
利用プランを見ても、無料版だと3ページ150枚まで。
う〜ん、十分すぎる。

利用登録

ユーザ名、メールアドレス、パスワード等を入力。
送信したら、すぐにページ編集画面に移動します。
ここで、必ずメール確認をしましょう。
メール確認しないとページタイトルの編集や画像の挿入ができません。

画像の挿入

謳い文句の通り、ブラウザにドラッグ&ドロップで画像挿入は完了です。
レイアウトの種類が選択可能で、今回は可変グリッドとしました。
各画像ごとに横幅(高さ)も設定できますが、
横幅の最小/最大値と余白を設定して自動レイアウトを作成できます。
ここがめちゃくちゃ楽！！！

画像にリンクを設定

デフォルトではスライドショーにリンクされますが、各画像にリンクを設定できるようです。
リンクを設定してしまうとスライドショーには飛ばなくなるので注意。

画像にキャプションを設定

各画像にキャプションを設定できます。画像に対してリンクを複数設定したかったので、
今回はキャプションにGitHub リポジトリとGitHub Pagesでの公開ページ、2つのリンクを記述しました。

GitHubでのページ公開方法

今までの模写は全てGitHubにプッシュ済みなので、各リポジトリをそのままページ公開する方法を調べました。
各リポジトリのSettingから、GitHub Pagesで公開したいブランチを選択するだけ。
GitHubのmasterブランチをWebページとして公開する手順（GitHub Pages） - Qiita

公開できました！
Shimernaga