自分のwebsite誕生！

はじめに

through です。 この度自作のwebsiteを作成致しました！最低限実装してみたいと思っていた機能が実装し終わったので、最初のblogとしてこのサイトについて綴っていこうと思います！

website概要

内容

Home

・自己紹介 自分の軽い自己紹介ページです。

Work

・自分の競技プログラミングのlibrary 今まで作成してきた自分のライブラリの溜まり場を作りたいというのが、このサイトのサブの目的の1つだった為作成しました。随時新しいアルゴリズムを学習したら更新していくつもりです！

Blog

・技術系記事・参加記などを綴るblogページ これが今回のメインの目的。自分のことを綴れるサイトを作りたいという願望が叶いました！

Admin

・library・blog の追加・削除・編集 どうせblogやその他の情報を更新していくなら、本番環境で直に編集できるようにしたかった為導入。セキュリティ系の勉強にもなったので一石二鳥。

用いた技術スタック

Frontend

• Framework: Next.js (TypeScript)
• Styling: Tailwind CSS
• Deployment: Vercel

Backend

• Language: Go
• Frameworks: Gin and Gorm
• Deployment: Fly.io
• Database: PostgreSQL

Else

• Docker

勉強になったこと

• クロスオリジン系の問題の理解

個人的にwebサーバーとAPIサーバーを分けて実装してみたいという気持ちが合った為別々で実装。そこでは docker を用いた local での開発環境と、deployする本番環境では挙動が違い、CORS や JWTを用いたlogin認証のCookieの部分の挙動に関する理解が増えた。

• dockerの内部仕様

これを作る前は、『何かコンテナっていう単位で仮想的に隔離してごちゃごちゃしてるんだな』という理解しかなかったが、コンテナの設定・docker image・コンテナ間通信、等を理解して実装出来る程になった。DBのボリュームを永続化・削除して簡単に環境を一新出来たり、外部サービスにimageをpushしてサーバーを立てたり... と出来る幅が広がったと思う。まだまだ未熟な点が多いので、今後も使って慣れていきたい。

• frontend のパフォーマンス改善 ( SSG, SSR )

以前から友人に、SSGの凄さを教えてもらっていたのを実際に実装して、静的サイトとしてweb の情報をキャッシュしておくことがいかに爆速になるかを体感した。リアルタイム性を持たせたいページでは SSR を用いることで、SEO的にも良いサイトを作成することが出来た。( SSG → Ondemand-ISR にすると、内容変更があった時にそれを検知して静的情報をrebuildして更新してくれる機能があるらしいので、あとでやる。 )

今後実装予定の機能

・Ondemand-ISR に変更
・codeを載せる時の syntax highlight & 行番号生成

最後に

技術力的にはまだまだだが、今回のwebサイト制作でfront~backまでの理解が深まったので良し！