J'ai décidé d'ouvrir mon dernier site Web de portfolio! Il a une gestion de contenu dynamique pour ajouter des projets et des publications à l'aide de CMS contenus, et a été construit à l'aide de l'interface utilisateur Next.js et du chakra.
Reportez-vous à la documentation Next.js et Chakra UI pour en savoir plus.
N'hésitez pas à alimenter ce référentiel pour faire votre propre portefeuille, et si vous avez aimé le référentiel, veuillez le soutenir en lui donnant une étoile!
Créez un .env.local et suivez le nom de variable basé sur .env.example et obtenez les touches API en fonction des étapes ci-dessous
1. Créez un compte contenu
2. Ajouter un espace communautaire (c'est gratuit!)
3. Choisissez "Je crée du contenu"
4. aller au modèle de contenu et commencer à ajouter un type de contenu
? Dans ce site Web de portefeuille, il a 5 types de contenu qui est:
1. Blogposts
Après la mise à jour ⚡2.0.0, j'utilise des problèmes GitHub comme contenu de blog!
Plus de détails à ce sujet sur: https://abdulrahman.id/blog/unleash-your-dev-blog-write-more-with-github-issues-as-your-cms
- Projets en vedette
- Projets
- Introduction
- Contact
Vous devez ajouter ce nom exact car c'est l'ID qui est utilisé dans le code.
Ajoutez le type de contenu en fonction de ces champs: 

Accédez à Paramètres -> Clés API -> Tokens de livraison / prévisualisation de contenu -> "Votre nom d'espace" Copiez l'ID d'espace et la livraison de contenu API Access Token
Mettez-le dans les variables d'environnement selon .env.example et vous êtes prêt!
1. Créer un projet de base de feu
2. Après avoir configuré les choses, vous obtiendrez les clés de l'API, sauvez-les.
3. Aller à la base de données Firestore
4. Ajouter une collection nommée views
5. Ensuite, mettez ces clés API avant selon le .env.example et c'est tout!
1. Créez un compte Google Analytics, dans la partie paramètres de la propriété , n'oubliez pas d' activer l'analyse universelle
2. Après cela, vous verrez un code commençant par UA-
3. Copiez ces code et mettez-le dans les variables d'environnement selon env.example et fait!
Installez les dépendances avec npm i ou yarn
Démarrez le projet par npm run dev ou yarn dev
Vous pouvez déployer facilement en utilisant Vercel?
pages/index.js = page d'accueil
pages/projects/index.js = page d'archive des projets
pages/blog/index.js = page de listes de blogs
pages/blog/[slug].js = page de blog
pages/api/views = API pour récupérer les vues sur les articles de blog depuis Firebase