果報

二度寝して待つ

Vercelによる自サイト制作のことはじめ

Vercelで自サイトをリニューアルしたときの備忘録。今後、随時加筆していきます。

開発環境

どこからでもアクセスできる開発専用の環境を作りたかったので、Google Compute Engine(GCE)の無料枠でインスタンスを立てることにしました。

GCEは、以前までWordPress用に使っていましたが、アーカイブ化に伴い別サーバに引っ越して、ちょうどリソースが余ってたので良かったです。

GCE

無料枠に収まるようにリソースを選択します(リージョン:us-west1、マシン:e2-micro、ストレージ:30GB)。OSは使い慣れたUbuntu 24.04 LTSを選択。

インスタンス作成後、詳細画面でGoogleアカウントとは異なるユーザ名で作成したSSH認証鍵を追加します。これで、このあとのTailscaleでの接続が楽になります。

Tailscale

セキュリティを考慮して、開発環境への接続はTailscaleに限定します。以下の記事を参考に、Google Cloudの管理画面でTailscale用の設定を追加します。

tailscale.com

おそらく記事中の「Step 2: Allow UDP port 41641」までやれば問題ないずです(たぶん)。

GCEの管理画面からサーバにSSH接続して、Tailscaleをインストールします。Tailscaleアカウントでログインし、tailscaledを起動します。このとき、TailscaleのSSH接続を許可するため、sshオプションを付けます。

$ sudo tailscale up -ssh

これで、Tailscaleインストール済の別端末から接続できるはずです。最も簡単な方法は、コマンドプロンプトからssh [サーバのユーザ名]@[Tailscaleのホスト名]でログインできます。

このとき、先ほど追加したSSH認証鍵のユーザを使って接続すると、sudoコマンドがパスワードレスで実行できて便利です。

VSCode

VSCodeにもTailscaleプラグインをインストールします。これで、エディタからTailscale経由でサーバに接続し、直接ファイルを開いて編集できます。

Next.js

VercelにはNext.jsをデプロイします。ただ、Next.jsは開発経験も知識もゼロなので、Vercelで公開されているテンプレートを最大限活用します。

vercel.com

今回は、PortfolioカテゴリからNextfolioというとてもクールなテンプレートを選択しました。

vercel.com

なお、事前にVercelのアカウントを作成してGitHubと連携しておくと、上記リンクから「Deploy」を選択するだけで、自動でVercelのプロジェクト作成とGitHubのリポジトリ作成を行ってくれます(なんて便利なんだ…)。

Vercelのチームは、非営利の個人使用のみであれば、「Hobby」を選択すると無料で使えます。ただ、私は新規ユーザだったので、最初は「Pro Trial(10日間のお試し)」か「Pro」しか選べず、「Hobbyを選べないってことは無料で使えないのか?」と震えましたが、「Pro Trial」を選択して10日後に自動で「Hobby」に切り替わってました(安心しました)。

Nextfolio

GitHub連携によって、GitHubのリポジトリを自動作成後、開発環境でローカルリポジトリを作成(クローン)します。

$ cd ~
$ git clone https://github.com/litoma/Nextfolio.git
$ cd Nextfolio

Node.js

続いてnode.jsをインストールします。このあたりから生成AIの力を借りながら進めます。

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt update
sudo apt install -y nodejs

pnpm

Nextfolioはpnpmを使うようなのでインストールします。依存関係にあるパッケージのインストールもあわせて行います。

$ npm install -g pnpm
$ pnpm install

ところでpnpmって何でしょう。生成AIに聞いてみます。

pnpm (performant npm) は、JavaScriptのパッケージマネージャーです。npm (Node Package Manager) と同じように、Node.jsプロジェクトで必要なパッケージをインストールしたり、管理したりするツールですが、npmよりも高速で、ディスク容量を節約できる点が大きな特徴です。

とりあえず、npmのライバルということがわかりました。

Nextfolio

Nextfolioのテンプレートをカスタマイズします。各種SNSへのリンク含め、トップページの情報は以下のファイルを編集すればOKです。

app/page.tsx
app/lib/config.ts

私の場合、生成AIに聞きながらblogページもカスタマイズし、はてなブログの記事一覧を表示するようにしました。コードを以下に貼っておきます。

github.com

GitHub

カスタマイズが完了したらローカルリポジトリにコミットし、GitHubにプッシュします。

git add .
git commit -m "Customize Nextfolio"
git push origin main

事前にgitの認証やAPIキーの発行は済ませておきます(手順は生成AIに聞けば教えてくれます)。また、以下のコマンドを実行し、認証情報をローカルに保存することで、初回以降は入力不要となります。

git config --global credential.helper store

Vercel

GitHubにプッシュされると、Vercelがその更新を検知して自動でデプロイを開始します(なんて便利なんだ…)。

Nextfolioの場合、だいたい1~2分でデプロイが完了します。また、デプロイでエラーとなった場合はVercel上でも表示されるほか、登録したメール宛にも通知してくれます(本当に便利すぎる…)。

さらに、Hobbyプランでも独自ドメインを設定できます。私の場合、DNSにCloudflareを使っていますが、Vercelの管理画面上の操作だけで、DNSのレコード追加まで行ってくれました。