digital garden
v0.7.2
Plus de captures d'écran ici
Un modèle de blogging (jardinage numérique) open source pour les développeurs à l'aide du routeur d'application Next.js, du MDX, du contenulayer, de la Tailwind CSS, de @ shadcn / ui, des icônes Lucide, et plus encore.
Si vous aimez ce modèle et / ou utilisez-le, veuillez lui donner une étoile sur GitHub. Cela aidera plus de gens à le découvrir, aident ainsi à améliorer le modèle.
Remarque: Ce projet évolue toujours et il est loin d'être parfait ou même terminé. Je suis toujours ouvert aux suggestions et aux contributions. N'hésitez pas à ouvrir un problème ou un RP si vous avez des idées ou des suggestions. Vous pouvez également voir la feuille de route pour les fonctionnalités planifiées si vous souhaitez contribuer.
En tant que développeur qui crée du contenu, je veux avoir un blog et un jardin numérique où je peux partager mes pensées et mes idées avec le monde. Maintenant, il n'y a pas vraiment de "solution parfaite" pour cela actuellement. Avec des analyses incluses, un référencement, des abonnements par e-mail, des outils modernes, une conception simple, etc. Nous devons en créer un à partir de zéro, utiliser un modèle de conception et coder les fonctionnalités, soit utiliser un outil CMS / sans code.
J'ai donc décidé de créer une solution que j'utiliserais moi-même. C'est le résultat.
Si vous voulez voir comment j'ai mis en place ce modèle pour mon propre jardin numérique, vous pouvez consulter cette validation avec toutes les modifications.
pnpm installutils/metadata.ts avec vos informations et paramètres générauxutils/uses-data.ts avec des logiciels et du matériel que vous utilisezutils/projects-data.ts avec vos projetsutils/navigation-links.ts avec les liens que vous souhaitez dans la navigationcontent/pages/now avec votre disponibilitécontent/pages/about avec votre biographiepnpm devOuvrez http: // localhost: 3000 dans votre navigateur pour voir le résultat.
Vous pouvez écrire du contenu dans Markdown ou MDX. Le contenu est situé dans content/ et est organisé dans des dossiers. Le dossier pages contient les pages. Le dossier posts contient les blogs. Le dossier projects contient les projets.
Les pages de liste d'édition se font dans le dossier lib .
/uses - lib/uses-data.ts/projects - lib/projects-data.ts/social - lib/social-data.ts Frontmatter est utilisé pour définir les métadonnées pour les pages et les poteaux. Il est situé en haut du fichier et est écrit en YAML. Vous pouvez définir les champs suivants:
title - le titre de la page / postdescription - La description de la page / postpublishedDate - La date de la publication (non utilisée sur les pages)lastUpdatedDate - La date de la page / Posttags - Liste des balises pour le message. Vous pouvez ajouter de nouvelles balises en les ajoutant à la liste tagOptions . (non utilisé sur les pages)series - La série du post. Une série a un titre et un numéro de commande pour un message. (non utilisé sur les pages)author - L'auteur du Post. Un auteur a un nom et une image. (non utilisé sur les pages)status - Que la page / la publication soit publiée ou le projetVous pouvez déployer le projet avec Vercel ou tout autre fournisseur d'hébergement. Si vous souhaitez utiliser Vercel, vous pouvez utiliser le bouton en haut de cette lecture.
package.jsonNEXT_PUBLIC_BASE_URL sur Vercel pour pointer de l'URL racine de votre site Web Ce projet utilise Inter comme police par défaut. Vous pouvez le modifier sur app/layout.tsx à l'aide du package next/fonts .
Le projet utilise des couleurs Tailwind et @ shadcn / ui Config. Personnalisez les couleurs sur globals.css .
Il y a un composant signature à utiliser dans le pied de page. Vous pouvez modifier la signature sur components/signature.tsx . J'ai utilisé Figma pour écrire la signature avec une police Caveat et je l'ai exportée sous forme de SVG. Vous pouvez faire de même et mettre à jour le SVG dans le composant.
Les images et autres fichiers multimédias sont situés dans public/ répertoire. Vous pouvez les utiliser dans votre contenu en utilisant le chemin /<filename>.<ext> Chemin.
Voici un tutoriel rapide sur la façon de faire un avatar similaire dans FIGMA en moins de 2 minutes. https://youtu.be/ny-vaeehjkm
Vous pouvez modifier les métadonnées et les détails de l'auteur dans utils/metadata.ts . Cela sera utilisé autour du site pour les titres, les liens sociaux, les poignées sociales, le référencement, etc.
Vous pouvez modifier les liens de navigation dans lib/navigation-links.ts .
Vous pouvez modifier les liens sociaux dans lib/social-data.ts . Vous pouvez également ajouter de nouveaux liens sociaux en les ajoutant au fichier et en utilisant le nom de la plate-forme comme clé et URL comme valeur. Le composant SocialButton ajoutera automatiquement l'icône de la plate-forme s'il est pris en charge dans des icônes simples.
Pour configurer, vous devez l'activer sur le tableau de bord du projet Vercel en sélectionnant votre projet, puis cliquez sur l'onglet Analytique et cliquez sur Activer dans la boîte de dialogue.
Umami est une solution d'analyse Web simple et facile à utiliser avec une option d'auto-hébergement! Vous pouvez en savoir plus sur le site Web d'Umami. (Astuce: sur le chemin de fer, vous pouvez l'héberger à faible coût ou même gratuit) .
Configurer: Définissez NEXT_PUBLIC_UMAMI_SCRIPT_URL & NEXT_PUBLIC_UMAMI_WEBSITE_ID Variables d'environnement sur votre fichier .env.local et sur le tableau de bord Vercel.
Plausible est une alternative ouverte simple et légère à Google Analytics. Vous pouvez en savoir plus à ce sujet sur le site Web plausible.
Configurer: Définissez NEXT_PUBLIC_PLAUSIBLE_DOMAIN & NEXT_PUBLIC_PLAUSIBLE_SCRIPT_URL Variables d'environnement sur votre fichier .env.local et sur le tableau de bord Vercel. Si vous êtes préoccupé par les bloqueurs d'annonces, vous pouvez procurer le script plausible via votre propre domaine. Vous pouvez en savoir plus ici.
Google Analytics est un service d'analyse Web offert par Google qui suit et rapporte le trafic de site Web, actuellement en tant que plate-forme dans la marque Google Marketing Platform. Vous pouvez en savoir plus sur le site Web de Google Analytics.
Configurer: Définissez NEXT_PUBLIC_GOOGLE_ANALYTICS_ID Environment Variable sur votre fichier .env.local et sur le tableau de bord Vercel.
Il est en cours de soutien à d'autres fournisseurs d'analyses. N'hésitez pas à ouvrir un problème si vous avez des suggestions ou un PR si vous souhaitez la mettre en œuvre vous-même.
Mailerlite est un simple outil de marketing par e-mail pour tous les types d'entreprises. Vous pouvez en savoir plus à ce sujet sur le site Web de Mailerlite.
Configurer: Définissez EMAIL_API_BASE , EMAIL_API_KEY et EMAIL_GROUP_ID Variables d'environnement sur votre fichier .env.local et sur le tableau de bord Vercel.
Soutenir les autres prestataires de newsletter sont en cours. N'hésitez pas à ouvrir un problème si vous avez des suggestions ou un PR si vous souhaitez la mettre en œuvre vous-même.
Vous pouvez choisir entre 3 variantes de héros différentes à utiliser dans app/(site)/page.tsx en modifiant le composant héros importé.
HeroSimple - Une section de héros centrée simple avec image, titre et sous-titre.HeroVideo - Section de héros de 2 colonnes avec Videoask intégrée d'un côté et titre et sous-titre de l'autre.HeroImage - Section de héros de 2 colonnes avec image d'un côté et titre, et sous-titre de l'autre.HeroMinimal - Nom et titre de la section des héros et titre Je recommande d'optimiser les images rapidement gratuitement avec ImageOptim. Installez sur votre Mac, puis ouvrez le dossier public dans Finder. Sélectionnez toutes les images, cliquez avec le bouton droit et choisissez "Ouvrir avec> ImageOptim". Cela optimisera toutes les images du dossier.
Remarque: N'en faites pas trop. Vous pouvez facilement rendre les images mauvaises avec des algorithmes de compression avec perte.
Créez un PR et ajoutez votre blog à cette liste si vous utilisez le modèle!
robots.txt & sitemap.xml Ce projet provient de développeurs pour les développeurs. Toutes les contributions sont les bienvenues! N'hésitez pas à:
develop .develop la branche.Toutes les contributions que vous faites relèveront de la licence logicielle du MIT. En bref, lorsque vous soumettez des modifications de code, vos soumissions sont supposées être sous la même licence MIT qui couvre le projet. Le code de conduite peut être trouvé ici.
Si vous aimez ce modèle et / ou utilisez-le, veuillez lui donner une étoile sur GitHub.
