見出し画像

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

kaze

きっかけ

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

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

心当たりが（ドキドキ

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

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

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

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

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に質問する

    • とても優秀

完成したものがこちら

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

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

SpecialThanks

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

おまけ：求人紹介

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

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

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

いいなと思ったら応援しよう！