ブログの作り方 - blog creation

このブログの作り方について説明します。
まだまだ実装したい機能はありますが現在までの作り方になります。

next.jsとcloudflareのpagesでこのブログは稼働しております。
tailscaleで自宅と実家の端末を繋いでvscode remoteでPROXMOX VEのLXCで作成を行っており
LXCで作成したブログをgithubにpushしてcloudflare pagesで公開をしております。
今回はそれらの流れと要点をまとめられればと思います。

1.ローカル環境を構築

①LXC構築編

PROXMOX VE上にdebian13のLXCを構築します。
スペックは以下になります。

• 非特権：はい
• ディスク容量：32GiB
• CPU：2
• メモリ：2GiB
• SWAP：512MiB
• ネットワーク：固定IP

②LXC設定編

ホスト側とLXC側の設定を追加します。

• ホスト側での設定

  • LXC自体の設定
    • /etc/pve/lxc/CTID.conf
      外部ストレージの設定やtailscaleでsshするための設定をするため以下を追記します。
      features: keyctl=1,mount=1
      mp0: /mnt/smb,mp=/mnt/blog-images
      lxc.cgroup2.devices.allow: c 10:200 rwm
      lxc.mount.entry: /dev/net/tun dev/net/tun none bind,create=file 0 0
    • /username/.smb-user
      外部ストレージのログイン情報を記述します。
      chmod 600で権限を設定しています。
    • /etc/fstab
      外部ストレージのマウントを行う内容を追記します。
      //192.168.???.???/smb /mnt/smb cifs credentials=/username/.smb-user,uid=0,gid=0,file_mode=0777,dir_mode=0777,iocharset=utf8,nounix,noserverino 0 0
      最後にマウントをします。

• LXC側での設定

  • 公開キーの設定
    • /username/.ssh/pub_keys
      pub_keysに自宅のPCの公開鍵を設定します。
      pub_keysをchmod 600で権限を設定します。
      .sshをchmod 700で権限を設定します。
    • /etc/ssh/sshd_config
      以下を最後の行に追記します。
      PubkeyAuthentication yes
      AuthorizedKeysFile .ssh/pub_keys
      PermitRootLogin prohibit-password
      PasswordAuthentication no
      最後にtailscale内の端末からsshできるか確認します。
  • ホスト側で行った設定の確認
    mp0:で設定したディレクトリに外部ストレージがマウントされているか確認します。

③インストール編

aptから以下をインストールします。

• tailscale
• node.js
• git

node.jsから以下をインストールします。

• next.js
• tailwind

2.ローカルでブログの作成

コマンドでプロジェクトを作成します。
next.jsでブログを作成してgithubにプッシュします。
その際プロジェクト直下に「wrangler.json」を作成します。
中に以下を追記します。
{
"name": "blogname",
"compatibility_flags": ["nodejs_compat"]
}
nodejs_compatの設定がないとcloudflare pagesでビルドができても正しく表示ができません。
cloudflare pagesの設定→ランタイム→互換性フラグでも設定できるそうですが私は出来ませんでしたのでwrangler.jsonに記述しております。

※ブログの中身の説明は省略します。

3.cloudflareとgithubの接続

接続を行う際githubでリポジトリを選択してcloudflareのサイトに戻っても画面が変わらないことがあります。
その際は別のブラウザを使用するとつながっていることがありますので確認してみてください。

4.デプロイとサイトの確認

githubの接続が完了してデプロイが成功すればブログが公開できているかと思います。
プロダクションのドメインをクリックすると公開されているページがあるので確認してみてください。
もし正しく表示されていない場合は理由が公開ページに書かれている事もあるのでググったりAIに聞いてみてください。

まとめ

私の躓いたポイントが公開前のローカル部分で特殊な環境だったのでその辺を詳細に記述しました。
LXCに画像を保存する方法がnextcloudからLXCに渡す方法を取っているのですが
LXCに直接マウントできなかったためホスト経由でマウントする形をとっています。