nextjs blog theme

Un démarreur de blog personnalisable en utilisant:

• Next.js v15 (routeur de pages)
• Vent arrière v3.x
• Éditeur visuel netlify
• Support MDX intégré
• Comprend le design moderne avec des thèmes sombres et clairs

Jetez un coup d'œil à la démo.

Cliquez ici pour regarder la procédure pas à pas de modèle!

Table des matières:

• Commencer
  • Configuration localement
  • Utilisation de l'assistant
• Configuration du blog
• Ajout de nouveaux messages
• Éditeur visuel netlify
• Essai
  • Test par défaut inclus
  • Élimination de la rénovation

Commencer

---

Vous pouvez commencer avec ce projet de deux manières: localement ou en utilisant l'assistant de configuration.

Configuration localement

Si vous le faites localement, commencez par cliquer sur le bouton Utiliser ce modèle sur GitHub. Cela créera un nouveau référentiel avec les fichiers de ce modèle sur votre compte GitHub. Une fois cela fait, cloner votre nouveau référentiel et y accéder dans votre terminal.

De là, vous pouvez installer les dépendances du projet en fonctionnant:

yarn install

Enfin, vous pouvez exécuter votre projet localement avec:

yarn run dev

Ouvrez votre navigateur et visitez http: // localhost: 3000, votre projet devrait fonctionner!

Utilisation de l'assistant de configuration

Grâce à l'assistant de configuration, vous pouvez créer votre blog en quelques clics et déployer sur Netlify.

Configuration du blog

La configuration est basée sur des variables d'environnement pour faciliter l'intégration avec n'importe quelle plate-forme JAMSTACK, comme Netlify.

Voici les variables que vous pouvez modifier:

Variable	Description	Options
BLOG_NAME	Le nom de votre blog, affiché sous l'avatar
BLOG_TITLE	L'en-tête principal ( h1 ) sur la page d'accueil
BLOG_FOOTER_TEXT	Le texte dans le pied de page
BLOG_THEME	Le thème à passer au vent arrière	défaut
BLOG_FONT_HEADINGS	La police de police pour tous les titres HTML, de h1 à h6	Sans-Serif (par défaut), Serif, Monospace
BLOG_FONT_PARAGRAPHS	la police de police pour tous les autres éléments HTML	Sans-Serif (par défaut), Serif, Monospace

Toutes les variables Env peuvent être configurées via l'assistant ou en définissant les variables d'environnement du projet. Vous pouvez le faire dans votre Dashaboard NetLify (paramètres du site / Build & Deploy / Environment / Environment Variables).

bejamas_env-vars_short.mp4

[Alt: Video Procédure pas à pas de l'édition Env Vars]

Si la définition d'une variable d'environnement n'est pas votre tasse de thé, les valeurs par défaut peuvent être modifiées dans utils/global-data.js . Vous pouvez également supprimer les variables et les informations de blog de code dur où ces variables sont utilisées dans la base de code.

• BLOG_THEME, BLOG_FONT_HEADINGS, & BLOG_FONT_PARAGRAPHS sont utilisés dans tailwind-preset.js
• BLOG_NAME, BLOG_TITLE, BLOG_FOOTER_TEXT sont utilisés dans pages/index.js & pages/posts/[slug].js via l'objet globalData .

Ajout de nouveaux messages

Tous les messages sont stockés dans le répertoire /posts . Pour faire un nouveau message, créez un nouveau fichier avec l'extension .mdx .

Étant donné que les articles sont écrits au format MDX , vous pouvez transmettre des accessoires et des composants. Cela signifie que vous pouvez utiliser les composants React à l'intérieur de vos messages pour les rendre plus interactifs. En savoir plus sur la façon de le faire dans les documents MDX sur le contenu.

NextJs-Bejamas-Blog_New-Post.mp4

[ALT: Video Procédure pas à pas de l'ajout d'un nouvel article de blog]

Éditeur visuel netlify

Ce modèle est configuré pour fonctionner avec l'édition visuelle et la source de contenu GIT.

Développez avec Netlify Visual Editor localement

Le processus de développement typique est de commencer par travailler localement. Clone ce référentiel, puis exécutez npm install dans son répertoire racine.

Exécutez le serveur de développement suivant.

cd nextjs-blog-theme
npm run dev

Installez le NetLify Visual Editor CLI. Ouvrez ensuite une nouvelle fenêtre de terminal dans le même répertoire de projet et exécutez le serveur de développement Visual Editor Netlify:

npm install -g @stackbit/cli
stackbit dev

Cela stimule votre propre URL de l'éditeur visuel Netlify. Ouvrez ceci, inscrivez-vous ou connectez-vous, et vous serez dirigé vers l'éditeur visuel de Netlify pour votre nouveau projet.

Étapes suivantes

Voici quelques suggestions sur ce qu'il faut faire ensuite si vous êtes nouveau dans Netlify Visual Editor:

• Apprenez Netlify Visual Editor Aperçu
• Vérifiez la documentation de référence de l'éditeur visuel NetLify

Essai

Test par défaut inclus

Nous avons inclus des outils qui nous aident à maintenir ces modèles. Ce modèle utilise actuellement:

• Rénover - pour mettre à jour régulièrement nos dépendances

Si votre équipe n'est pas intéressée par cet outillage, vous pouvez les supprimer facilement!

Élimination de la rénovation

Afin de maintenir notre projet à jour avec les dépendances, nous utilisons un outil appelé Renovate. Si vous n'êtes pas intéressé par cet outil, supprimez le fichier renovate.json et engagez-le sur votre branche principale.

Soutien

Si vous êtes coincé en cours de route, obtenez l'aide de nos forums de support.