
Jekyll × GitHub Pagesでポートフォリオサイトを作った話
きっかけ
先日参加した【情シスSlack4周年・BTAJP1周年記念イベント】の会場で、くろひつじさんが面白そうなものを持っていました。
値段も一生モノと思えばかなり安いので、何名かは買う!だから知見をまとめて!と言ってました。(のでnoteにまとめていますw)
その後、早速購入したは良いものの・・・
プレーリーカードきた! pic.twitter.com/HRh0mg0Jec
— kaze@情シス (@kaze3desu) April 7, 2023
プレーリーカードを読み込んだ先のサイトを編集中・・・

ということで、ポートフォリオサイトの作成を決意しました。
GitHub Pagesを選んだ理由
情シスの皆さんはポートフォリオをどんなサービスで作成しているのか気になり、以下の記事を参考にしました。
Google SitesやNotionが人気ですが、GitHub Pagesもいるなと思い👀
現職でGitHubをフル活用している事もあり、勉強にもなって一石二鳥だと考えました。
いざGitHub Pagesを作る
大まかな流れは以下の通り
GitHub アカウントを作る
Jekyllテーマ から好きなテーマを探す
ダウンロードしたテーマのREADMEなどを参考にしてテンプレートをカスタマイズする
サイトを公開するためのリポジトリを作成する
カスタマイズしたテーマをリポジトリにアップロードする
これで自分のページを公開することができます。
気をつけるべきポイント
Jekyllテーマには、HTMLで書くものとMarkdownで書けるものがある
自分はMarkdownで書きたかったのでけっこう探した
ハイカラなデザインはだいたいHTML
テーマのファイル構成を解析して理解する必要がある
核となるのは「_config.yml 」
作成するリポジトリの名前は必ず「<username>.github.io」にする
必要に応じて
ファイルを編集するためにVSCodeなどのエディタを用意する
ローカル環境でサイトを動かすために色々インストールする
一番のつまずきポイント
ChatGPTに質問する
とても優秀
完成したものがこちら
私のポートフォリオサイトです
↑このリンクを貼ると画像を表示するという機能(OGPというらしい)はChatGPTに質問したコードを組み込んだだけで実装できた。
※画像は自作
SpecialThanks
今回利用させて頂いたテーマ
おまけ:求人紹介
2023/04/13 現在、一緒に働く仲間を募集しています!
カジュアル面談もやっています!
まずはお話だけでも聞いてください :)