tailwind nextjs starter blog

Blog de démarrage de NEXTJS

Ceci est un modèle de démarrage de blogging Next.js, Tailwind CSS. La version 2 est basée sur le prochain répertoire App avec React Server Component et utilise ContentLayer pour gérer le contenu Markdown.

Probablement le modèle de blogging Markdown le plus riche en fonctionnalités. Facilement configurable et personnalisable. Parfait en remplacement des blogs individuels Jekyll et Hugo existants.

Consultez la documentation ci-dessous pour commencer.

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

Demande de fonctionnalité? Vérifiez les discussions passées pour voir si elle a été évoquée précédemment. Sinon, n'hésitez pas à démarrer un nouveau fil de discussion. Toutes les idées sont les bienvenues!

Variations

Remarque : Ce sont des fourches contribuées à la communauté en utilisant différents cadres ou avec des modifications importantes de la base de code - pas officiellement soutenues.

Astro Alternative - Template Astro de vent arrière.

Alternative de remix - modèle de blog de démarrage de remix de vent arrière.

Prise en charge de l'internationalisation - Modèle avec i18n et code source.

Exemples V2

• Blog de démonstration - ce repo
• Mon blog personnel - modifié pour générer automatiquement les articles de blog avec des dates
• Blog de Karhdo - Blog de Karhdo - Adventure de codage de Karhdo (code source)
• BLOG BEN.CODES - BLOG PERSONNEL DE BENOIT sur le développement de logiciels (code source)
• Blog TSIX - Un ingénieur frontal est utilisé pour enregistrer certains points de connaissances dans le travail et l'étude中文
• Blog de Soto - Un site Web personnel plus personnalisé mis à niveau à partir de la V1 (code source)
• Blog de Prabhu - Site Web personnel de Prabhu avec blog (code source)
• Blog de Rabby Hasan - Le blog personnel de Rabby Hasan sur le développement complet de la pile avec le cloud (code source)
• Enscribe.dev - Blog personnel d'Enscribe; Shenanigans de cybersécurité, Frontend Webdev, etc. (code source)
• Dalelarroder.com - Le site Web personnel de Dale Larroder a mis à niveau à partir de la V1 (code source)
• thetalhatahir.com - Blog personnel de Talha Tahir. Ajout de vignettes d'article, carte LinkedIn, beau contenu de héros, émoticônes technologiques.
• homing.so - Blog personnel de Homing sur les choses qu'il apprend (code source)
• Blog de ZS1M - Blog personnel de ZS1M pour enregistrer et partager le contenu technique de l'apprentissage quotidien (code source)
• Dariuszwozniak.net - Blog de développement de logiciels (code source)
• Dreams.Plus - Blog Site pour quelques réflexions et enregistrements pour la vie et la technologie.
• Blog Francisaguilar.co - Le blog personnel de Francis Aguilar qui parle de technologie, de fitness et de développement personnel.
• Min71 Dev Blog - Blog personnel sur la blockchain, le développement et etc. (code source)
• Blog de Bryce Yu - Blog personnel de Bryce Yu sur le système distribué, la base de données et le développement Web. (code source)
• Démarrage distant Senpai Anime Series Site Web - Page de destination pour la série Anime Startup Remote Senpai.
• Secret Base - JAC HSU's Personal Blog. Talks sur la technologie, la pensée et la vie en général.
• Zsebinformatikus - The Information Superhighway Guide Blog.
• Le blog d'Anton Morgunov - parler de la science sans simplifications à l'extérieur ou pourquoi la chimie théorique et informatique est cool.
• Blog Hans - Blog personnel de Hans, technologie frontale, galerie et journal de voyage 中文. (code source)
• Portfolio de Cub3y0nd - Remarques de l'étude de la cybersécurité de Cub3y0ND 「中文」
• London Tech Talk - un podcast explorant les tendances technologiques et expatrié les expériences de vie. - 日本語
• Crud Flow Blog - Un blog technique sur l'IA, l'ingénierie du cloud, la science des données et le développement personnel
• Blog de Trillium - Modifié pour rendre la page de CV PDF ON /resume . (code source)
• Blog technologique de Frank - Blog personnel de Frank sur le développement et la technologie des logiciels. (code source)
• Blog de Wujie: 旅行者计划 - Le jardin numérique personnel de Wujie (code source)
• Le blog de Xiaodong - le blog personnel de Xiaodong sur la technologie frontale et la vie. 「中文」 (code source)
• Azurtelier.com - Site Web personnel d'Amos pour la technologie, la musique, les illustrations d'IA, etc. [anglais / 中文] (code source)
• Joshhaines.com - Site Web personnel pour Josh Haines. (code source)
• • Blog de Jigu - Blog personnel de Jigu sur la technologie, la crypto, le golang et la vie. 「中文」
• Andrewsam.xyz - Site Web personnel d'Andrew utilisant Shadcn, Prisma, MongoDB, Auth.js, Page de CV, Chronologie de l'expérience personnalisée et composants des technologies. (code source)
• Portfolio de Rulli Damara Putra - Blog personnel et portefeuille de Rully.
• blog.taoluyuan.com 套路猿 - Un blog technologique personnel qui prend en charge la commutation multi-thème. 「中英」
• LyricsdeCode.com - Un site Web de paroles de chansons offrant des paroles originales, une romanisation et des traductions en anglais avec des options de visualisation personnalisables.
• Bmacharia.com - Blog technique de Benson Macharia sur la cybersécurité et la gestion des risques informatiques.
• Armujahid.me - Blog personnel d'Abdul Rauf sur la technologie et les trucs aléatoires.
• LeoHuynh.dev - ?? Le blog de Dev de Leo - histoires, idées et idées. Ajouter /snippets , /books pages, ajouter ProfileCard , les composants CareerTimeline et bien d'autres.
• OpenSats Blog - A 501 (c) (3) Carité publique qui vise à financer durablement des projets gratuits et open-source. (code source)
• Blog des programmes - Conseils de planification des médias sociaux, stratégies et mises à jour de produits pour les créateurs de contenu. (Lien du projet)
• Blog Yawdev - Développement d'agence informatique / logiciel. Blog sur la technologie et les affaires (Link Project)
• Notes d'ingénierie - Jonas Vetterle Personal Site Web & Blog. J'écris des articles sur l'ingénierie logicielle qui m'intéresse, y compris l'IA et l'informatique quantique
• Screenager.dev - Site Web personnel en tant que portfolio et blog. Documenter mon parcours d'apprentissage et quelques guides.
• Blog de Kezhenxu94 - Bloguer sur le développement, les conseils et les astuces, les tutoriels et plus encore.

En utilisant le modèle? N'hésitez pas à créer un RP et à ajouter votre blog à cette liste.

Exemples V1

v1-blogs-showcase.webm

Merci à la communauté d'utilisateurs et aux contributeurs du modèle! Nous n'acceptons plus les nouvelles listes de blogs ici. Si vous avez mis à jour de la version 1 à la version 2, n'hésitez pas à supprimer votre blog de cette liste et à l'ajouter à celui ci-dessus.

• Le livre de cuisine d'Aoisdg - avec des photos et des recettes!
• La démo de Gautierarcin avec la traduire suivant - inclut la traduction des publications MDX, le code source
• Le jardin numérique de David Levai - conception personnalisée et abonnements par e-mail ajoutés
• THVU.DEV - Ajout de mdx-embed , View Count, Reading Minutes et plus.
• Irvin.dev - Site personnel d'Irvin Lin. Ajout de l'intégration YouTube.
• Kirilso.com - Blog personnel et site Web.
• LingelySharpe.com - Blog principal de Tincre
• blog.b00st.com - Blog principal de promotion de la musique de B00st.com
• Astrosaurus.me - Blog personnel d'Ephraim Atta-Duncan
• Dhanrajsp.me - site et blog personnel de Dhanraj.
• blog.r00ks.io - Blog personnel d'Austin Rooks (code source).
• Honghong.me - site Web personnel de Tszhong (code source)
• Marcelofomentao.dev - Marcelo Formentão Site personnel (code source).
• abiraja.com - avec un composant d'extrait de code JS Runnable!
• bpiggin.com - blog personnel de Ben Piggin
• Maqib.cn - Un blog de développeurs frontaux chinois 狂奔小马的博客 (源码)
• Ambilena.com - Blog de musique électronique et empreinte pour les prochains musiciens.
• 0xchai.io - Blog personnel de Chai
• TechipEdia - Application Web progressive blogging simple avec bouton d'installation personnalisé et barre de progression supérieure
• Reubence.com - Jardin numérique de Reuben Rapose
• axolo.co/blog - Mises à jour des nouvelles de la gestion de l'ingénierie et d'Axolo.co (avec aperçu de l'image pour l'article dans la page d'accueil)
• Musing.vercel.app - Blog personnel de Parth Desai (code source)
• Onyourmental.com - Site Web de Curtis Warcup pour le podcast mental (code source)
• cwarcup.com - Site Web et blog personnel de Curtis Warcup (code source).
• ondiek-elijah.me - site Web et blog d'Ondiek Elijah (code source).
• Jmalvarez.dev - José Miguel Álvarez Blog personnel (code source)
• Justingosses.com - Site Web et blog personnel de Justin Gosse (code source)
• https://bitoflearning-9a57.fly.dev/ - Blog personnel de Sangeet Agarwal, Remplated pour remixer à l'aide de la pile indépendante (code source)
• Raphaelchelly.com - Le site Web et le blog personnel de Raphaël Chelly (code source)
• KAVEH.Page - Blog personnel de Kaveh Tehrani. Ajout du répertoire des balises, carte de profil, délai de lecture sur le répertoire des poteaux, etc.
• Drakerossman.com - Le blog de Drake Rossman sur Nixos, Rust, Architecture logicielle et gestion de l'ingénierie, ainsi que les réflexions générales.
• MEAMENU.com - Page de destination et blog de produit à partir de ce modèle. Il utilise également le Framer-Motion pour les animations, les modèles de mise en page personnalisés, Waline pour les commentaires de blog et les formulaires PrimereAct [ITA]
• giovanni.orciuolo.it - Site Web personnel, blog et tout le nerd de Giovanni Orciuolo, blog et tout.

Motivation

Je voulais porter mon blog existant vers NextJS et Tailwind CSS, mais il n'y avait pas de modèle de boîte facile à utiliser, j'ai donc décidé d'en créer un. Le design est adapté du blog TailwindLabs.

Je voulais que ce soit presque aussi riche en fonctionnalités que les modèles de blogs populaires comme Beautiful-Jekyll et Hugo Academic, mais avec le meilleur de l'écosystème de React et les meilleures pratiques actuelles du développement Web.

Caractéristiques

• Next.js avec dactylographie
• Contentlayer pour gérer la logique de contenu
• Personnalisation de style facile avec Tailwind 3.0 et attribut de couleur primaire
• MDX - Écrivez JSX dans les documents de Markdown!
• Score de phare presque parfait - Rapport du phare
• Léger, 85KB First Load JS
• Vue adaptée aux mobiles
• Thème clair et sombre
• Optimisation des polices avec suivant / police
• Intégration avec Pline qui fournit:
  • Plusieurs options d'analyse, notamment Umami, Plausible, Analytics Simple, Posthog et Google Analytics
  • Commentaires via le giscus, les énoncés ou les disquus
  • API et composant de newsletter avec prise en charge de MailChimp, Buttondown, Convertkit, Klaviyo, Revue, Emailoctopus et Beehiiv
  • Recherche de palette de commande avec Kbar ou Algolie
• Syntaxe côté serveur en surbrillance avec les numéros de ligne et la mise en évidence de la ligne via le regroupement de réchauffe-plus
• Affichage mathématique pris en charge via Katex
• Support de citation et de bibliographie via la cutation de réhype
• Github alerte via Remark-github-blockquote-alert
• Optimisation automatique de l'image via Suivant / Image
• Prise en charge des balises - Chaque balise unique sera sa propre page
• Prise en charge de plusieurs auteurs
• 3 dispositions de blog différentes
• 2 dispositions de listes de blog différentes
• Prise en charge du routage imbriqué des articles de blog
• Page des projets
• En-têtes de sécurité préconfigurés
• Séo amical avec flux RSS, site et plus encore!

Exemples de postes

• Un guide de démarche
• En savoir plus sur les images dans Next.js
• Une visite des mathématiques
• Grille d'image MDX simple
• Exemple de longue prose
• Exemple de poste d'itinéraire imbriqué

Guide de démarrage rapide

1. Cloner le repo

npx degit ' timlrx/tailwind-nextjs-starter-blog '

2. Personnaliser siteMetadata.js (informations liées au site)
3. Modifiez la politique de sécurité du contenu dans next.config.js si vous souhaitez utiliser un autre fournisseur d'analyse ou une solution de commentaire autre que Giscus.
4. Personnaliser authors/default.md (auteur principal)
5. Modifier projectsData.ts
6. Modifiez headerNavLinks.ts pour personnaliser les liens de navigation
7. Ajouter des articles de blog
8. Déployer sur Vercel

Installation

yarn

Veuillez noter que si vous utilisez Windows, vous devrez peut-être exécuter:

 $env :PWD = $( Get-Location ) .Path

Développement

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

yarn dev

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

Modifiez la mise en page dans app ou le contenu dans data . Avec le rechargement en direct, les pages indiquent automatiquement les annonces lorsque vous les modifiez.

Étendre / personnaliser

data/siteMetadata.js - contient la plupart des informations liées au site qui doivent être modifiées pour les besoins d'un utilisateur.

data/authors/default.md - Informations sur l'auteur par défaut (requises). 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 de style 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 - Store des actifs tels que les images et les favicons.

tailwind.config.js et css/tailwind.css - Configuration et feuille de styles de tailwind qui peuvent être modifiés pour modifier l'apparence et la convivialité globales 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 les thèmes de prisme.

contentlayer.config.ts - Configuration pour ContentAyer, y compris la définition des sources de contenu et des plugins MDX utilisés. Voir la documentation Contentlayer pour plus d'informations.

components/MDXComponents.js - Passez votre propre code JSX ou React Composant en le spécifiant ici. Vous pouvez ensuite les utiliser directement dans le fichier .mdx ou .md . Par défaut, un lien personnalisé, le composant next/image , le composant de la table des matières et le formulaire de newsletter sont transmis. Notez que les composants doivent être exportés par défaut pour éviter les problèmes existants avec next.js.

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

• Il y a actuellement 3 dispositions de postes disponibles: PostLayout , PostSimple et PostBanner . PostLayout est la mise en page par défaut de 2 colonnes avec des informations méta-et d'auteur. PostSimple est une version simplifiée de PostLayout , tandis que PostBanner propose une image de bannière.
• Il y a 2 dispositions de liste de blogs: ListLayout , la mise en page utilisée dans la version 1 du modèle avec une barre de recherche et ListLayoutWithTags , actuellement utilisée dans la version 2, qui omet la barre de recherche mais comprend une barre latérale avec des informations sur les balises.

app - Pages vers le chemin vers. Lisez la documentation Next.js pour plus d'informations.

next.config.js - Configuration liée à next.js. Vous devez adapter la stratégie de sécurité du contenu si vous souhaitez charger des scripts, des images, etc. à partir d'autres domaines.

Poste

Le contenu est modélisé à l'aide de Contentlayer, qui vous permet de définir votre propre schéma de contenu et de l'utiliser pour générer des objets de contenu typés. Voir la documentation Contentlayer pour plus d'informations.

Masse

Frontmatter suit les normes d'Hugo.

Veuillez vous référer à contentlayer.config.ts pour une liste à jour des champs pris en charge. Les champs suivants sont pris en charge:

 title (required)
date (required)
tags (optional)
lastmod (optional)
draft (optional)
summary (optional)
images (optional)
authors (optional list which should correspond to the file names in `data/authors`. Uses `default` if none is specified)
layout (optional list which should correspond to the file names in `data/layouts`)
canonicalUrl (optional, canonical url for the post for SEO)

Voici un exemple de la front de la poste:

 ---
title: 'Introducing Tailwind Nexjs Starter Blog'
date: '2021-01-12'
lastmod: '2021-01-18'
tags: ['next-js', 'tailwind', 'guide']
draft: false
summary: 'Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.'
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
---

Déployer

Pages github

Un flux de travail pages.yml est déjà fourni. Sélectionnez simplement "GitHub Actions" dans: Settings > Pages > Build and deployment > Source .

Vercel

Le moyen le plus simple de déployer le modèle est de déployer sur Vercel. Consultez la documentation de déploiement suivant.js pour plus de détails.

Gré

Les configurations d'exécution Next.js de NetLify Active la fonctionnalité KEY NEXT.JS sur votre site Web sans avoir besoin de configurations supplémentaires. Netlify génère des fonctions sans serveur qui géreront les fonctionnalités Next.js telles que les pages de rendu (SSR) côté serveur, la régénération statique incrémentale (ISR), next/images , etc.

Voir Next.js sur Netlify pour les valeurs de configuration suggérées et plus de détails.

Services d'hébergement statiques (pages GitHub / S3 / Firebase, etc.)

Courir:

$ EXPORT=1 UNOPTIMIZED=1 yarn build

Ensuite, déployez le out généré ou exécutez npx serve out localement.

Important

Si le déploiement avec un chemin de base d'URL, comme https://example.org/myblog, vous avez besoin d'un Shell-Var BASE_PATH supplémentaire sur la commande Build:

$ EXPORT=1 UNOPTIMIZED=1 BASE_PATH=/myblog yarn build

=> Dans votre code, ${process.env.BASE_PATH || ''}/robots.txt Imprimera "/myblog/robots.txt" dans la version out (ou seulement /robots.txt si yarn dev , c'est-à-dire: sur localhost: 3000)

Conseil

Alternativement à UNOPTIMIZED=1 , pour continuer à utiliser next/image , vous pouvez utiliser un autre fournisseur d'optimisation d'image tel que IMGIX, Cloudinary ou Akamai. Voir la documentation d'optimisation de l'image pour plus de détails.

Envisagez de supprimer les fonctionnalités suivantes qui ne peuvent pas être utilisées dans une construction statique:

1. Commentez headers() de next.config.js .
2. Supprimez le dossier et les composants api qui appellent la fonction côté serveur tel que le composant de newsletter. Pas techniquement requis et le site sera construit avec succès, mais les API ne peuvent pas être utilisées car ce sont des fonctions côté serveur.

Questions fréquemment posées

• Comment puis-je ajouter un composant MDX personnalisé?
• Comment puis-je personnaliser la recherche kbar ?
• Déployer avec Docker

Soutien

En utilisant le modèle? Soutenez cet effort en donnant une star sur Github, en partageant votre propre blog et en donnant un cri sur Twitter ou en devenant un sponsor de projet.

Licence

MIT © Timothy Lin