🙆

Github Pagesで職務経歴書を作ってみた

2024/10/26に公開

はじめに

職務経歴書を使用する機会はそれほど多くありませんが、いざ必要になって作成しようとすると、さまざまな手間がかかります。自分の経歴を振り返り、情報を整理し、記載し、修正して完成させる必要があるためです。また、これは社会人生活が終わるまで継続的に続けていかなければならない作業でもあります。

まさに長期的なプロジェクトといえるでしょう。そこで、これまで培ってきたITエンジニアとしての経験を活かし、職務経歴書の管理方法について検討した結果、「Githubで職務経歴書を管理し、Webで公開する」という方法にたどり着きました。

職務経歴書を公開しておくことで、「職務経歴書をください」と依頼された際にリンクを送るだけで対応できるので非常に便利です(PDFが求められた場合はPDF化して渡せば問題ないと思います)。

当初はGithubの公開リポジトリのREADMEに職務経歴書を記載していましたが、情報が増えるにつれて、読みづらくなるという問題が発生しました。職務経歴書はある程度詳細に書いたほうが良いと感じ、情報を追加していった結果、内容が長文になりすぎて経歴の概要がかえってわかりにくくなってしまったのです(READMEは縦に長くなりがちです)。

この「読みにくさ」を解消するため、README記載方式からGithub Pagesを活用したWebサイト方式に移行し、職務経歴書をWebサイトとして作成しました。情報の整理やスタイリングを工夫することで、読みやすさの向上を目指しました。

実際に作成したサイトはこちらです。
また、リポジトリはこちらになります。

それでは、これから実際に取り組んだ内容について紹介します。

Github Pagesとは

Github Pagesは、Githubのリポジトリから直接Webサイトを作成することができる機能です。
Githubのリポジトリを作成し、必要な設定を行い、必要な静的ファイルを置くだけでWebサイトとして稼働させることができます。

2024年10月26日時点では無料です。運用における費用が発生しないというのは大きなプラスポイントだと思います。

Github Pagesを使ってWebサイトを公開する方法

詳しくはGitHub Pages サイトを作成するを見ていただきたいですが、ここでは自分が実行した方法をベースに簡単に説明します。

1. リポジトリを作成

<ユーザー名>.github.ioという名前のGithubリポジトリを公開設定(Public)で作ります。

Githubの画面から、以下のような感じで作成できます。

create new repository

2. htmlファイルを作成する

リポジトリにdocsフォルダを作成し、その中に表示したいhtmlファイルを置きます。

create index.html

3. Pagesの設定をする

SettingsからPagesの設定画面を開き、Branchesのところで、公開するブランチとフォルダを設定します。

setting github pages

4. Webページにアクセスする

https://<ユーザー名>.github.io/という名前で、Webサイトが公開されるので、アクセスしてみてください。
作成したhtmlの内容が表示されれば成功です。

ここから頑張ったこと

htmlを表示するという点は無事クリアしました。あとは内容を記載し、スタイリングを入れていくだけです。
とはいえ、これで記事を終えるのは味気ないので、見やすい職務経歴書を作るべく自分が取り組んだことについて触れていきます。

CI(Github Actions)の導入

自分が職務経歴書のCIにおいてやっていることは以下の2つです。

  • htmlのバリデーション
  • Jekyll dockerの実行

せっかく作ったサイトのhtmlの品質が残念という状態は避けたいので、htmlのvalidatorを使って最低限の構文チェックを行っています。

Jekyll Doctorについてですが、GitHub Pagesは内部でJekyllを使用することでサーバーとして機能しています。そのため、Jekyllの設定に不具合があるとサイトが正常に動作しなくなる可能性があります。こうした理由から、設定に問題がないか確認しています。

Tailwind CSSの導入

自分はCSSに一切詳しくありません。1からスタイリングを書こうとすると無限に時間を溶かしてしまいます。

そこでTailwind CSSを導入し、比較的楽にスタイリングの実装を行なっています。

生成AI(デザイン補助)

自分のデザイン力は素人です。みやすい職務経歴書を作るのが目的ですが、実際のデザインをどうするかは大きな悩みの種でした。

そこでhtmlのソースとTailwind CSSを使うという条件をプロンプトに入れ、デザイン案をいくつか出してもらい、その中から選んでデザインを決めました。

生成AI(コーディング)

職務経歴書の大雑把な原稿は自分で作り、実際のサイトのコーディングの大部分は生成AIにやってもらいました。htmlを手で書くというのは、なんやかんやで時間がかかる行為なので、なるべく楽をするべく頼りまくってます。

作ってみた感想

職務経歴書をWebサイト形式で用意することで、よかったと思える点がいくつかあります。

  • 共有が簡単
  • フォーマットやデザインが自分で自由に変えられる
  • 個人開発の実績になる(かもしれない)
  • 楽しかった(個人差あり)

Webサイト制作は数年振りだったこともあり、全ての作業が新鮮で良い気分転換になりました。熱中しすぎて土日が消えましたが、まぁそれもまた良しということで。

注意点

Github Pagesにはさまざまな制約があります。実際にWebサイトを作る際には、これらの内容を踏まえた上で実施することを強くお勧めします。

おわりに

いちばん難しいのは職務経歴書の「内容」です。これは永遠のテーマだな〜。

Discussion