tailwind nextjs starter blog

Blog de inicio de NextJS

Esta es una plantilla de inicio de blogging Next.js, Tailwind CSS. La versión 2 se basa en el siguiente directorio de aplicaciones con el componente React Server y usa ContentLayer para administrar el contenido de Markdown.

Probablemente la plantilla de blogs más rica en funciones. JS Markdown fuera. Fácilmente configurable y personalizable. Perfecto como un reemplazo de los blogs individuales de Jekyll y Hugo.

Consulte la documentación a continuación para comenzar.

¿Enfrentando problemas? Consulte la página de preguntas frecuentes y haga una búsqueda sobre temas pasados. Siéntase libre de abrir un nuevo problema si no se ha publicado anteriormente.

Solicitud de función? Verifique las discusiones pasadas para ver si se ha mencionado anteriormente. De lo contrario, no dude en comenzar un nuevo hilo de discusión. ¡Todas las ideas son bienvenidas!

Variaciones

Nota : Estos son horquillas aportadas por la comunidad que usan diferentes marcos o con cambios significativos en la base de código, no compatibles oficialmente.

Astro Alternative - Tailwind Astro Plantilla.

Alternativa de Remix-Cun-Plantilla de blog de inicio de Vail de Vail Tail-Remix.

Soporte de internacionalización: plantilla con i18n y código fuente.

Ejemplos V2

• Blog de demostración: este repositorio
• Mi blog personal: las publicaciones de blog modificadas para generar automáticamente con fechas
• Blog de Karhdo - Blog de Karhdo - Karhdo's Coding Adventure (código fuente)
• Blog Ben.Codes - Blog personal de Benoit sobre el desarrollo de software (código fuente)
• Blog de TSIX: un ingeniero front -end se utiliza para registrar algunos puntos de conocimiento en el trabajo y estudio中文
• Blog de Soto: un sitio web personal más personalizado actualizado de V1 (código fuente)
• Blog de Prabhu - Sitio web personal de Prabhu con blog (código fuente)
• Blog de Rabby Hasan - Blog personal de Rabby Hasan sobre el desarrollo completo de la pila con la nube (código fuente)
• Enscribe.dev - Blog personal de Enscribe; travesuras de ciberseguridad, frontend webdev, etc. (código fuente)
• Dalelarroder.com - Sitio web personal de Dale Larroder actualizado desde V1 (código fuente)
• Thetalhatahir.com - Blog personal de Talha Tahir. Se agregaron miniaturas de artículo, tarjeta LinkedIn, contenido de héroes hermosos, emoticones tecnológicos.
• HOMING.O - Blog personal de Homing sobre las cosas que está aprendiendo (código fuente)
• Blog de ZS1M - Blog personal de ZS1M para grabar y compartir Contenido técnico de aprendizaje diario (código fuente)
• Dariuszwozniak.net - Blog de desarrollo de software (código fuente)
• Dreams.Plus - Sitio de blog para algunos pensamientos y registros de la vida y la tecnología.
• Blog Francisaguilar.co - Blog personal de Francis Aguilar que habla sobre tecnología, estado físico y desarrollo personal.
• Blog Min71 Dev - Blog personal sobre blockchain, desarrollo, etc. (código fuente)
• Blog de Bryce Yu - Blog personal de Bryce Yu sobre sistema distribuido, base de datos y desarrollo web. (código fuente)
• Sitio web de la serie de anime Senpai de startup remota - página de destino para la serie de anime startup remota senpai.
• Secret Base - Blog personal de Jac Hsu. Talks sobre tecnología, pensamiento y vida en general.
• ZsebinFormatikus: el blog de la Guía de Superta de Información.
• Blog de Anton Morgunov: hablar sobre ciencia sin simplificaciones excesivas o por qué la química teórica y computacional es genial.
• Blog de Hans - Blog personal de Hans, tecnología front -end, galería y diario de viaje 中文. (código fuente)
• Portafolio de Cub3y0nd - Notas de estudio de seguridad cibernética de Cub3y0nd 「中文」
• London Tech Talk: un podcast que explora las tendencias tecnológicas y las experiencias de vida expatriada. - 日本語
• Blog de Crud Flow: un blog técnico sobre IA, ingeniería en la nube, ciencia de datos y desarrollo personal
• Blog de Trillium: modificado para hacer que el currículum vitae PDF en la página de /resume . (código fuente)
• Blog de tecnología de Frank: el blog personal de Frank sobre el desarrollo y la tecnología de software. (código fuente)
• Blog de Wujie: 旅行者计划 - Jardín digital personal de Wujie (código fuente)
• Blog de Xiaodong: el blog personal de Xiaodong sobre la tecnología front -end y la vida. 「中文」 (código fuente)
• Azurtelier.com - Sitio web personal de Amos para tecnología, música, ilustraciones de IA, etc. [English/中文] (código fuente)
• Joshhaines.com - Sitio web personal para Josh Haines. (código fuente)
• • Blog de Jigu - Blog personal de Jigu sobre tecnología, cripto, golang y vida. 「中文」
• Andrewsam.xyz - Sitio web personal de Andrew utilizando Shadcn, Prisma, MongoDB, Auth.JS, Página de currículums, Línea de tiempo de experiencia personalizada y componentes de tecnologías. (código fuente)
• La cartera de Rulli Damara Putra - Blog y cartera personal de Rully.
• Blog.Taoluyuan.com 套路猿 - Un blog de tecnología personal que admite el cambio de múltiples temas. 「中英」
• LyricsDecode.com - Un sitio web de letras de canciones que ofrecen letras originales, romanización y traducciones al inglés con opciones de visualización personalizables.
• Bmacharia.com - Blog técnico de Benson Macharia sobre ciberseguridad y gestión de riesgos de TI.
• Armujahid.me - Blog personal de Abdul Rauf sobre tecnología y cosas aleatorias.
• Leohuynh.dev - ?? Blog de desarrollo de Leo: historias, ideas e ideas. Agregue /snippets , /books , agregue ProfileCard , componentes CareerTimeline y muchos más.
• Blog de OpenSats: una organización benéfica pública 501 (c) (3) cuyo objetivo es financiar de manera sostenible proyectos gratuitos y de código abierto. (código fuente)
• Blog de programas: consejos de programación de redes sociales, estrategias y actualizaciones de productos para creadores de contenido. (Enlace del proyecto)
• Blog de Yawdev - Desarrollo de agencias / software de TI. Blog sobre tecnología y negocios (enlace del proyecto)
• Notas de ingeniería - Jonas Vetterle Personal Sitio web y blog. Estoy escribiendo artículos sobre ingeniería de software que me interesan, incluida la IA y la computación cuántica
• Screenager.dev - Sitio web personal como cartera y blog. Documentando mi viaje de aprendizaje y algunas guías.
• Blog de Kezhenxu94: blogueando sobre Dev, consejos y trucos, tutoriales y más.

¿Usando la plantilla? Siéntase libre de crear un PR y agregar su blog a esta lista.

Ejemplos V1

V1-Blogs-Showcase.webm

¡Gracias a la comunidad de usuarios y contribuyentes a la plantilla! Ya no aceptamos nuevos listados de blogs por aquí. Si se ha actualizado de la versión 1 a la versión 2, no dude en eliminar su blog de esta lista y agregarlo al anterior.

• Libro de cocina de Aloisdg: ¡con fotos y recetas!
• La demostración de Gautierarcin con Next Translate - Incluye la traducción de publicaciones MDX, código fuente
• Jardín digital de David Levai: diseño personalizado y suscripciones de correo electrónico agregadas
• THVU.dev - Se agregó mdx-embed , View Count, Reading minutos y más.
• Irvin.dev - Sitio personal de Irvin Lin. Se agregó la incrustación de YouTube.
• Kirillso.com - Blog y sitio web personal.
• Lightlysharpe.com - Blog de la compañía principal de Tincre
• Blog.b00st.com - Blog de promoción de música principal de B00st.com
• Astrosaurus.me - Blog personal de Ephraim Atta -Duncan
• Dhanrajsp.me - Sitio personal y blog de Dhanraj.
• Blog.r00ks.io - Blog personal de Austin Rooks (código fuente).
• Honghong.me - Sitio web personal de Tszhong (código fuente)
• Marceloformentao.dev - Sitio web personal de Marcelo Futmentão (código fuente).
• Abiraja.com - ¡con un componente de fragmento de código JS ejecutable!
• bpiggin.com - Blog personal de Ben Piggin
• Maqib.cn - Un blog de desarrolladores frontales chinos 狂奔小马的博客 (源码)
• Ambilena.com - Blog e impronta de música electrónica para los próximos músicos.
• 0xchai.io - Blog personal de Chai
• Techipedia: aplicación web progresiva de blogs simple con botón de instalación personalizado y barra de progreso superior
• Reubence.com - Jardín digital de Reuben Rapose
• axolo.co/blog - Ingeniery Management News & Axolo.co Actualizaciones (con vista previa de imagen para el artículo en la página de inicio)
• reflex.vercel.app - Blog personal de Parth Desai (código fuente)
• Onyourmental.com - Sitio web de Curtis WarCup para el podcast mental (código fuente)
• Cwarcup.com - Sitio web personal y blog de Curtis WarCup (código fuente).
• Ondiek -elijah.me - Sitio web y blog de Ondiek Elijah (código fuente).
• JMalvarez.dev - Blog personal de José Miguel Álvarez (código fuente)
• Justingosses.com - Sitio web personal y blog de Justin Gosses (código fuente)
• https://bitoflearning-9a57.fly.dev/ - Blog personal de Sangeet Agarwal, reemplazado para remezclar utilizando la pila indie (código fuente)
• Raphaelchelly.com - Sitio web personal y blog de Raphaël Chelly (código fuente)
• Kaveh.Page - Blog personal de Kaveh Teherani. Directorio de etiquetas agregado, tarjeta de perfil, tiempo de lectura en el directorio de publicaciones, etc.
• Drakerossman.com - Blog de Drake Rossman sobre Nixos, Rust, Arquitectura de Software y Gestión de Ingeniería, así como reflexiones generales.
• Meamenu.com - Página de destino y blog de productos a partir de esta plantilla. También utiliza Framer-Motion para animaciones, plantillas de diseño personalizadas, Waline para comentarios de blog y formularios Primereact [ITA]
• Giovanni.orciuolo.it - Sitio web personal de Giovanni Orciuolo, blog y todo nerd.

Motivación

Quería transferir mi blog existente a NextJS y Tailwind CSS, pero no había una plantilla fácil de usar fuera de la caja, así que decidí crear una. El diseño está adaptado del blog Tailwindlabs.

Quería que fuera casi tan rico en funciones como las plantillas de blogs populares como Beautiful-Jekyll y Hugo Academic, pero con lo mejor del ecosistema de React y las mejores prácticas del desarrollo web actual.

Características

• Next.js con TypeScript
• ContentLayer para administrar la lógica de contenido
• Personalización de estilo fácil con Ventilio de Tail 3.0 y Atributo de color principal
• MDX - ¡Escribe JSX en Documentos de Markdown!
• Puntaje casi perfecto en el faro - Informe del faro
• Ligero, 85 kb de primera carga JS
• Vista para dispositivos móviles
• Tema claro y oscuro
• Optimización de fuentes con Next/Font
• Integración con Plinio que proporciona:
  • Opciones de análisis múltiples que incluyen Umami, Plausible, Simple Analytics, Posthog y Google Analytics
  • Comentarios a través de Giscus, Enunciados o Disqus
  • API de boletín y componente con soporte para MailChimp, Butdodown, Convertkit, Klaviyo, Revue, Seaxoctopus y Beehiiv
  • Búsqueda de paleta de comandos con Kbar o Algolia
• Sintaxis del lado del servidor resaltando con números de línea y resaltado de línea a través de Rehype-Prism-plus
• Pantalla matemática admitida a través de Katex
• Soporte de citas y bibliografía a través de rehype-citation
• Alertas de Github a través de observación-github-blockquote-alert
• Optimización automática de imágenes a través de Next/Image
• Soporte para etiquetas: cada etiqueta única será su propia página
• Soporte para múltiples autores
• 3 diseños de blog diferentes
• 2 diseños diferentes de listados de blogs
• Soporte para el enrutamiento anidado de las publicaciones de blog
• Página de proyectos
• Encabezados de seguridad preconfigurados
• ¡SEO amigable con la alimentación RSS, los sitios sitios y más!

Puestos de muestra

• Una guía de markdown
• Obtenga más información sobre las imágenes en Next.js
• Un recorrido por las matemáticas tipicetenses
• Cuadrícula de imagen MDX simple
• Ejemplo de prosa larga
• Ejemplo de publicación de ruta anidada

Guía de inicio rápido

1. Clonar el repositorio

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

2. Personalizar siteMetadata.js (información relacionada con el sitio)
3. Modifique la política de seguridad de contenido en next.config.js si desea utilizar otro proveedor de análisis o una solución de comentarios que no sea Giscus.
4. Personalizar authors/default.md (autor principal)
5. Modificar projectsData.ts
6. Modificar headerNavLinks.ts para personalizar los enlaces de navegación
7. Agregar publicaciones de blog
8. Desplegar en Vercel

Instalación

yarn

Tenga en cuenta que si está utilizando Windows, es posible que deba ejecutar:

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

Desarrollo

Primero, ejecute el servidor de desarrollo:

yarn dev

Abra http: // localhost: 3000 con su navegador para ver el resultado.

Edite el diseño en app o el contenido en data . Con la recarga en vivo, las páginas actualizan automáticamente mientras las edita.

Extender / personalizar

data/siteMetadata.js : contiene la mayor parte de la información relacionada con el sitio que debe modificarse para la necesidad de un usuario.

data/authors/default.md - Información predeterminada del autor (requerido). Se pueden agregar autores adicionales como archivos en data/authors .

data/projectsData.js : datos utilizados para generar tarjeta de estilo en la página de proyectos.

data/headerNavLinks.js - enlaces de navegación.

data/logo.svg : reemplace con su propio logotipo.

data/blog : reemplace con sus propias publicaciones de blog.

public/static : almacene activos como imágenes y favicones.

tailwind.config.js y css/tailwind.css - Configuración de Vailada de Tail y hoja de estilo que se puede modificar para cambiar el aspecto general del sitio.

css/prism.css : controla los estilos asociados con los bloques de código. Siéntase libre de personalizarlo y usar su tema de prisma preferido, por ejemplo, temas de prisma.

contentlayer.config.ts - Configuración para ContentLayer, incluida la definición de fuentes de contenido y complementos MDX utilizados. Consulte la documentación de ContentLayer para obtener más información.

components/MDXComponents.js : pase su propio código JSX o reaccione el componente especificándolo aquí. Luego puede usarlos directamente en el archivo .mdx o .md . De manera predeterminada, se transmiten un enlace personalizado, el componente next/image , el componente de contenido de la tabla y el formulario de boletín. Tenga en cuenta que los componentes deben exportarse por defecto para evitar los problemas existentes con Next.js.

layouts : plantillas principales utilizadas en páginas:

• Actualmente hay 3 diseños postales disponibles: PostLayout , PostSimple y PostBanner . PostLayout es el diseño predeterminado de 2 columnas con información de meta y autor. PostSimple es una versión simplificada de PostLayout , mientras que PostBanner presenta una imagen de banner.
• Hay 2 diseños de listados de blogs: ListLayout , el diseño utilizado en la versión 1 de la plantilla con una barra de búsqueda y ListLayoutWithTags , actualmente utilizado en la versión 2, que omite la barra de búsqueda pero incluye una barra lateral con información sobre las etiquetas.

app : páginas para enrutar. Lea la documentación Next.js para obtener más información.

next.config.js - Configuración relacionada con Next.js. Debe adaptar la política de seguridad de contenido si desea cargar scripts, imágenes, etc. de otros dominios.

Correo

El contenido se modela utilizando ContentLayer, que le permite definir su propio esquema de contenido y usarlo para generar objetos de contenido mecanografiados. Consulte la documentación de ContentLayer para obtener más información.

Marina

Frontmatter sigue los estándares de Hugo.

Consulte contentlayer.config.ts para obtener una lista actualizada de campos compatibles. Se admiten los siguientes campos:

 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)

Aquí hay un ejemplo de la zatera de una publicación:

 ---
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
---

Desplegar

Páginas de Github

Ya se proporciona un flujo de trabajo pages.yml . Simplemente seleccione "Acciones de GitHub" en: Settings > Pages > Build and deployment > Source .

Velo

La forma más fácil de implementar la plantilla es implementar en Vercel. Consulte la documentación de implementación Next.js para obtener más detalles.

Netlificar

El tiempo de ejecución de NetLify Next.js permite la funcionalidad de Key Next.js en su sitio web sin la necesidad de configuraciones adicionales. Netlify genera funciones sin servidor que manejarán las funcionalidades de Next.js, como las páginas del lado del servidor (SSR), la regeneración estática incremental (ISR), next/images , etc.

Consulte Next.js en Netlify para obtener valores de configuración sugeridos y más detalles.

Servicios de alojamiento estático (Páginas GitHub / S3 / Firebase, etc.)

Correr:

$ EXPORT=1 UNOPTIMIZED=1 yarn build

Luego, implementa la carpeta out o ejecute npx serve out localmente.

Importante

Si se implementa con una ruta base de URL, como https://example.org/myblog, necesita un BASE_PATH shell-var adicional al comando de compilación:

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

=> En su código, ${process.env.BASE_PATH || ''}/robots.txt imprimirá "/myblog/robots.txt" en la compilación out (o solo /robots.txt if yarn dev , es decir: en localhost: 3000)

Consejo

Alternativamente a UNOPTIMIZED=1 , para continuar usando next/image , puede usar un proveedor de optimización de imágenes alternativo como IMGIX, Cloudinary o Akamai. Consulte la documentación de optimización de imágenes para obtener más detalles.

Considere eliminar las siguientes características que no se pueden usar en una compilación estática:

1. Comentar headers() de next.config.js .
2. Elimine la carpeta api y los componentes que llaman a la función del lado del servidor, como el componente del boletín. No se requiere técnicamente y el sitio se construirá con éxito, pero las API no se pueden usar ya que son funciones del lado del servidor.

Preguntas frecuentes

• ¿Cómo puedo agregar un componente MDX personalizado?
• ¿Cómo puedo personalizar la búsqueda kbar ?
• Desplegarse con Docker

Apoyo

¿Usando la plantilla? Apoye este esfuerzo dando una estrella en Github, compartiendo su propio blog y dando un saludo en Twitter o convertirse en un patrocinador del proyecto.

Licencia

MIT © Timothy Lin