NavSphere：GitHubリポジトリを使って構築されたモダンなパーソナルナビゲーションサイト

NavSphereは、現在人気のNext.js 14テクノロジーフレームワークを使用して開発されたモダンなナビゲーションURL管理プラットフォームです。このプロジェクトの最大の特徴は、従来のデータベースに頼らず、ユーザーのナビゲーション・データ、ウェブサイトの設定、その他の情報を、指定されたGitHubリポジトリに直接ファイルの形で巧みに保存していることです。この設計により、データのセキュリティが保証されるだけでなく、すべての変更履歴を確認することができる。ユーザーがGitHubアカウントでログインする権限を得ると、ウェブページ上でドラッグ＆ドロップで簡単にナビゲーションリンクやカテゴリーを管理することができる。このプロジェクトは、携帯電話やコンピューターなどのさまざまなデバイスに適応できるように設計されており、ライトとダークの両方のインターフェイステーマをサポートしている。NavSphereは、すぐに使い始めたい開発者やユーザーのために、Cloudflare PagesやVercelなどのプラットフォームにワンクリックでデプロイできる詳細なデプロイメント・ガイドを提供しており、世界中のどこからでも素早くアクセスできる、自分だけのパーソナライズされたナビゲーション・ポータルを素早く構築することができる。

機能一覧

• 最新技術スタックこのプロジェクトは、Next.js 14、React 18、TypeScriptで構築されており、パフォーマンスと開発効率を保証しています。
• GitHubデータストレージすべてのナビゲーションデータとサイト構成は、ユーザー自身のGitHubリポジトリに保存されます。
• セキュアログインGitHub OAuthによる認証に対応。
• ドラッグ・アンド・ドロップ管理ドラッグ＆ドロップでナビゲーションリンクやカテゴリーを直感的に並べ替えたり、管理することができます。
• レスポンシブデザインインターフェイスは、パソコン、タブレット、携帯電話で素晴らしいブラウジング体験ができるよう、モバイルファーストのコンセプトでデザインされています。
• テーマの切り替え明るい色と暗い色のテーマを内蔵しており、ユーザーは自分の好みに応じて自由に切り替えることができます。
• インテリジェント・サーチ:: 多数のリンクの中から目的のサイトを素早く見つけるためのクイック検索機能を提供します。
• プログレッシブ・ウェブ・アプリケーション（PWA）ホーム画面への追加をサポートし、ネイティブアプリのようなオフライン体験を提供。
• ワンクリック配備Cloudflare PagesやVercelのようなプラットフォームへのサービスのデプロイを容易にします。

ヘルプの使用

NavSphereはオープンソースのプロジェクトであるため、利用するにはユーザー自身でデプロイする必要がある。全プロセスは主に、環境の準備、GitHubの設定、デプロイの3つのステップに分けられます。

ステップ1：ローカル開発環境の準備

作業を始める前に、以下のソフトウェアがコンピュータにインストールされていることを確認してください：

• Node.js:: バージョン要件 18.0 あるいはそれ以上だ。
• pnpm推奨パッケージ管理ツール。 npm もしかしたら yarn.
• GitGitHubからプロジェクトのコードをクローンする。

業務プロセス：

1. クローンコードターミナル（またはコマンドプロンプト）を開き、プロジェクトを保存したいフォルダに移動し、以下のコマンドを実行してプロジェクトのソースコードをローカルにクローンする。

   git clone https://github.com/tianyaxiang/NavSphere.git
   

2. プロジェクト・ディレクトリに移動する:

   cd NavSphere
   ```3.  **安装依赖**: 在项目根目录下，运行命令安装项目所需的所有依赖库。
   ```bash
   pnpm install
   

3. 環境変数の設定プロジェクトのルート・ディレクトリには .env.example ファイルのコピーを作成し、そのファイル名を .env.local.このファイルは、あなたの個人設定情報を保存するために使用されます。

   cp .env.example .env.local
   

   次に .env.local ファイルに、以降のステップで得たコンフィギュレーション情報を記入する。

ステップ2：GitHubの設定

NavSphereはデータの保存とユーザー認証のバックエンドとしてGitHubを使用しているため、2つの重要な設定が必要です。

1.ユーザーログイン用にGitHub OAuthアプリを作成する

• GitHubの開発者設定ページにアクセスし、"New OAuth App "ボタンをクリックします。
• アプリケーション名任意のフィールドに記入してください。 MyNavSphere.
• ホームページURLローカルでテストする場合は http://localhost:3000.すでに導入されている場合は、ウェブドメインを入力してください。
• 認証コールバックURLローカル・テストフィル http://localhost:3000/api/auth/callback/githubを展開し、それに応じてドメイン名のセクションを修正する。
• 作成に成功すると Client IDをクリックし、"Generate a new client secret "をクリックして新しいクライアント・シークレットを生成する。 Client Secret.この2つの値をそれぞれ .env.local ファイル内の GITHUB_ID 歌で応える GITHUB_SECRET フィールド

2.データを保存するGitHubリポジトリの作成

• GitHub Create a New Repository ページにアクセスしてください。
• リポジトリ名倉庫名は任意です。 navsphere-data.
• パブリック／プライベートリポジトリには公開と非公開があり、非公開の方がナビゲーション・データのプライバシーを保護しやすい。
• 終わったら、GitHub のユーザー名とこのリポジトリの名前を .env.local ファイル内の GITHUB_OWNER 歌で応える GITHUB_REPO フィールドに移動します。リポジトリのブランチは通常 main記入 GITHUB_BRANCH フィールドで十分である。

上記の設定が完了すると .env.local ファイルは次のようなものだ：

# GitHub OAuth App 配置
GITHUB_ID=your-github-client-id
GITHUB_SECRET=your-github-client-secret
# GitHub 仓库配置
GITHUB_OWNER=your-github-username
GITHUB_REPO=navsphere-data
GITHUB_BRANCH=main
# NextAuth 配置
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=a_random_strong_secret_string

NEXTAUTH_SECRET 自分で十分に複雑なランダム文字列を設定することができる。

ステップ3：オンライン展開

デプロイにはCloudflare PagesかVercelを使うことをお勧めします。どちらも無料で簡単にデプロイできるオプションを提供しています。

例えば、Cloudflare Pages：

1. Cloudflareコンソールにログインし、「Pages」から「Create Project」を選択し、GitHubアカウントに接続します。
2. 選択する フォーク クローン NavSphere プロジェクト倉庫欠陥(データを保存するためのリポジトリ）。
3. セットアップ:
   • ビルドコマンド: pnpm install && pnpm build
   • 出力ディレクトリの構築: .next
4. 環境変数環境変数 "の設定に、"環境変数 "で追加した変数を追加する。 .env.local ファイル(GITHUB_ID, GITHUB_SECRET, GITHUB_OWNER, GITHUB_REPO, GITHUB_BRANCH, NEXTAUTH_SECRET).銘記する::NEXTAUTH_URL Cloudflare Pagesが生成したドメイン名になるように設定する必要があります。 https://your-project.pages.dev.
5. Save and Deploy "をクリックして数分待つと、パーソナル・ナビゲーション・サイトがオンラインになります。

デプロイに成功したら、ウェブサイトにアクセスしてログインをクリックし、GitHub経由での認証後にナビゲーションリンクの追加と管理を開始します。システムは自動的にあなたのサイトへのリンクを navsphere-data リポジトリに作成 navigation.json (ナビゲーション・データ）と site.json (サイト・コンフィギュレーション）などの文書がある。

アプリケーションシナリオ

1. 個人開発者のブックマーク管理
   NavSphereは、日常的に多くのツールサイト、ドキュメント、ブログにアクセスする必要があるプログラマーや開発者にとって、頻繁に使用するリンクを分類し、クラウド上で同期し、GitHub経由でバージョン管理することで、効率的でパーソナライズされたワークナビゲーションデスクを作成するのに役立ちます。
2. チーム内リソース・ポータル
   チーム（設計チーム、開発チーム、運用チームなど）は、NavSphere Nav Station を共同で管理することができます。この NavSphere Nav Station には、チーム内で共通に使用される内部システム、設計リソース、技術文書、プロジェクト管理ツールなどへのリンクが集約されています。新メンバーは、このポータルを通じて、関連するすべてのリソースについてすばやく学び、アクセスすることができます。
3. パーソナル・ナレッジ・ベース・ポータル
   ブログ、ナレッジ・ベース、プロジェクト・ポートフォリオなど、個人的なコンテンツがさまざまなプラットフォームに分散している場合、NavSphereを使用して統一された個人ホームページやナビゲーション・ポータルを作成し、他の人が自分の作品やスキルの概要をすばやく把握できるようにすることができます。
4. ギークのブラウザ ホームページ
   NavSphereのウェブサイトをブラウザのホームページとして設定することができます。これにより、ブラウザを開くたびに、注意深く整理された自分のナビゲーション・リンクが表示され、いつでもドラッグ、ドロップ、編集によってレイアウトを調整することができます。

品質保証

1. ログイン時に認証エラーが表示された場合はどうすればよいですか？
   これは通常、GitHub OAuth App の設定ミスが原因です。を確認してください。 .env.local ファイル（またはデプロイメント・プラットフォームの環境変数）内の GITHUB_ID 歌で応える GITHUB_SECRET が正しいことを確認してください。また、GitHub OAuth App の設定にある "Authorisation callback URL" が、あなたのウェブサイトの物理アドレスと同じであることも確認しましょう (そのアドレスには http もしかしたら https:// そして最後に /api/auth/callback/github パス）は同一である。
2. ログインしてもナビゲーションデータが表示されない、またはデータの読み込みに失敗するのですが？
   まず GITHUB_OWNER(GitHubユーザー名）と GITHUB_REPO(リポジトリ名）が正しいことを確認してください。次に、GitHub アカウントにデータウェアハウスへの書き込み権限があることを確認します。初めてログインした場合はシステムが自動的にデータファイルを作成しますが、もし失敗した場合は手動で空の navigation.json ファイルの内容を []それからもう一度やってみよう。
3. プロジェクトのデプロイ時にビルドが失敗します。
   ビルドに失敗する最も一般的な原因は、Node.jsのバージョンが要件を満たしていないことです。 18.0.VercelまたはCloudflare Pagesプラットフォームを使用している場合は、プロジェクト設定でNode.jsのバージョンを指定できます。あるいは、依存関係の問題で失敗することがあります。 node_modules フォルダと pnpm-lock.yaml ファイルを再実行する。 pnpm install うまくいくかどうか見てみよう。
4. ナビゲーション・データウェアハウスをプライベートに設定できますか？
   できます。データが保存されている GitHub リポジトリを非公開に設定することで、個人リンクのプライバシーをより適切に保護できます。NavSphere は、認証された トークン リポジトリにアクセスすることで、パブリック・リポジトリもプライベート・リポジトリも正常に読み書きできるようになります。