Next.js・TailwindCSS・Shadcn/uiで構築された、シンプルなプロフィールページ。
🔮サンプル → https://nonick-mc.com
src/app/page.tsxを編集する前に、以下の手順を行ってください。
※Next.js、及びTailwindCSSを理解していることを推奨します！
- このリポジトリをforkし、
npm iで必要なライブラリをインストールする。 src/config/site.tsを編集し、Webサイトのメタデータを編集する。- 同様に、
src/app/layout.tsx、src/app/opengraph-image.pngを編集する。
src/componentsには、プロフィールページで使用されている要素の一部がコンポーネントとして切り出されています。
animation.tsx... ページ読み込み時のフェードアニメーションを制御する親コンポーネントexternal-link.tsx...next/linkの遷移先を新規タブにする際の設定をまとめたコンポーネントlink-card.tsx... リンクカードの枠組み部分link-card-name.tsx... リンクカードの名前・ID部分link-card-icon.tsx... リンクカードのアイコン部分theme-toggle.tsx... ダークテーマ・ライトテーマの切り替えボタン
このリポジトリには、masterブランチへコミットが行われた際に、Github Action内でビルドを自動で行い、GitHub Pagesに公開するワークフローが組み込まれています。
-
リポジトリのSettingから、Actions (General)→Workflow permissionsを、Read and write permissionに設定する。
-
ユーザー設定 (自分のアイコンをクリックしてSetting)の一番下にあるDeveloper Settingを選択し、表示された画面のPersonal access tokensのFine-grained tokensを選択し、Generate new tokenからデプロイ用のパーソナルトークンを作成する。作成したトークンはコピーしておくと良い。
| 項目 | 設定 |
|---|---|
Token name |
トークンの名前 (自分がわかりやすいものに設定する) |
Expiration |
トークンの有効期限 |
Repository access |
Public Repositories (read-only) に設定 |
- 再度リポジトリのSettingに戻り、Environment → Environment secretsのAdd secretから、デプロイ用の環境変数を作成する。
| 項目 | 値 |
|---|---|
Name |
TOKEN |
Value |
手順2で作成したパーソナルトークン |
- コミットを行う。
- デプロイが完了するまで待ち、リポジトリのSetting → PagesのBuild and deploymentのBranchを、
gh-pagesに設定する。