abdulrahman.id
1.0.0
Ich habe beschlossen, meine neueste Portfolio-Website Open-Source zu veröffentlichen! Es verfügt über ein dynamisches Content -Management, um Projekte und Beiträge mit intelligentem CMS hinzuzufügen, und wurde mit Next.js und Chakra UI erstellt.
Siehe Dokumentation von Next.js und Chakra UI, um mehr zu erfahren.
Fühlen Sie sich frei, dieses Repository zu geben, um Ihr eigenes Portfolio zu erstellen. Wenn Sie das Repo mochten, unterstützen Sie es bitte, indem Sie ihm einen Stern geben!
Erstellen Sie eine .env.local und .env.example
1. Erstellen Sie ein inhaltliches Konto
2. Fügen Sie einen Community -Raum hinzu (es ist kostenlos!)
3. Wählen Sie "Ich erstelle Inhalte"
4. Gehen Sie zum Inhaltsmodell und fügen Sie den Inhaltstyp hinzu
? Auf dieser Portfolio -Website verfügt es über 5 Inhaltstypen: nämlich:
1. Blogposts
Nach dem Update ⚡2.0.0 verwende ich GitHub -Probleme als Blog -Inhalt!
Weitere Details zu diesem Unter:
- FeaturedProjects
- Projekte
- Einführung
- Contactme
Sie müssen diesen genauen Namen hinzufügen, da es sich um die ID handelt, die im Code verwendet wird.
Fügen Sie den Inhaltstyp nach diesen Feldern hinzu: 
Gehen Sie zu Einstellungen -> API -Schlüssel -> Inhaltszustellung / Vorschau -Token -> "Ihr Speicherplatz Name" Kopieren Sie die Space -ID und die Inhaltszustellung API -Zugriffs -Token
Stecken Sie es in die Umgebungsvariablen nach .env.example und Sie sind alle festgelegt!
1. Erstellen Sie ein FireBase -Projekt
2. Nachdem Sie Dinge eingerichtet haben, erhalten Sie die API -Schlüssel, speichern Sie diese.
3. Gehen Sie zur Firestore -Datenbank
4. Fügen Sie eine Sammlung mit dem Namen views hinzu
5. Geben Sie diese API -Schlüssel nach dem .env.example vor und das war's!
1. Erstellen Sie ein Google Analytics -Konto im Teil der Eigenschaftseinstellungen , vergessen Sie nicht, universelle Analysen einzuschalten
2. Danach werden Sie einen Code sehen, der mit UA- beginnt
3. Kopieren Sie diesen Code und setzen Sie ihn nach env.example und Fertig in Umgebungsvariablen ein!
Installieren Sie die Abhängigkeiten mit npm i oder yarn
Starten Sie das Projekt von npm run dev oder yarn dev
Sie können einfach mit Vercel einsetzen?
pages/index.js = homepage
pages/projects/index.js = Projektarchivseite
pages/blog/index.js = Blog -Listings Seite
pages/blog/[slug].js = Blog -Postseite
pages/api/views = API, um Blog -Post -Ansichten von Firebase zu holen
