概要

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 }}.pdf

GitHub 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();
          }
        )();\\""