こんにちは！
最近、仕事着に何を着るか迷うので、すべて作務衣にしようかと考えている冨田です。
エクセルやスプレッドシートを使用して作成する経歴書ですが、管理が面倒で毎回どこにいったか忘れがちです。（私だけかもですが…）
GitHubで管理できたら、わかりやすいのでは？と思い、作成してみました。
概要
GitHubの機能を使用して、自身の経歴書を公開・PDF保存できるサービスを作成してみました。
作成したものは、以下になります。
リポジトリは、GitHub PagesとGitHub Workflowsを用いており、
- GitHubリポジトリに格納されているファイルをそのままWebサイトとして公開(GitHub Pages)
- 経歴書をPDF形式で保存(GitHub Workflows)
ができるようになっています。
作成
基本的な流れは、GitHub Pagesサイトを作成するを見て作成できます。
ざっくりした流れは下記になります
- リポジトリの用意：
github.ioドメイン、もしくは独自ドメインを使用。 - サイト用ファイルの作成：HTMLもしくはMarkdownファイルを作成。
- リポジトリの設定：GitHubリポジトリの設定から、デプロイするファイルを指定します。
サイト用ファイルの作成
以下のようにHTMLファイルを作成していきました
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>職務経歴書 冨田久樹</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="container">
<div class="title">
<h1>職務経歴書</h1>
</div>
<div class="profile-content">
<h2>プロフィール</h2>
<div class="profile">
<div class="info">
<h3>基本情報</h3>GitHub Actionsを使用したPDF保存
PDF保存には以下のツールを使用しました：
- puppeteer：HTMLからPDFに変換するためのライブラリ。
- fonts-ipafont-gothic：日本語フォントに対応するため。
- cheerio：PDFのファイル名をサイトタイトルに対応させるため。
以下は、GitHub Actionsのworkflowの一部です:
name: Convert HTML to PDF
on:
push:
branches:
- main
workflow_dispatch:
jobs:
convert:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: 20
# PDFファイル保存するための処理を記載
- name: Upload PDF
uses: actions/upload-artifact@v4
with:
name: ${{ env.PDF_TITLE }}
path: ${{ env.PDF_TITLE }}.pdfGitHub Actionsを使用して、好きなときにPDFを保存できるようにしました。
苦労したポイント
特に苦労したのは、サイトタイトルをPDFファイル名に指定する部分と、HTMLをPDFに変換する部分です。使い方がわからず、悪戦苦闘しましたが、以下のように解決しました：
- サイトタイトルの抽出：cheerioを使用してHTMLからタイトルを抽出し、環境変数として保存。
- HTMLからPDFへの変換：puppeteerを使用して、指定したHTMLファイルをPDFに変換。
- name: Extract Title
id: extract
run: |
TITLE=$(
node -e "
const fs = require('fs');
const cheerio = require('cheerio');
const html = fs.readFileSync('${{ github.workspace }}/index.html', 'utf-8');
const $ = cheerio.load(html);
const titleHtml = $.html('head title');
const titleText = cheerio.load(titleHtml)('title').text();
console.log(titleText.replace(/ /g, '_'));
")
echo "PDF_TITLE=${TITLE}" >> $GITHUB_ENV
- name: Convert HTML to PDF
run: |
node -e "
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('file://${{ github.workspace }}/index.html', {waitUntil: 'networkidle2'});
await page.pdf({path: '${{ env.PDF_TITLE }}.pdf', format: 'A4'});
await browser.close();
})();
"まとめ
今回、GitHubの機能をつかうことで、簡単にサイト公開やPDF保存機能を作ることができるようになりました！
また新しいことを思いついたら、作ってみたいと思います。
最後まで、お付き合いいただきありがとうございました。
