digital garden
v0.7.2
Más capturas de pantalla aquí
Una plantilla de blogging de código abierto (jardinería digital) para desarrolladores que usan el enrutador de aplicaciones Next.js, MDX, ContentLayer, Tailwind CSS, @shadcn/ui, iconos de lucide y más.
Si amas esta plantilla y/o lo usas, dale una estrella en GitHub. Esto ayudará a más personas a descubrirlo, por lo que ayudará a mejorar la plantilla.
Nota: Este proyecto siempre está evolucionando y está lejos de ser perfecto o incluso hecho. Siempre estoy abierto a sugerencias y contribuciones. Siéntase libre de abrir un problema o un PR si tiene alguna idea o sugerencia. También puede ver la hoja de ruta para las características planificadas si desea contribuir.
Como desarrollador que crea contenido, quiero tener un blog y un jardín digital donde pueda compartir mis pensamientos e ideas con el mundo. Ahora, no hay realmente una "solución perfecta" para esto actualmente. Con analíticos incluidos, SEO, suscripciones de correo electrónico, herramientas modernas, diseño simple, etc. Tenemos que construir uno desde cero, usar una plantilla de diseño y codificar las características, o usar una herramienta CMS/No-Code.
Así que decidí construir una solución que me usaría. Este es el resultado.
Si desea ver cómo configuro esta plantilla para mi propio jardín digital, puede consultar esta confirmación con todos los cambios.
pnpm installutils/metadata.ts con su información y configuración generalutils/uses-data.ts con software y hardware que usautils/projects-data.ts con sus proyectosutils/navigation-links.ts con los enlaces que desea en la navegacióncontent/pages/now con su disponibilidadcontent/pages/about con su biografíapnpm devAbra http: // localhost: 3000 en su navegador para ver el resultado.
Puede escribir contenido en Markdown o MDX. El contenido se encuentra en content/ y está organizado en carpetas. La carpeta de pages contiene las páginas. La carpeta posts contiene los blogs. La carpeta projects contiene los proyectos.
Las páginas de la lista de edición se realizan en la carpeta lib .
/uses - lib/uses-data.ts/projects - lib/projects-data.ts/social - lib/social-data.ts Frontmatter se usa para definir metadatos para páginas y publicaciones. Está ubicado en la parte superior del archivo y está escrito en YAML. Puede definir los siguientes campos:
title : el título de la página/publicacióndescription - La descripción de la página/publicaciónpublishedDate - La fecha de la publicación (no se usa en páginas)lastUpdatedDate - la fecha de la página/publicacióntags : lista de etiquetas para la publicación. Puede agregar nuevas etiquetas agregándolas a la lista tagOptions . (no se usa en páginas)series : la serie de la publicación. Una serie tiene un título y un número de pedido para una publicación. (no se usa en páginas)author - El autor de The Post. Un autor tiene un nombre e imagen. (no se usa en páginas)status : si la página/publicación está publicada o borradoraPuede implementar el proyecto con Vercel o cualquier otro proveedor de alojamiento. Si desea usar VERCEL, puede usar el botón en la parte superior de este ReadMe.
package.json Información del autor de JSONNEXT_PUBLIC_BASE_URL en Vercel Este proyecto usa Inter como fuente predeterminada. Puede cambiarlo en app/layout.tsx usando el paquete next/fonts .
El proyecto utiliza colores de viento de cola y @shadcn/ui config. Personaliza los colores en globals.css .
Hay un componente de firma para usar en el pie de página. Puede editar la firma en components/signature.tsx . Utilicé Figma para escribir la firma con fuente de Caveat y la exporté como SVG. Puede hacer lo mismo y actualizar el SVG en el componente.
Las imágenes y otros archivos multimedia se encuentran en public/ directorio. Puede usarlos en su contenido utilizando la ruta /<filename>.<ext> .
Aquí hay un tutorial rápido sobre cómo hacer un avatar similar en Figma en menos de 2 minutos. https://youtu.be/ny-vaeehjkm
Puede cambiar los metadatos y los datos del autor en utils/metadata.ts . Esto se utilizará alrededor del sitio para títulos, enlaces sociales, mangos sociales, SEO, etc.
Puede editar enlaces de navegación en lib/navigation-links.ts .
Puede editar enlaces sociales en lib/social-data.ts . También puede agregar nuevos enlaces sociales agregándolos al archivo y usando el nombre de la plataforma como clave y la URL como valor. El componente SocialButton agregará automáticamente el icono para la plataforma si es compatible en Simple-Icons.
Para configurar, debe habilitarlo en el panel de proyecto Vercely seleccionando su proyecto y luego haga clic en la pestaña Análisis y haga clic en Habilitar el cuadro de diálogo.
¡Umami es una solución de análisis web simple y fácil de usar con opción de autohospedación! Puede leer más al respecto en el sitio web de Umami. (Sugerencia: en el ferrocarril, puede anotarlo de bajo costo o incluso gratis) .
Configurar: Establezca NEXT_PUBLIC_UMAMI_SCRIPT_URL & NEXT_PUBLIC_UMAMI_WEBSITE_ID Variables de entorno en su archivo .env.local y en el tablero de versel.
Plausible es una alternativa simple, liviana y de código abierto a Google Analytics. Puede leer más al respecto en el sitio web plausible.
Configurar: Establezca NEXT_PUBLIC_PLAUSIBLE_DOMAIN & NEXT_PUBLIC_PLAUSIBLE_SCRIPT_URL Variables de entorno en su archivo .env.local y en el tablero de versel. Si le preocupa los bloqueadores de anuncios, puede representar el script plausible a través de su propio dominio. Puedes leer más al respecto aquí.
Google Analytics es un servicio de análisis web ofrecido por Google que rastrea e informa el tráfico del sitio web, actualmente como una plataforma dentro de la marca de la plataforma de marketing de Google. Puede leer más sobre esto en el sitio web de Google Analytics.
Configurar: Establezca NEXT_PUBLIC_GOOGLE_ANALYTICS_ID Variable de entorno en su archivo .env.local y en el tablero de vercel.
El apoyo a otros proveedores de análisis está en progreso. Siéntase libre de abrir un problema si tiene alguna sugerencia o un PR si desea implementarlo usted mismo.
MailerLite es una herramienta simple de marketing por correo electrónico para todo tipo de empresas. Puede leer más al respecto en el sitio web de Mailerlite.
Configurar: Establezca EMAIL_API_BASE , EMAIL_API_KEY y Variables de entorno EMAIL_GROUP_ID en su archivo .env.local y en el tablero de vercel.
El apoyo a otros proveedores de boletines está en progreso. Siéntase libre de abrir un problema si tiene alguna sugerencia o un PR si desea implementarlo usted mismo.
Puede elegir entre 3 variantes de héroe diferentes para usar en app/(site)/page.tsx cambiando el componente de héroe importado.
HeroSimple - Una sección de héroe centrada simple con imagen, título y subtítulo.HeroVideo - Sección de héroe de 2 columnas con VideoBask incrustado en un lado y título y subtítulo en el otro.HeroImage - Sección de héroe de 2 columnas con imagen en un lado y título, y subtítulo en el otro.HeroMinimal - Nombre de la sección de héroes pequeños y título de trabajo Recomiendo optimizar las imágenes rápidamente de forma gratuita con ImageOptim. Instale en su Mac, luego abra la carpeta public en Finder. Seleccione todas las imágenes, haga clic con el botón derecho y elija "Abrir con> ImageOptim". Esto optimizará todas las imágenes en la carpeta.
Nota: No exagere. Puede hacer que las imágenes se vean mal con algoritmos de compresión con pérdida.
¡Cree un PR y agregue su blog a esta lista si está utilizando la plantilla!
robots.txt & sitemap.xml Este proyecto es de desarrolladores para desarrolladores. ¡Todas las contribuciones son bienvenidas! Por favor, no dude en:
develop .develop rama.Cualquier contribución que haga será bajo la licencia de software del MIT. En resumen, cuando envía cambios en el código, se entiende que sus envíos están bajo la misma licencia MIT que cubre el proyecto. El código de conducta se puede encontrar aquí.
Si amas esta plantilla y/o lo usas, dale una estrella en GitHub.
