この記事は？

GitHub Pages　でポートフォリオを作成するにあたって、参考にしたものや作業ログをこちらに記載します。

公式ページはこちら↓
https://pages.github.com/

ポートフォリオとは？

ポートフォリオというのは場合によって意味合いが異なることがありますがここではいわゆる職務経歴書をさして言います。

作る前に考えたこと

シンプルに

ポートフォリオを検索したり、または仕事などで他の方を見た際に多くの情報があり正直見る側の負担になる部分があるかなと考えていました。
簡潔に見えるようになるべく余分な情報は書かないことを意識しました。
参考にしたのはNotionのResumeです。かなりシンプルではありますが必要最低限の情報が入っていると思います。

更新しやすいように

ポートフォリオはよく更新されるので、僕自身が更新がめんどくさくなってしまうと意味のない情報になってしまうなと思いました。今回はGitHub Actionで自動化する方法を採用しました

自分の遊び場に

他のアウトプットや試したい技術などを遊び場のように使いたいなと思いました。

実施したこと

GitHub Pageの開設

このページを見るだけで開設できてしまいます。
たったの5ステップですね。デプロイ不要とはGitHub Page凄すぎます
https://pages.github.com/

NextjSの環境構築

ほぼほぼ下記のQiitaの記事を参考に書かせていただきました

npx create-next-app --example with-typescript-eslint-jest next-app

またpushした際にGitHub　　Actionで自動化してもらいたいので、下記のようにビルドして

name: github pages

on:
  push:
    branches:
      - main

jobs:
  build-deploy:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2

      - name: setup node
        uses: actions/setup-node@v1
        with:
          node-version: '16.x'

      - name: install
        run: yarn install --frozen-lockfile

      - name: build
        run: yarn run build

      - name: export
        run: yarn run export

      - name: add nojekyll
        run: touch ./out/.nojekyll

      - name: deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./out

経歴の内容を書く

既存でwantedlyに結構書いていたので、こちらをほぼ持ってきました。
重要ではない部分は削りました。
https://www.wantedly.com/id/entaku0818

Googla Analyticsの導入

アクセスなど増えたら嬉しいなと思い、Googla Analyticsを導入しました。

Googla AnalyticsIDの設定

envファイルにGOOGLE_ANALYTICS_IDを定義します。

NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=${ここにGoogla AnalyticsのIDを入力してください}

gtagの設定

PVを測定するためにgtagファイルを定義します。

また、ビルドの設定にもよりますが、Windowインターフェイスを定義しないとTypeScriptで判定できないので、globalでWindowと今回利用するgtagを定義します。

Windowインターフェイスについてはこちら

gtag

export const GA_ID = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID ?? ''

// IDが取得できない場合を想定する
export const existsGaId = GA_ID !== ''

declare global {
  interface Window {
    gtag: any
  }
}


// PVを測定する
export const pageview = (path) => {
  window.gtag = window.gtag || {}
  window.gtag('config', GA_ID, {
    page_path: path,
  })
}

// GAイベントを発火させる
export const event = ({ action, category, label, value = '' }) => {
  if (!existsGaId) {
    return
  }
  window.gtag = window.gtag || {}
  window.gtag('event', action, {
    event_category: category,
    event_label: JSON.stringify(label),
    value,
  })
}

ページ遷移の時の発火

ページ遷移した際にGoogla Analyticsの発火をして欲しいので、下記のようにrouteChangeComplete　というrouterのイベントをキャッチして発火させます。

import { useEffect } from 'react'
import { useRouter } from 'next/router'

import * as gtag from '../lib/gtag'

export default function usePageView() {
  const router = useRouter()
  useEffect(() => {
    if (!gtag.existsGaId) {
      return
    }

    const handleRouteChange = (path, { shallow }) => {
      if (!shallow) {
        gtag.pageview(path)
      }
    }

    router.events.on('routeChangeComplete', handleRouteChange)
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])
}

googletagmanagerの設定

GoogleAnalyticsで予め用意されているタグを利用するためにgoogletagmanagerの設定をします

GoogleAnalytics

import Script from 'next/script'
import { existsGaId, GA_ID } from '../lib/gtag'

const GoogleAnalytics = () => (
  <>
    {existsGaId && (
      <>
        <Script
          defer
          src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`}
          strategy="afterInteractive"
        />
        <Script id="ga" defer strategy="afterInteractive">
          {`
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());    
              gtag('config', '${GA_ID}');
          `}
        </Script>
      </>
    )}
  </>
)

今回はこちらの記事を完全に参考にしました

サイトができました

ただ経歴を書いていっただけなので、ここから充実させていきたいと思います！
https://entaku0818.github.io/

今後への積み残し

他のアウトプットとの連携
- Zennの記事や自分の今まで作成してきたものを載せたいので、連携できるようにしたいなと思います。せっかくNextも導入したので、、、！

今回参考にしたサイト

ポートフォリオや導入の際に参考にしたサイトです！
みなさんに心ばかりですが、zennでサポートさせていただきました..!
https://kawamataryo.github.io/resume/
https://portfolio.marinya.dev

Discussion