abdulrahman.idダウンロードabdulrahman.idソースコードのダウンロード

abdulrahman.id

AI ソースコード

1.0.0

ダウンロード

⚡abdulrahman.id

最新のポートフォリオWebサイトをオープンソースすることにしました！コンテンツのCMSを使用してプロジェクトと投稿を追加する動的なコンテンツ管理があり、next.jsとChakra UIを使用して構築されました。

詳細については、next.jsとChakra UIのドキュメントを参照してください。

このリポジトリを自由にフォークして独自のポートフォリオを作成してください。リポジトリが気に入ったら、スターを提供することで親切にサポートしてください！

？始めましょう

APIキーを取得します

.env.localを作成し、 .env.exampleに基づいて変数名に従って、以下の手順に基づいてAPIキーを取得します

満足のいくAPIキー

1.満足のいくアカウントを作成します
2。コミュニティスペースを追加します（無料です！）
3.「コンテンツを作成する」を選択します
4.コンテンツモデルに移動して、コンテンツタイプの追加を開始します

？このポートフォリオWebサイトでは、5つのコンテンツタイプがあります。
~~1。BlogPosts~~
⚡2.0.0アップデートの後、GitHubの問題をブログコンテンツとして使用します！
詳細については、https：//abdulrahman.id/blog/unleash-your-dev-blog-write-with-github-issues-as your-cms
featuredprojects
プロジェクト
導入
contactme
コードで使用されているのはIDであるため、この正確な名前を追加する必要があります。

これらのフィールドに従ってコンテンツタイプを追加します。
設定に移動 - > APIキー - >コンテンツ配信 /プレビュートークン - >「Your Space Name」をコピーしてコンテンツ配信APIアクセストークンをコピーします
.env.exampleに従って環境変数にそれを入れてください、そしてあなたはすべて設定されています！

FireBase APIキー

1. FireBaseプロジェクトを作成します
2。物事をセットアップした後、APIキーを取得して、それらを保存します。
3. Firestoreデータベースに移動します
4. viewsという名前のコレクションを追加します
5。次に、 .env.exampleに従ってこれらのAPIキーを前に置いてください。それだけです！

Google Analytics APIキー

1.プロパティ設定の部分で、Googleアナリティクスアカウントを作成して、ユニバーサル分析をオンにすることを忘れないでください
2。その後、 UA-から始まるコードが表示されます。
3.これらのコードをコピーして、 env.exampleに従って環境変数に入れます。

プロジェクトの開始

npm iまたはyarnで依存関係をインストールします
npm run devまたはyarn devによるプロジェクトを開始する

展開

Vercelを使用して簡単に展開できますか？

？概要

pages/index.js = homepage
pages/projects/index.js =プロジェクトアーカイブページ
pages/blog/index.js =ブログリストページ
pages/blog/[slug].js =ブログ投稿ページ
pages/api/views = API FireBaseからブログ投稿ビューを取得する