machinadev / machina-blog

Blog/Portfolio - Maxime N

Machina Blog - Un peu de moi dans ce Multivers

Bienvenue sur mon blog ici façonné avec Next.js, Tailwind CSS et fièrement propulsé par Vercel.

Fortemment inspiré par le blog de Timothy Lin que l'on peut trouver ici. Le site de démonstration peut être trouvé là.

🛠 Installation & Mise en place

1. Cloner le repository

   git clone [email protected]:MachinaDev/machina-blog.git

2. Positionnez vous dans le dossier cloné

   cd machina-blog

3. Installer les dépendances

   yarn install

4. Créer un fichier de variables d'environnement .env.local avec les données présentes dans le fichier .env.example

   NEXT_PUBLIC_GISCUS_REPO=
   NEXT_PUBLIC_GISCUS_REPOSITORY_ID=
   NEXT_PUBLIC_GISCUS_CATEGORY=
   NEXT_PUBLIC_GISCUS_CATEGORY_ID=
   EMAILOCTOPUS_API_URL=
   EMAILOCTOPUS_API_KEY=
   EMAILOCTOPUS_LIST_ID=
   DATABASE_URL=
   OAUTH_CLIENT_KEY=
   OAUTH_CLIENT_SECRET=
   NEXTAUTH_URL=
   SECRET=
   TWITTER_API_KEY=
   TWITTER_BEARER_TOKEN=
   SPOTIFY_CLIENT_ID =
   SPOTIFY_CLIENT_SECRET =
   SPOTIFY_REFRESH_TOKEN =
   SPOTIFY_REDIRECT_URI =

5. Initialiser la base de données avec l'ORM Prisma npx prisma db push

6. Démarrer le serveur de développement

   yarn dev

🏗️ Construire et Lancer le site en production

1. Génerer un site statique de production

   yarn build

2. Prévisualiser le site lorsqu'il sera déployé

   yarn serve

Ouvrir la page http://localhost:3000 dans votre navigateur pour voir le résultat.

👨‍🎨️ Customization

1. Personnaliser le fichier data/siteMetadata.js (Les informations du site).
2. Modifier les 'content security policy' dans le fichier next.config.js si vous voulez utiliser un outil analytique particulier ou une solution de commentaire autre que Giscus.
3. Personnaliser le fichier authors/default.md (Auteur principal).
4. Modifier le fichier projectsData.js.
5. Modifier le fichier headerNavLinks.js pour customiser les liens de navigation.
6. Ajouter des articles pour le blog.

📝 Fichiers à customiser

• data/siteMetadata.js - contient la majorité des informations du site qui doivent être modifier pour les besoins de l'utilisateur.

• data/authors/default.md - Les informations par défault de l'auteur du site (obligatoire). D'autres auteurs peuvent être ajouter dans des fichiers du dossier data/authors.

• data/projectsData.js - Les données utilisées pour générer des cartes sur la page de projet.

• data/headerNavLinks.js - Lien de navigation.

• data/logo.svg - Remplacer par votre logo.

• data/blog - Remplacer par vos propres articles.

• public/static - Stocker vos images et favicons.

• tailwind.config.js et css/tailwind.css - contient la feuille de style de TailwindCSS qui peut être modifier pour changer le style global du site.

• css/prism.css - contrôle le style des blocs de code du site internet. N'hésitez pas à changer le thème Prism e.g. prism themes.

• components/social-icons - Pour ajouter d'autres icônes, copier simplement un fichier SVG depuis Simple Icons et l'indexer dans le fichier index.js. On peut aussi utiliser heroicons.

• components/MDXComponents.js - Passer directement votre code JSX ou des composants React en le spécifiant dans ce fichier. On peut ensuite les appeler directement dans un fichier .mdx ou .md. Par défault, un lien custom ou un composant d'image est passé.

• layouts - Template général utilisé dans les pages du site.

• pages - Système de navigation du site. Rendez-vous sur Next.js documentation pour davantage d'information.

• next.config.js - Fichier de configuration relative au Framework NextJS. Vous pourriez avoir besoin de modifier le 'Content Security Policy' si vous voulez charger un script ou des images depuis d'autres domaines.

🔨 Composer un article

Lancer node ./scripts/compose.js pour générer un nouveau post. Suivez le prompt pour générer un nouveau post avec un header frontmatter déjà rempli.

📚 Stack Technique

Outils	Lien
Framework	Next.js
ORM	Prisma
Database	Digital Ocean
Deployment	Vercel
Styling	Tailwindcss
Comment	Tailwindcss
Newsletter	Email Octopus
Favicon	realfavicongenerator
Content	MDX

📈 Stats

🪜 Project structure

📦 root
├── 🗂️ components             # Fichiers React pour personnaliser les composants du site
├── 🗂️ css                    # Fichiers CSS pour Tailwind et Prism
├── 🗂️ data                   # Fichiers pour modifier le contenu des pages
│ ├── 🗂️ authors              # Fichiers Markdown pour les auteurs de blog
│ ├── 🗂️ blog                 # Fichiers Markdown pour les articles de blog
│ └── 🗂️ snippets             # Fichiers Markdown pour les extraits de code
├── 🗂️ layouts                # Modèles de pages
├── 🗂️ lib                    # Modules non React
├── 🗂️ pages                  # Fichiers de page pour le Blog
├── 🗂️ public                 # Fichiers statiques pour les images, rss et actifs
│ ├── 🗂️ static               # Contient des images, des favicons et d'autres actifs
│ │ ├── 🗂️ favicons            # Fichiers favicon
│ │ └── 🗂️ images             # Fichiers images
│ ├── 📝 feed.xml             # Flux RSS
│ ├── 📝 robots.txt           # Aide les robots à explorer le blog
│ └── 📝 sitemap.xml          # Sitemap
├── 🗂️ scripts                # Scripts à exécuter pour différentes tâches courantes
├── 📝 tailwind.config.js     # Contient une feuille de style tailwind pour changer le style visuel
└── 📝 next.config.js         # configuration liée à Next.js

📊 Performance du site selon Google Lighthouse

🚀 Déploiement

Vercel La solution la plus facile pour déployer le template est d'utiliser Vercel Platform des créateurs de Next.js. Regardez la documentation sur Next.js deployment documentation pour davantage de détails.