認証機能付きWebページのセットアップ

1. GitHubリポジトリ作成

任意でリポジトリを作成して、ローカルにpullして作業する。

なお、.gitignoreはNextjsのテンプレートを指定した。

2.VitePress初期セットアップ

macbook に Node.js をインストール

bash

brew install node

VitePress のインストール

bash

npm install vitepress

サイトの初期化

bash

npx vitepress init

初期設定を聞かれるので、適宜指定する。

noimasaki@MacBook-Air docs-noimk-com % npx vitepress init

┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./
│
◇  Site title:
│  docs.noimk.com
│
◇  Site description:
│  A VitePress Site
│
◇  Theme:
│  Default Theme
│
◇  Use TypeScript for config and theme files?
│  Yes
│
◇  Add VitePress npm scripts to package.json?
│  Yes
│
└  Done! Now run npm run docs:dev and start writing.

Tips:
- Make sure to add .vitepress/dist and .vitepress/cache to your .gitignore file.

忘れないうちにTipsで出力されたディレクトリを.gitignoreに記述する

# vitepress
.vitepress/dist
.vitepress/cache

ここまででVitePressの初期セットアップは完了したので、開発サーバを起動してみて確認してみる。各種実行スクリプトはpackage.jsonのscriptsで規定されており、デフォルトで規定されているのは、npx vitepress devと同等のスクリプトを実行してくれる下記コマンドにて開発サーバの起動が可能。

bash

npm run docs:dev

初期セットアップ

この後、Cloudflare Pagesにてビルド設定をする必要があるが、VitePressのビルド関連の設定はデフォルトである以下のままとする。

Build Command: npm run docs:build
Output Directory: docs/.vitepress/dist

3. Cloudflare Pages作成

まず、CloudflareからGithubへのアクセス権限を付与する。これによって、GitHubのリポジトリを更新することでCloudFlareが自動的にビルド&デプロイが可能となる。

GitHubにて プロフィール > Settings > Applications > Cloudflare Workers and Pagesからアクセス許可するリポジトリを追加指定する。

GitHub側のアクセス許可

Cloudflareにて コンピューティングとAI > Workers & Pages > アプリケーションを作成する に進むと、Workersを作成できる画面となる。今回はPagesを作成したいため、Looking to deploy Pages? Get started をクリックしてClassic画面？に遷移する。

alt text