ブログ＋ポートフォリオサイトを構築しました

Published

2022-09-25

Author

caltistals

GitHub URL

2022年8月中旬～9月下旬（1か月半くらい）

少しずつ進めていたというのと、私自身のスキル不足があり、かなり時間がかかってしまいました。

Web開発の勉強を本格的に始めてから5か月が経ち、いろいろと経験していく中で技術ブログでのアウトプットの重要性を強く感じ始めるようになりました。

QiitaやZennといった既存のサイトを利用しても良かったのですが、どうせなら自分で作ってみたほうが勉強にもなるだろうと思い、こちらのサイトを構築するに至りました。（Next.jsを使ってみたかったという理由もある）

SSR/SSG/ISRが出来るので、ブログサイトを作るのに向いているだろうという理由で選択しました。あとはシンプルに使ってみたかった。

このブログではISRを使用しています。今回ISRを選択した経緯は以下の通りです。

実際に使ってみると、SSR/SSG/ISR以外にも、ファイルシステムベースのルーティングや動的ルーティングがめっちゃ便利でした。

これまで全く使ったことがなかったので、今後の選択肢を増やしていくために選択。

情報が意外とたくさんあったので、全く使ったことがない状態からでもすぐにそこそこ使えるようになりました。

実際に使ってみて、CSS弱者の私からすると、「書きやすい＋（個人的に）読みやすい」ですごく使いやすいと感じました。ただ、大規模な開発で考え無しに使うととんでもないことになりそう。

個人ブログを作ると決めた際、Headless CMSを使用するか、普通にマークダウンをHTMLに変換してやっていくかどうかで悩んでいました。

そんな中、上に記載したUdemy講座と出会い、NotionをCMS化できると知り、「Notionならどこでも書けるし書きやすいしでめっちゃええやん！」ということでNotion APIを選択しました。

APIの仕様の把握は大変でしたが、Udemy講座のおかげでなんとか使うことができました。

バグが未然に防げたり、入力補完が効いてくれたりするので、JSの頃に比べて開発がすごく楽になったと感じました。

一部Notionから返ってくるデータの型にanyを使ってしまったのは大変反省しております。。

ISRを使うためにはVercelでデプロイする必要があるということで選択しました。

実際使ってみると、デプロイや独自ドメインの設定がめちゃくちゃ簡単で神でした。あと特に設定しなくてもmainにpushすると自動で再デプロイしてくれるようになってて最高です。

あとデプロイしたときのこの画面が結構好きです。

現状、トップページのアイコン画像などの読み込みがかなり遅い状態になっています。Next.jsを使用しているにもかかわらずここまで遅いのは、何かしらこちら側の実装に問題がありそうなので、Webpack Bundle Analyzer等を使って原因を特定していく必要がありそうです。

現状だとNotion側から持ってきている画像が読み込めていない場合があります。てっきりISRの問題点なのかなと思っていたのですが違うみたいでした。

どうやらNotionにアップロードした画像は、S3にアップロードされており、これをAPIから取得しようとした場合、60分の期限付きで返ってきているようです。そのため、取得から60分以上経過した場合に、画像が表示されない状態になっていると思われます。

一応、私のブログではISRを採用しているので、リロード等を行えば再生成されて画像が表示されます。しかし、それではUX的に良くないので、取得した画像をvercelにダウンロードして利用するか、60分ごとに再ビルドさせるように変更する必要がありそうです。

かなり時間がかかってしまいましたが、なんとか完成させることができてよかったです。

あと、この記事を書くのにもすごく時間がかかってしまったので、これからどんどん記事を書いてスピードアップしていきたいと思います。

見ていただき、ありがとうございました。