Jekyll × GitHub Pagesでポートフォリオサイトを作った話

きっかけ

先日参加した【情シスSlack4周年・BTAJP1周年記念イベント】の会場で、くろひつじさんが面白そうなものを持っていました。

値段も一生モノと思えばかなり安いので、何名かは買う！だから知見をまとめて！と言ってました。（のでnoteにまとめていますｗ）

心当たりが（ドキドキ

その後、早速購入したは良いものの・・・

プレーリーカードきた！ pic.twitter.com/HRh0mg0Jec

— kaze＠情シス (@kaze3desu) April 7, 2023

プレーリーカードを読み込んだ先のサイトを編集中・・・

やだっ…私のサイト、殺風景すぎ…？😭

ということで、ポートフォリオサイトの作成を決意しました。

GitHub Pagesを選んだ理由

情シスの皆さんはポートフォリオをどんなサービスで作成しているのか気になり、以下の記事を参考にしました。

Google SitesやNotionが人気ですが、GitHub Pagesもいるなと思い👀
現職でGitHubをフル活用している事もあり、勉強にもなって一石二鳥だと考えました。

いざGitHub Pagesを作る

大まかな流れは以下の通り

1. GitHub アカウントを作る

2. Jekyllテーマ から好きなテーマを探す

3. ダウンロードしたテーマのREADMEなどを参考にしてテンプレートをカスタマイズする

4. サイトを公開するためのリポジトリを作成する

5. カスタマイズしたテーマをリポジトリにアップロードする

これで自分のページを公開することができます。

気をつけるべきポイント

• Jekyllテーマには、HTMLで書くものとMarkdownで書けるものがある

  • 自分はMarkdownで書きたかったのでけっこう探した

  • ハイカラなデザインはだいたいHTML

• テーマのファイル構成を解析して理解する必要がある

  • 核となるのは「_config.yml 」

• 作成するリポジトリの名前は必ず「<username>.github.io」にする

必要に応じて

• ファイルを編集するためにVSCodeなどのエディタを用意する

• ローカル環境でサイトを動かすために色々インストールする

  • 一番のつまずきポイント

• ChatGPTに質問する

  • とても優秀

完成したものがこちら

私のポートフォリオサイトです

kaze's Portfolio | Blog

↑このリンクを貼ると画像を表示するという機能（OGPというらしい）はChatGPTに質問したコードを組み込んだだけで実装できた。
※画像は自作

SpecialThanks

今回利用させて頂いたテーマ

おまけ：求人紹介

2023/04/13 現在、一緒に働く仲間を募集しています！

カジュアル面談もやっています！

まずはお話だけでも聞いてください :)

Spir | Smart scheduling calendar