GitHub Pages でポートフォリオを作ってみたい人生だったのでつくった
この記事は？
GitHub Pages でポートフォリオを作成するにあたって、参考にしたものや作業ログをこちらに記載します。
公式ページはこちら↓
ポートフォリオとは？
ポートフォリオというのは場合によって意味合いが異なることがありますがここではいわゆる職務経歴書をさして言います。
作る前に考えたこと
シンプルに
ポートフォリオを検索したり、または仕事などで他の方を見た際に多くの情報があり正直見る側の負担になる部分があるかなと考えていました。
簡潔に見えるようになるべく余分な情報は書かないことを意識しました。
参考にしたのはNotionのResumeです。かなりシンプルではありますが必要最低限の情報が入っていると思います。
更新しやすいように
ポートフォリオはよく更新されるので、僕自身が更新がめんどくさくなってしまうと意味のない情報になってしまうなと思いました。今回はGitHub Actionで自動化する方法を採用しました
自分の遊び場に
他のアウトプットや試したい技術などを遊び場のように使いたいなと思いました。
実施したこと
GitHub Pageの開設
このページを見るだけで開設できてしまいます。
たったの5ステップですね。デプロイ不要とはGitHub Page凄すぎます
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に結構書いていたので、こちらをほぼ持ってきました。
重要ではない部分は削りました。
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インターフェイスについてはこちら
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の設定をします
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>
</>
)}
</>
)
今回はこちらの記事を完全に参考にしました
サイトができました
ただ経歴を書いていっただけなので、ここから充実させていきたいと思います！
今後への積み残し
- 他のアウトプットとの連携
- Zennの記事や自分の今まで作成してきたものを載せたいので、連携できるようにしたいなと思います。せっかくNextも導入したので、、、！
今回参考にしたサイト
ポートフォリオや導入の際に参考にしたサイトです！
みなさんに心ばかりですが、zennでサポートさせていただきました..!
Discussion