個人ブログを開発しました

以前、こんなサイトを作りました。こんなサイトの画像

これは純粋なHTMLとCSSで作った初めてのWebサイトで、ポートフォリオサイトとして使っていました。

今回はこのサイトを新調して新しいサイトを制作しました。

技術スタック

フロントエンド

Next.js

「フロントエンドならNextかNuxtやろ！」と、いう感じで名前だけ覚えていたのでこの記事を参考にしました。

フロントエンドフレームワークを人生で一度も触ったことがなかったので、見た感じで簡単そうなNext.jsを選択しました。

Tailwind CSS

これも名前だけ知っていて「いつかWeb系やるときに使ってみたいなぁ」と思っていたので使ってみることにしました。

その他ライブラリ

react-markdown

ブログ記事などをmarkdownで書けるようにしようと考えていたので採用

react-turnstile

Contactページでスパム防止として採用しました。 reCaptchaを採用しようかと思いましたが、有料らしいので完全に無料なこちらを採用。

バックエンド

ElysiaJS

ElysiaJSはExpressというサーバーサイドフレームワークの18倍高速らしく、興味を持ったので採用。アルバイトで開発している案件でElysiaJSの存在を知って、「これ使いやすいんかなぁ🤔」と思いましたがいい機会なので試してみます。

Prisma

生のSQL文は書きたくなかったので「ORMを使おう！」と思い採用。 TypescriptでのORMを調べてみるとPrismaに一目惚れ👀したので使ってみます。

Satori & resvg

ブログ記事のサムネイル画像を動的生成するために採用 SatoriというライブラリでJSXを与えるとSVG形式の画像が出てくるので、resvgでpng形式に変換するという仕組みです。

インフラ

PostgreSQL

データベースとしてMySQLなどいくつかの選択肢がありましたが、勉強のため一度も触ったことのないこちらを採用。

Nginx

リバースプロキシとして採用。これに関しては知識がなかったのでClaudeCodeさんに聞きながら試行錯誤しました。

Docker Compose

フロントエンド・バックエンド・データベース・リバースプロキシをそれぞれコンテナ単位で管理するために採用。名前だけ覚えていたKubernatesというものを使ってみたかったが、さすがにやりすぎ感があったので今回は見送り。いつか使ってみたいね。何に使うんだろ

デプロイ先

KagoyaVPSの月額700円ぐらいのVPSをデプロイ先にしています。従量課金制のサービスは、お金のない私に取っては恐怖の対象です。

面白いと感じた部分

このサイトを開発していて、すべてが初めての体験なので面白く感じたのですが、その中でも面白いなと感じた部分としてこれらが挙げられると思います。

CI/CD

開発している中でCI/CDが最も興奮しました。pushすると自動でビルド・テスト・デプロイの一連の動作をしてくれる機能で、これもまた名前だけ覚えてる技術の一つだったのですが使ってみるとCD(Continuous Delivery（継続的デリバリー）)がすごい便利。

.github/workflows/cd.yml

on:
  workflow_run:
    workflows: ["CI"]
    types:
      - completed
    branches: [main]

jobs:
  deploy:
    name: Deploy to VPS
    runs-on: ubuntu-latest
    if: ${{ github.event.workflow_run.conclusion == 'success' }}

    steps:
      - name: Deploy via SSH
        uses: appleboy/ssh-action@v1.0.3
        with:
          host: ${{ secrets.VPS_HOST }}
          username: ${{ secrets.VPS_USERNAME }}
          key: ${{ secrets.VPS_SSH_KEY }}
          port: ${{ secrets.VPS_SSH_PORT }}
          script: |
            cd ${{ secrets.VPS_PROJECT_PATH }}
            git pull origin main
            docker compose -f docker-compose.prod.yml up --build -d --force-recreate
            docker exec production-backend bunx prisma migrate deploy
            docker exec production-backend bunx prisma generate

セットで実行されるCIが成功したら自動で実行されるように指定しています。

VPSにデプロイする際には以下のステップを実行するようにしています。

SSHでVPSに接続
プロジェクトディレクトリに移動する
git pullで更新
コンテナをビルドしてから再起動

SSHに接続する際に使うユーザー名などの機密情報は、Githubリポジトリの設定ページで追加でき便利だなと感じました。

Devcontainer

コンテナ上で開発できる機能で、今回は本番環境と開発環境を一致させるために使用しました。それに加えて実機を汚さないのもいいなと思いました。

Satori

技術スタックでも紹介しましたが、Satoriというライブラリも面白い。このサイトではブログ記事のサムネイル作成に使用しています。

backend/src/img/img.service.ts


export function imgSvgNode(title: string) {
    return (
        <div> ... </div>
    )
}

const svg = await satori(
    imgSvgNode(blog.title), 
    {
        width: 1280,
        height: 800,
        fonts: [
            {
                name: "CaskaydiaMono Nerd Font",
                data: await fontData.arrayBuffer(),
                weight: 400,
                style: "normal"
            },
            {
                name: "Noto Sans JP",
                data: await boldFontData.arrayBuffer(),
                weight: 600,
                style: "normal"
            },
        ]
    }
);

const resvg = new Resvg(svg, {
    fitTo: { mode: "width", value: 1200 }
});

await Bun.write(`${uploadsPath}/${blog.coverImgId}`, resvg.render().asPng(), { createPath: true });

このようにjsxで書かれた要素を与えるとSVGを返してくれる便利なライブラリ。また機会があれば使いたい。

大変だった部分

管理画面

CMSを使っていないのでブログ作成画面などの管理画面を作成する必要がありました。

管理画面

これはブログ記事作成画面。このような管理画面を複数作成しました。

これから

まずはブログを定期的に書くように心がけるところからかなと思います。

あとOGPなどがうまく設定できていないところがあるので修正したいですね。

以上。

個人ブログを開発しました

以前、こんなサイトを作りました。こんなサイトの画像

これは純粋なHTMLとCSSで作った初めてのWebサイトで、ポートフォリオサイトとして使っていました。

今回はこのサイトを新調して新しいサイトを制作しました。

技術スタック

フロントエンド

Next.js

「フロントエンドならNextかNuxtやろ！」と、いう感じで名前だけ覚えていたのでこの記事を参考にしました。

フロントエンドフレームワークを人生で一度も触ったことがなかったので、見た感じで簡単そうなNext.jsを選択しました。

Tailwind CSS

これも名前だけ知っていて「いつかWeb系やるときに使ってみたいなぁ」と思っていたので使ってみることにしました。

その他ライブラリ

react-markdown

ブログ記事などをmarkdownで書けるようにしようと考えていたので採用

react-turnstile

Contactページでスパム防止として採用しました。 reCaptchaを採用しようかと思いましたが、有料らしいので完全に無料なこちらを採用。

バックエンド

ElysiaJS

Prisma

生のSQL文は書きたくなかったので「ORMを使おう！」と思い採用。 TypescriptでのORMを調べてみるとPrismaに一目惚れ👀したので使ってみます。

Satori & resvg

インフラ

PostgreSQL

データベースとしてMySQLなどいくつかの選択肢がありましたが、勉強のため一度も触ったことのないこちらを採用。

Nginx

リバースプロキシとして採用。これに関しては知識がなかったのでClaudeCodeさんに聞きながら試行錯誤しました。

Docker Compose

デプロイ先

KagoyaVPSの月額700円ぐらいのVPSをデプロイ先にしています。従量課金制のサービスは、お金のない私に取っては恐怖の対象です。

面白いと感じた部分

CI/CD

.github/workflows/cd.yml

on:
  workflow_run:
    workflows: ["CI"]
    types:
      - completed
    branches: [main]

jobs:
  deploy:
    name: Deploy to VPS
    runs-on: ubuntu-latest
    if: ${{ github.event.workflow_run.conclusion == 'success' }}

    steps:
      - name: Deploy via SSH
        uses: appleboy/ssh-action@v1.0.3
        with:
          host: ${{ secrets.VPS_HOST }}
          username: ${{ secrets.VPS_USERNAME }}
          key: ${{ secrets.VPS_SSH_KEY }}
          port: ${{ secrets.VPS_SSH_PORT }}
          script: |
            cd ${{ secrets.VPS_PROJECT_PATH }}
            git pull origin main
            docker compose -f docker-compose.prod.yml up --build -d --force-recreate
            docker exec production-backend bunx prisma migrate deploy
            docker exec production-backend bunx prisma generate

セットで実行されるCIが成功したら自動で実行されるように指定しています。

VPSにデプロイする際には以下のステップを実行するようにしています。

SSHでVPSに接続
プロジェクトディレクトリに移動する
git pullで更新
コンテナをビルドしてから再起動

SSHに接続する際に使うユーザー名などの機密情報は、Githubリポジトリの設定ページで追加でき便利だなと感じました。

Devcontainer

Satori

技術スタックでも紹介しましたが、Satoriというライブラリも面白い。このサイトではブログ記事のサムネイル作成に使用しています。

backend/src/img/img.service.ts


export function imgSvgNode(title: string) {
    return (
        <div> ... </div>
    )
}

const svg = await satori(
    imgSvgNode(blog.title), 
    {
        width: 1280,
        height: 800,
        fonts: [
            {
                name: "CaskaydiaMono Nerd Font",
                data: await fontData.arrayBuffer(),
                weight: 400,
                style: "normal"
            },
            {
                name: "Noto Sans JP",
                data: await boldFontData.arrayBuffer(),
                weight: 600,
                style: "normal"
            },
        ]
    }
);

const resvg = new Resvg(svg, {
    fitTo: { mode: "width", value: 1200 }
});

await Bun.write(`${uploadsPath}/${blog.coverImgId}`, resvg.render().asPng(), { createPath: true });

このようにjsxで書かれた要素を与えるとSVGを返してくれる便利なライブラリ。また機会があれば使いたい。

大変だった部分

管理画面

CMSを使っていないのでブログ作成画面などの管理画面を作成する必要がありました。

管理画面

これはブログ記事作成画面。このような管理画面を複数作成しました。

これから

まずはブログを定期的に書くように心がけるところからかなと思います。

あとOGPなどがうまく設定できていないところがあるので修正したいですね。

以上。