ポートフォリオサイトを作った

[kimromi]

個人のポートフォリオサイトを作りたいと思いたち、2022GW前から作り始めてとりあえず動くところまでできた（このサイト）。今までブログを Notion などに移転してきたが、ポートフォリオサイトの一部にさせることで育てていきたいというモチベーション。開発リポジトリはこちら。

[kimromi]

Next.js

仕事で Next.js を使うこともあるが、Static Generation をあまり使わないため個人サイトで利用している。使い慣れているというのもあり実装はサクサク進んだ。CSS も Tailwind CSS を使って楽をしている。今回初めて Framer Motion を使いページ遷移にアニメーションをつけている。ページ遷移以外にもアニメーションを利用する際に使ってみたい。ホスティングはVercelを利用。プルリクエストごとに環境を作ってくれたりと GitHub と連携しアプリケーション開発に集中させてくれる環境は改めて便利さを感じる。

[kimromi]

microCMS

Next.js 内に Markdown を書くか、CMS を利用するかは考えたが、個人的に日本製の microCMS を応援したいので利用した。hobby プランは無料なのもありがたかった。式年遷宮しやすくするためバックエンドとフロントエンドを分離させておきたい目的もある。

使ってみた感想としては

• エディタが Markdown に対応していて書きやすい
• JSのSDKもあり開発に困らなかった
• 管理ページがサクサク早い
• 記事追加や更新のタイミングで Vercel に webhook できてリビルドできる

など、使いやすい点が多く特にストレスは感じなかった。

エクスポートについては API で一括できそうだが、HTML での出力しか今は対応してないようなので、乗り換える際は一手間掛かりそう。あとはスマホでの記事の編集はあまり体験がよくないので今後に期待したい。

[kimromi]

Next.js の Preview Mode

Next.js には Preview Mode の機能が用意されていて、これを利用して microCMS の下書き記事のプレビューができたのでよかった。microCMS の記事を参考に Next.js に API を生やして、microCMS の記事ページから画面プレビューを押すとそのAPIにリクエストする。記事の ID と下書きの Key を渡して一致すれば __prerender_bypass と __next_preview_data というキー名のCookie が付与されて、Cookie が有効な期間(デフォルトはブラウザを閉じるまで)だけ指定したコンテンツの ID の記事がプレビューできるという仕組み。特に下書きのデータが見れて困ることはないので、認証はいれていない。

[kimromi]

雑感

サイトを作ってみて、今まではブログだけだったものが自分史のようなまとめを作ることで今後のアウトプットのモチベーションになると感じた。特にフロントエンドの試し場所として活用したい。ちなみに見た目はcatnoseさんのサイトをかなり参考にさせていただいている。Timeline での表示がとてもよくて、僕もキャリア史を Timeline 形式にした。

まだまだ充実させていきたいのでコンテンツを詳細にしていくつもり。色などもいまのところ適当なので整えていきたい。あともうちょっと趣味要素も追加していきたい。