Blog de Jimmy

Un système de blog personnel minimaliste construit avec Next.js 15+, prenant en charge la création en ligne et le déploiement statique.

Pile technique

• Framework : Next.js 15+ (App Router)
• Langage : TypeScript
• Style : Tailwind CSS
• Icônes : Lucide Icons
• Contenu : Markdown + Gray Matter + Remark
• Authentification : GitHub OAuth
• Déploiement : Vercel

Fonctionnalités

Côté lecteur

• 📝 Rendu des articles Markdown + GFM (avec affichage des formules mathématiques)
• 🏷️ Filtrage par tags, pagination, archivage (par année/tag)
• 📚 Navigation dans la table des matières (TOC) et copie en un clic des blocs de code
• 📱 Mise en page responsive et bascule entre thème clair/sombre
• 🔥 Carte de chaleur du calendrier de création en survol (articles + essais)
• 📡 Sortie d'abonnement RSS (/rss.xml)

Côté création (interface d'administration)

• 🔐 Connexion via GitHub OAuth (vérification des droits propriétaire/collaborateur)
• ✍️ Création, édition et suppression d'articles/essais en ligne
• 🆔 ID de fichier personnalisé + évitement automatique des conflits
• 👀 Trois modes d'écriture : édition / aperçu / écran partagé
• 📊 Tableau de statistiques de création (total, production hebdo/mois, tags populaires)

Côté ingénierie

• ⚡ Sortie statique multipages (force-static) pour améliorer performance et stabilité
• 🧭 Sitemap et robots intégrés
• 🧩 Cache de lecture de contenu et API modulaire

Structure du projet

.
├── app/               # 页面、API 路由、Server Actions
│   ├── api/           # 接口（OAuth、统计、校验、Markdown 等）
│   ├── actions/       # 内容管理相关服务端动作
│   ├── posts/         # 文章详情页
│   └── page.tsx       # 首页
├── content/
│   ├── notes/         # 随笔
│   └── posts/         # 文章
├── components/        # React 组件
├── public/            # 静态资源
└── styles/            # 全局样式

Installation et exécution

• Cloner le projet

git clone https://github.com/Lily-404/blog.git
cd jimmy-blog

• Installation des dépendances

npm install

• Exécution du serveur de développement

npm run dev

• Construire la version de production

npm run build

Ajouter un nouvel article

Méthode 1 : Interface d’administration en ligne (recommandé)

• Accédez à la page /admin
• Connectez-vous avec GitHub OAuth
• Remplissez les informations de l’article et soumettez
• L’article sera automatiquement créé via l’API GitHub, et Vercel redéploiera automatiquement

Méthode 2 : Ajout manuel de fichier

• Créez un nouveau fichier Markdown dans le dossier content/posts
• Format de nommage du fichier : xxx.md
• Ajoutez les métadonnées en en-tête du fichier :

---
title: 文章标题
date: YYYY-MM-DD
tags: ["标签1","标签2","标签3"]
---

Ajouter une note

• Créez un nouveau fichier Markdown dans le répertoire content/notes
• Format de nommage du fichier : YYYY-MM-DD-title.md
• Ajoutez les métadonnées en tête du fichier :

---
date: YYYY-MM-DD
---

Configuration du panneau d'administration

Le panneau d'administration utilise l'authentification GitHub OAuth, seul le propriétaire du dépôt ou les collaborateurs peuvent y accéder.

1. Créer une application GitHub OAuth

• Accédez à GitHub Settings > Developer settings > OAuth Apps
• Cliquez sur "New OAuth App"
• Renseignez les informations :
• Nom de l'application : Jimmy Blog Admin (ou n'importe quel nom)
• URL de la page d'accueil : https://ton-domaine.com (en production) ou http://localhost:3000 (en développement local)
• URL de rappel d'autorisation :
• En production : https://ton-domaine.com/api/auth/github/callback
• En développement local : http://localhost:3000/api/auth/github/callback
• Cliquez sur "Register application"
• Notez le Client ID
• Cliquez sur "Generate a new client secret", notez le Client secret

2. Configurer les variables d'environnement

Ajoutez les variables d'environnement suivantes dans les paramètres de votre projet Vercel :

• GITHUB_CLIENT_ID : l'ID client de votre application GitHub OAuth
• GITHUB_CLIENT_SECRET : le secret client de votre application GitHub OAuth
• GITHUB_OWNER : nom d'utilisateur GitHub (par défaut : Lily-404, utilisé pour vérifier les autorisations utilisateur)
• GITHUB_REPO : nom du dépôt (par défaut : blog)
• GITHUB_REDIRECT_URI : URL de rappel OAuth (optionnelle, générée automatiquement par défaut)
• NEXT_PUBLIC_BASE_URL : URL de votre site web (utilisée pour générer l'URL de rappel, doit être définie en production)
• En production : https://www.jimmy-blog.top
• En développement local : http://localhost:3000

3. Configuration pour le développement local

Créez un fichier .env.local à la racine du projet :

GITHUB_CLIENT_ID=你的Client_ID
GITHUB_CLIENT_SECRET=你的Client_Secret
GITHUB_OWNER=Lily-404
GITHUB_REPO=blog
NEXT_PUBLIC_BASE_URL=http://localhost:3000

4. Configuration de l'environnement de production (Vercel)

Dans les paramètres du projet Vercel, assurez-vous de configurer :

NEXT_PUBLIC_BASE_URL=https://www.jimmy-blog.top

⚠️ Attention :

• Le fichier .env.local a été ajouté à .gitignore et ne sera pas soumis à Git
• En développement local, assurez-vous que l’URL de rappel de l’application OAuth est définie sur http://localhost:3000/api/auth/github/callback
• En production, il faut absolument définir NEXT_PUBLIC_BASE_URL sur https://www.jimmy-blog.top
• L’URL de rappel OAuth App en production doit être : https://www.jimmy-blog.top/api/auth/github/callback

Déploiement

Le projet est déjà configuré pour le déploiement sur Vercel, avec support du déploiement automatique. Il suffit de pousser le code sur le dépôt GitHub, Vercel va automatiquement construire et déployer.

Avantages de l’utilisation du back-office

• ✅ Pas besoin d’environnement de développement local
• ✅ Ajouter des articles à tout moment, n’importe où
• ✅ Déclenche automatiquement le redéploiement Vercel
• ✅ Entièrement gratuit (GitHub OAuth et Vercel dans la limite gratuite)
• ✅ Sécurisé (authentification GitHub OAuth, seul le propriétaire/collaborateur du dépôt peut accéder)
• ✅ Aucune gestion de mot de passe, connexion possible avec un compte GitHub
• ✅ Prise en charge de l’édition en ligne des contenus existants (pas seulement la création)
• ✅ Gestion automatique des conflits d’ID de fichier, évite les écrasements et renommages manuels
• ✅ Statistiques de création intégrées dans le back-office, facilitant l’exploitation continue du contenu

Analyse du projet et feuille de route future

• Document d’analyse du projet : docs/project-analysis.md
• Document de feuille de route Future : docs/future-roadmap.md

Contribution

Issues et Pull Requests sont les bienvenus !

Licence

MIT License

--- Tranlated By Open Ai Tx | Last indexed: 2026-04-03 ---