Blog Starter Tailwind Nextjs

](https://vercel.com/new/git/external?repository-url=https://github.com/timlrx/tailwind- nextjs-starter-blog)

Il s'agit d'un modèle de démarrage de blog Next.js, Tailwind CSS. Probablement le modèle de blog Markdown Next.js le plus riche en fonctionnalités. Sorti de la boîte, configuré avec les dernières technologies pour faciliter la rédaction technique. Facilement configurable et personnalisable. Parfait pour remplacer les blogs individuels Jekyll et Hugo existants.

Consultez la documentation ci-dessous pour commencer.

Vous faites face à des problèmes ? Consultez la page FAQ et effectuez une recherche sur les problèmes passés. N'hésitez pas à ouvrir un nouveau numéro si aucun n'a été publié précédemment.

Demande de fonctionnalité? Vérifiez les discussions passées pour voir si elles ont déjà été évoquées. Sinon, n'hésitez pas à créer un nouveau fil de discussion. Toutes les idées sont les bienvenues !

Exemples

Blog de démonstration - ce dépôt
Mon blog personnel - modifié pour générer automatiquement des articles de blog avec des dates
Le livre de recettes d'Aloisdg - avec photos et recettes !
Démo de GautierArcin avec traduction suivante - inclut la traduction des articles mdx, [code source](https://github.com/GautierArcin/ tailwind-nextjs-starter-blog/tree/demo/next-translate)
Jardin numérique de David Levai - conception personnalisée et abonnements par courrier électronique ajoutés
Thinh's Corner - mise en page personnalisée avec table des matières "sticky"

Vous utilisez le modèle? N'hésitez pas à créer un PR et à ajouter votre blog à cette liste.

Motivation

Je voulais porter mon blog existant sur Nextjs et Tailwind CSS, mais il n'y avait pas de modèle prêt à l'emploi facile à utiliser, j'ai donc décidé d'en créer un. La conception est adaptée du blog Tailwindlabs.

Je voulais qu'il soit presque aussi riche en fonctionnalités que les modèles de blogs populaires comme beautiful-jekyll et [Hugo Academic](https://github.com/wowchemy /wowchemy-hugo-modules) mais avec le meilleur de l'écosystème React et les meilleures pratiques actuelles de développement Web.

Fonctionnalités

Personnalisation facile du style avec Tailwind 3.0 et attribut de couleur primaire
Score lighthouse presque parfait - Rapport lighthouse
JS léger de 45 Ko au premier chargement, utilise Preact dans la version de production
Vue adaptée aux mobiles
Thème clair et sombre
Police auto-hébergée avec Fontsource
Prend en charge plausible, simple Analytics et Google Analytics
MDX - écrivez JSX dans les documents markdown!
Mise en évidence de la syntaxe côté serveur avec numéros de ligne et mise en évidence des lignes via rehype-prism-plus
Affichage mathématique pris en charge via KaTeX
Prise en charge des citations et de la bibliographie via rehype-citation
Optimisation automatique de l'image via next/image
Récupération de données flexible avec mdx-bundler
Prise en charge des balises - chaque balise unique sera sa propre page
Prise en charge de plusieurs auteurs
Modèles de blogs
Composant TOC
Prise en charge du routage imbriqué des articles de blog
Composant newsletter avec prise en charge de mailchimp, buttondown et convertkit
Prend en charge giscus, utterances ou disqus
Page des projets
En-têtes de sécurité préconfigurés
Optimisé pour le référencement avec flux RSS, plans de site et plus encore!

Exemples d'articles

Guide de démarrage rapide

JS (support officiel) - npx degit https://github.com/timlrx/tailwind-nextjs-starter-blog.git ou TS (support communautaire) - npx degit timlrx/tailwind-nextjs-starter-blog #typescript
Personnalisez siteMetadata.js (informations relatives au site)
Modifiez la politique de sécurité du contenu dans next.config.js si vous souhaitez utiliser tout fournisseur d'analyse ou une solution de commentaires autre que giscus.
Personnalisez authors/default.md (auteur principal)
Modifiez projectsData.js
Modifiez headerNavLinks.js pour personnaliser les liens de navigation
Ajoutez des articles de blog
Déployez sur Vercel

Développement

Tout d'abord, exécutez le serveur de développement:

npm start
# or
npm run dev

Ouvrez http://localhost:3000 avec votre navigateur pour voir le résultat.

Vous pouvez commencer à éditer la page en modifiant pages/index.js. La page se met à jour automatiquement au fur et à mesure que vous modifiez le fichier.

Étendre / Personnaliser

data/siteMetadata.js - contient la plupart des informations relatives au site qui doivent être modifiées selon les besoins de l'utilisateur.

data/authors/default.md - informations sur l'auteur par défaut (obligatoire). Des auteurs supplémentaires peuvent être ajoutés sous forme de fichiers dans « data/authors ».

data/projectsData.js - données utilisées pour générer une carte stylisée sur la page des projets.

data/headerNavLinks.js - liens de navigation.

data/logo.svg - remplacez par votre propre logo.

data/blog - remplacez par vos propres articles de blog.

public/static - stocke des actifs tels que des images et des favicons.

tailwind.config.js et css/tailwind.css - contiennent la feuille de style tailwind qui peut être modifiée pour changer l'apparence générale du site.

css/prism.css - contrôle les styles associés aux blocs de code. N'hésitez pas à le personnaliser et à utiliser votre thème prismjs préféré, par exemple. thèmes prisme.

components/social-icons - pour ajouter d'autres icônes, copiez simplement un fichier svg à partir de Simple Icons et mappez-les dans index.js. D'autres icônes utilisent heroicons.

components/MDXComponents.js - transmettez votre propre code JSX ou composant React en le spécifiant ici. Vous pouvez ensuite les appeler directement dans le fichier .mdx ou .md. Par défaut, un composant de lien et d'image personnalisé est transmis.

layouts - principaux modèles utilisés dans les pages.

pages - pages vers lesquelles acheminer. Lisez la documentation Next.js pour plus d'informations.

next.config.js - configuration liée à Next.js. Vous devez adapter la politique de sécurité du contenu si vous souhaitez charger des scripts, des images, etc. depuis d'autres domaines.

Article

Frontmatter

Frontmatter suit les normes d'Hugo.

Actuellement, 10 champs sont pris en charge.

title (requis)
date (requis)
tags (requis, peut être un tableau vide)
lastmod (optionnel)
draft (optionnel)
summary (optionnel)
images (optionnel, si aucun n'est fourni les valeurs par défaut sur socialBanner dans la configuration de siteMetadata)
authors (optionnel, liste qui doit correspondre aux noms de fichiers dans `data/authors`. Utilise « par défaut » si aucun n'est spécifié)
layout (optionnel, liste qui doit correspondre aux noms de fichiers dans `data/layouts`)
canonicalUrl (optionnel, URL canonique pour la publication pour le référencement)

Voici un exemple d'article frontmatter:

---
title: 'Présentation du Blog Starter Tailwind Nextjs'
date: '2021-01-12'
lastmod: '2021-01-18'
tags: ['next-js', 'tailwind', 'guide']
draft: false
summary: 'Vous recherchez un modèle performant et prêt à l'emploi, doté de tout le meilleur de la technologie Web pour répondre à vos besoins en matière de blogs? Consultez le modèle de Blog Starter Tailwind Nextjs.'
images: ['/static/images/canada/mountains.jpg', '/static/images/canada/toronto.jpg']
authors: ['default', 'sparrowhawk']
layout: PostLayout
canonicalUrl: https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog
---

Composer

Exécutez node ./scripts/compose.js pour démarrer une nouvelle publication.

Suivez l'invite interactive pour générer un article avec des éléments préliminaires pré-remplis.

Déployer

Vercel Le moyen le plus simple de déployer le modèle est d'utiliser la Plateforme Vercel des créateurs de Next.js. Consultez la documentation de déploiement Next.js pour plus de détails.

Netlify / Pages GitHub / Firebase, etc. Comme le modèle utilise «next/image» pour l'optimisation des images, des configurations supplémentaires doivent être effectuées pour le déploiement sur d'autres sites Web d'hébergement statiques populaires comme Netlify ou [GitHub Pages](https ://pages.github.com/). Un autre fournisseur d'optimisation d'image tel que Imgix, Cloudinary ou Akamai doit être utilisé. Vous pouvez également remplacer le composant next/image par une balise <img> standard. Voir la documentation next/image pour plus de détails.

Les routes API utilisées dans le composant newsletter ne peuvent pas être utilisées dans un export de site statique. Vous devrez utiliser un fournisseur de point de terminaison d'API de formulaire et remplacer l'itinéraire dans le composant newsletter en conséquence. D'autres plateformes d'hébergement telles que Netlify proposent également des solutions alternatives - veuillez vous référer à leur documentation pour plus d'informations.

Soutien

Vous utilisez le modèle? Soutenez cet effort en attribuant une étoile sur GitHub, en partageant votre propre blog et en criant sur Twitter ou en devenant un [sponsor] du projet (https://github.com/sponsors/timlrx).

Présentation du Blog Starter Tailwind Nextjs

Series: Blog Starter