nextjs blog theme

Un iniciador de blog personalizable usando:

• Next.js v15 (enrutador de páginas)
• Viento de cola v3.x
• Editor visual de Netlify
• Soporte MDX incorporado
• Incluye diseño moderno con temas oscuros y ligeros

Evite un vistazo a la demostración.

¡Haga clic aquí para ver el tutorial de la plantilla!

Tabla de contenido:

• Empezando
  • Configuración localmente
  • Usando el mago
• Configuración del blog
• Agregar nuevas publicaciones
• Editor visual de Netlify
• Pruebas
  • Pruebas predeterminadas incluidas
  • Eliminar renovado

Empezando

---

Puede comenzar con este proyecto de dos maneras: localmente o usar el asistente de configuración.

Configuración localmente

Si lo está haciendo localmente, comience con clic en el botón Usar esta plantilla en GitHub. Esto creará un nuevo repositorio con los archivos de esta plantilla en su cuenta GitHub. Una vez hecho esto, clone su nuevo repositorio y navegue a él en su terminal.

A partir de ahí, puede instalar las dependencias del proyecto ejecutando:

yarn install

Finalmente, puede ejecutar su proyecto localmente con:

yarn run dev

Abra su navegador y visite http: // localhost: 3000, ¡su proyecto debería estar ejecutándose!

Usando el asistente de configuración

A través del asistente de configuración, puede crear su blog en unos pocos clics e implementar para netlify.

Configuración del blog

La configuración se basa en las variables de entorno para facilitar la integración con cualquier plataforma JamStack, como NetLify.

Aquí están las variables que puede editar:

Variable	Descripción	Opción
BLOG_NAME	El nombre de su blog, que se muestra debajo del avatar
BLOG_TITLE	El encabezado principal ( h1 ) en la página de inicio
BLOG_FOOTER_TEXT	el texto en el pie de página
BLOG_THEME	el tema que pasará al viento de cola	por defecto
BLOG_FONT_HEADINGS	La familia de fuentes para todos los encabezados HTML, desde h1 hasta h6	sans-serif (predeterminado), serif, monoespace
BLOG_FONT_PARAGRAPHS	la fuente de fuentes para todos los demás elementos HTML	sans-serif (predeterminado), serif, monoespace

Todas las variables ENV se pueden configurar a través del asistente o mediante la configuración de las variables de entorno del proyecto. Puede hacer esto en su netlify dashaboard (configuración del sitio/compilación e implementación/ambiente/variables de entorno).

bejamas_env-vars_short.mp4

[Alt: Tutorial de video de edición de env Vars]

Si establecer una variable de entorno no es su taza de té, los valores predeterminados se pueden cambiar en utils/global-data.js . También puede eliminar las variables y la información del blog de código duro donde estas variables se utilizan en la base de código.

• BLOG_THEME, BLOG_FONT_HEADINGS, & BLOG_FONT_PARAGRAPHS se usan en tailwind-preset.js
• BLOG_NAME, BLOG_TITLE, BLOG_FOOTER_TEXT se usan en pages/index.js & pages/posts/[slug].js a través del objeto globalData .

Agregar nuevas publicaciones

Todas las publicaciones se almacenan en el directorio /posts . Para hacer una nueva publicación, cree un nuevo archivo con la extensión .mdx .

Dado que las publicaciones están escritas en formato MDX , puede pasar accesorios y componentes. Eso significa que puede usar componentes React dentro de sus publicaciones para que sean más interactivos. Obtenga más información sobre cómo hacerlo en los documentos MDX en contenido.

nextjs-bejamas-blog_new-pos.mp4

[Alt: Tutorial de video de agregar una nueva publicación de blog]

Editor visual de Netlify

Esta plantilla está configurada para funcionar con la edición visual y la fuente de contenido GIT.

Desarrollar con NetLify Visual Editor localmente

El proceso de desarrollo típico es comenzar trabajando localmente. Clone este repositorio, luego ejecute npm install en su directorio raíz.

Ejecute el servidor de desarrollo Next.js:

cd nextjs-blog-theme
npm run dev

Instale el editor visual NetLify CLI. Luego abra una nueva ventana de terminal en el mismo directorio de proyecto y ejecute el servidor de desarrollo del editor visual de Netlify:

npm install -g @stackbit/cli
stackbit dev

Esto genera su propia URL del editor visual netlify. Abra esto, registre o inicie sesión, y se le dirigirá al editor visual de Netlify para su nuevo proyecto.

Siguientes pasos

Aquí hay algunas sugerencias sobre qué hacer a continuación si eres nuevo en el editor visual de Netlify:

• Aprender descripción general del editor visual de Netlify
• Verifique la documentación de referencia del editor visual de Netlify

Pruebas

Pruebas predeterminadas incluidas

Hemos incluido algunas herramientas que nos ayudan a mantener estas plantillas. Esta plantilla usa actualmente:

• Renovar: actualizar regularmente nuestras dependencias

Si su equipo no está interesado en estas herramientas, ¡puede eliminarlas con facilidad!

Eliminar renovado

Para mantener nuestro proyecto actualizado con las dependencias, utilizamos una herramienta llamada Renovate. Si no está interesado en estas herramientas, elimine el archivo renovate.json y compromételo en su rama principal.

Apoyo

Si te quedas atascado en el camino, obtenga ayuda en nuestros foros de soporte.