Jamstackなポートフォリオを作成しました
2021-01-17
はじめに
Jamstack なポートフォリオを作成しました。
1keiuu's portfolioIkkei Harashima's portfolio 2021
気づけば毎年ポートフォリオを作っていてこれで 3 つ目です。。
今回はサーバーレスで管理のし易さとパフォーマンスを意識したものになりました。
過去のポートフォリオはこちら
Portfolio 2019Ikkei Harashima's Portfolio
Portfolio 2020Ikkei Harashima's Portfolio
使用した技術
FW: Nuxt.js (TypeScript/composition-api)
コンテンツ管理: Nuxt/content , Cloud Storage
ホスティング: Firebase hosting
その他 API: Cloud Functions
CI/CD: Github Actions
作った理由
① 去年作ったポートフォリオのパフォーマンスが悪い
React/Go/AWS の勉強を目的とするあまり、ポートフォリオサイトとしての役割を考えずに作ってしまいました。
結果的に費用も UX も最低な魔物が生み出されてしまいました。。。
特に three.js の部分は SP で見ると safari が落ちるくらい重く、やっつけで作ったせいかチューニングも面倒になって放置状態。
これに反省して、「Jamstack でパフォーマンス最高なで管理し易いサイトに作り直そう！」と決心しました。
② 去年作ったポートフォリオは管理画面を作ってないのでコンテンツの更新が面倒
またしても 2020 年度版の欠陥なのですが、当初作る予定だった管理画面を作る気力がなくなってしまい、未だに内容を更新するには EC2 に ssh して SQL 叩く必要があるという状況のまま。。
冷静に考えてもポートフォリオで DB 用の EC2 インスタンス建ててたのアホすぎる。。。
③ nuxt/content を使ってみたくなった
はじめは microCMS で Jamstack を目指して作成していたのですが、たまたま聞いていたUIT INSIDEのポッドキャストで nuxt/content を知り、コンテンツの管理がめちゃくちゃ便利そうで使ってみたくなりました。
しかもマークダウンで簡単にブログが作れる、、、！
② の失敗を踏まえても、Github で管理した json,マークダウンだけでコンテンツの管理ができるのだから、個人開発のポートフォリオに最適だと思いました。
工夫した所
OGP 画像の動的生成
Twitter などでシェアした時に Qiita っぽい OGP が表示されるようになります。
Cloud Functions × Cloud Storage で実装しました。
以前まで無料だった Cloud Functions(Firebase)も node v10 より有料（従量課金）との事、、
参考にした記事
記事内で表示する OGP 情報の取得
Nuxt/Content で書かれた記事内で外部ページの OGP を表示する為の実装が必要だったので、URL から OGP 情報を取得する API を Cloud Functions で作成しました。
CI／CD を設定して記事ページの自動更新 このサイトは SSG でビルドしているので、記事などのコンテンツを更新する度にビルドをかける必要があります。
そこで、Github Actions × Firebase Hosting を使って CI/CD を構築しました。 この組み合わせは設定もめちゃくちゃ楽なので、短い期間での個人開発ではかなり使えると思います。
以前 Qiita の記事にしました。
NuxtアプリをSSGでビルドしてCI/CDをお手軽に設定する【GitHub Actions × Firebase Hosting】 #JavaScript - Qiitaはじめに今回はNuxt.jsのSSG（静的サイトジェネレーター）モードで作成したアプリのCI/CDを設定する方法を紹介します！GitHub ActionsとFirebase Hostingを連携…
最後に
修正する点はまだまだ沢山あるのですが、なかなか管理しやすくパフォーマンスも比較的良いサイトが一旦は出来上がったのでは無いかと思います。
使った技術が最小限かつパワフルでとても使いやすかったと思います。
特に Nuxt/content が最高でした！
あとは相変わらず Firebase は個人開発の味方ですね。
これからは Qiita や zenn に加えてこのブログでちょっとした記事を書いていこうと思うのでよろしくお願いします！