Preparación del proyecto en entorno de desarrollo local y agregar mejoras a nuestro proyecto

Curso de Introducción a Jamstack

Módulo 5

Introducción a Jamstack

Introducción a Jamstack: No Code para Crear Sitios Web Rápidos y Escalables

Creación de un blog con herramientas low code

Introducción a JamStack: Arquitectura Web Rápida y Segura

Fundamentos de JAMStack y Desarrollo Web Moderno

Creación de un Blog Portafolio con Jam Stack y SEO

Templates de Jamstack

Creación de Blogs con Low Code usando Jamstack y Next.js

Creación de un proyecto en Jamstack

Transferencia de Proyectos Visuales a Código en GitHub

Clonación y Configuración de Repositorio con Visual Studio Code

Modificaciones y Configuración de Proyectos Web Locales

Editor visual de Stackbit

Conexión y despliegue de proyectos con Stackbit y Netlify

Subiendo el proyecto a la nube

Configuración y compra de dominios para tu sitio web

Configuración de DNS y seguridad de dominios con Clover y Netlify

Plataformas para Hospedar Sitios Web: Netlify, GitHub Pages, Firebase y Más

Optimización SEO

Integración de Google Analytics en tu sitio web paso a paso

Uso de Google Search Console para Optimizar tu Sitio Web

Optimización SEO para Mejorar Visibilidad Web

Cierre y conclusiones

Creación de Sitios Web con Integraciones y Optimización SEO

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

¿Cómo modificar nuestro proyecto local para un blog?

Para trabajar en un entorno local de manera efectiva, es fundamental entender cómo modificar y personalizar tu proyecto. Estas modificaciones te permitirán reflejar tu identidad y configurar tu blog según tus necesidades. En este proceso, realizaremos algunas acciones como la eliminación de elementos innecesarios y la creación de nuevas entradas.

¿Qué cambios son importantes en la 'About Page'?

Contenido Personal: Es esencial rellenar esta sección con contenido relevante que te describa. Pregúntate: ¿quién eres?, ¿qué haces?, ¿cómo pueden contactarte? Este es el lugar para compartir tus redes o cualquier detalle que ayude a los lectores a conocerte mejor.
Personalización y Eliminación: Asegúrate de eliminar cualquier componente que no utilices para mantener tu página limpia y relevante.

# Eliminando una sección innecesaria
- heading: Gracias
- contenido: Eliminado para nuevas actualizaciones.

¿Cómo crear una nueva entrada?

Para añadir una nueva entrada en el blog, ésto es lo que debes hacer:

Crear nuevos archivos: Este proceso comienza con el comando nuevo file y le asignas un nombre que se reflejará en la URL. Por ejemplo, 'hello-world.md'.
Formato e información clave:
- Título: Esté debe ser breve y descriptivo.
- Xerp (excerpt): Una breve descripción que capture la esencia del post.
- Fecha: Usar el formato año-mes-día para mantener la coherencia.
- Imágenes: Agregar un 'alt' descriptivo para cada imagen para garantizar la accesibilidad.

# Estrategia de una nueva entrada
Título: Hello World
Descripción breve: Bienvenidos a mi nuevo blog. Aquí comparto mi viaje de aprendizaje.
Fecha: 2023-06-01
Imagen: ![Descripción de la imagen](ruta/imagen.jpg)

¿Cómo configurar el proyecto para ejecución local?

¿Qué debemos revisar en nuestro package JSON?

Nombre y Descripción: Cambia el nombre y descripción de tu proyecto para reflejar su propósito.
Scripts importantes:
- Development: Facilita la ejecución del entorno de desarrollo local con Next.js.
- Build y Start: Herramientas para compilar y desplegar tu aplicación.

{
  "name": "Oscar-Barajas-CO",
  "description": "Simple Blog para Oscar Barajas",
  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start"
  }
}

¿Cómo manejar dependencias y errores comunes?

Cuando enfrentamos errores al configurar nuestro entorno, recordemos que a menudo están relacionados con las dependencias. Un ejemplo es el cambio de reemplazar node-sass por sass.

Eliminar y Reinstalar: Si un error es detectado, elimina la dependencia problemática y reinstala la adecuada.
Comando NPM correcto:
- Elimina: npm uninstall node-sass
- Instala: npm install sass

# Cambiando la dependencia de sass para evitar errores
npm uninstall node-sass
npm install sass

¿Cómo ejecutar y visualizar tu proyecto en local?

Para ejecutar tu blog en local:

Comandos Iniciales:
- Instalar dependencias: npm install
- Ejecutar entorno local: npm run dev
Verificación y ajuste de cambios:
- Asegúrate de haber guardado todas las modificaciones antes de ejecutar para ver los resultados.
- Si no aparecen cambios, verifica que los pasos previos se realizaron correctamente.

¿Cómo manejar tus cambios con Git?

Ahora que tu proyecto está listo, es importante usar un control de versiones para realizar seguimiento de cambios y colaborar.

Comandos básicos de Git:
- Ver cambios: git status
- Añadir cambios: git add .
- Confirmar cambios: git commit -m "Initial commit"
- Subir al repositorio: git push origin master

# Subiendo cambios al repositorio
git status
git add .
git commit -m "Initial commit de mi nuevo blog"
git push origin master

Recomendaciones

Sé curioso, experimenta con cambios y entiende cómo funciona cada elemento.
Usa el archivo README.md para mantener documentación clara de tus proyectos.
Estudia fundamentos de Git y los beneficios de su integración continua para mejorar tus habilidades.

Este enfoque no solo te permitirá tener un blog bien estructurado, sino que también fortalecerá tus habilidades en desarrollo web y control de versiones. Recuerda siempre mantener un espíritu de aprendizaje continuo y no temas enfrentar desafíos al modificar tus proyectos. ¡Éxito!

Aportes 16

Preguntas 12

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Cristian Felix Iñiguez Porcel

hace 4 años

Si al levantar el entorno de desarrollo les sale el error ValidationError: Invalid options object. Watch Ignore Plugin has been initialized using an options object that does not match the API schema., deben modificar el archivo next.config.js de esta forma:

// ...

module.exports = {
    ...,
    webpack: (config, { webpack }) => {
        // ...

	// antes
        // config.plugins.push(new webpack.WatchIgnorePlugin([[/\/content\//]]));
        
	// ahora
	config.plugins.push(new webpack.WatchIgnorePlugin({ paths: [/\/content\//] }));

        return config;
    }
};

Todo está en la forma en cómo instanciamos WatchIgnorePlugin. Más info aquí.

Eloy Chávez Dev

hace 4 años

Los errores son nuestros amigos :3

Jesús Daniel Medina Cruz

hace 4 años

A mí no me dió error.

Emi Jin | EmiLaJaponesa.com

hace 3 años

Cuando hice

$ npm install

me salió así:

25 vulnerabilities (8 moderate, 17 high)

y me asusté. Pero cuando hice

$ npm install --legacy-peer-deps

se eliminó las vulnerabilidades:

found 0 vulnerabilities

No estoy segura si será la mejor forma, pero a mí me funcionó así.
Ojalá que esta información sirva para alguién.

Emi Jin | EmiLaJaponesa.com

hace 3 años

$ git push origin master
Username for 'https://github.com': USUARIO
Password for 'https://[email protected]':

Introducí mi contraseña de GitHub. Pero me salió así:

remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead.
remote: Please see https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/ for more information.
fatal: Autenticación falló para 'https://github.com/USUARIO/REPOSITORIO.git/'

Si te pasó lo mismo, te invito a leer este articulo que me ayudó a solucionar el problema.
Tienes que generar Token con la autoridad de acceso al repositorio.

Esteban Blanco Ortuno

hace 4 años

‘Los errores son nuestros amigos’

Adrian Avila Molina

hace 4 años

10 vulnerabilities (1 moderate, 9 critical). porque me pasa esto alguna idea

walter Jorge

hace 3 años

hola me sale el siguiente error .

1 of 1 unhandled error
Server Error
Error: SourcebitDataClient.getData, cache file ‘D:\jamslack\wj-solutions-fd79a.sourcebit-nextjs-cache.json’ was not found after 10 retries

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
Timeout.checkPathExists [as _onTimeout]
file:///D:/jamslack/wj-solutions-fd79a/node_modules/sourcebit-target-next/index.js (365:25)

y en la consola lo suiguiente s and retry #9
SourcebitDataClient.getData, cache file ‘D:\jamslack\wj-solutions-fd79a.sourcebit-nextjs-cache.json’ not found, waiting 500ms and retry #10
Error: SourcebitDataClient.getData, cache file ‘D:\jamslack\wj-solutions-fd79a.sourcebit-nextjs-cache.json’ was not found after 10 retries
at Timeout.checkPathExists [as _onTimeout] (D:\jamslack\wj-solutions-fd79a\node_modules\sourcebit-target-next\index.js:365:25) {
type: ‘Error’
}
Error: SourcebitDataClient.getData, cache file ‘D:\jamslack\wj-solutions-fd79a.sourcebit-nextjs-cache.json’ was not found after 10 retries
at Timeout.checkPathExists [as _onTimeout] (D:\jamslack\wj-solutions-fd79a\node_modules\sourcebit-target-next\index.js:365:25) {
type: ‘Error’

Willy Da Conceicao

hace 3 años

Me encanta la integración entre no-code (stackbit) y code desde local los cambios que se pueden realizar son muy rápidos y se visualizan realtime en stackbit

Willy Da Conceicao

hace 3 años

No me salió ningún error

$ node -v
v14.17.6

$ npm -v
6.14.15

Adrian Avila Molina

hace 4 años

porque no te pide contra al usar git push origin master

Adrian Avila Molina

hace 4 años

PORQUE NO VEO EL [Master] en la terminal

Oscar Alejandro Castillo Naveda

hace 4 años

Cuando corran el “npm run dev” es posible que a la primera no les salga bien, les recomiendo volver a hacerlo y recuerden: “los errores son nuestros amigos no nuestros enemigos”.

Adrian Avila Molina

hace 4 años

Error: failed to load next.config.js, see more info here https://nextjs.org/docs/messages/next-config-error
Error: Cannot find module 'lodash'
Require stack:
- /Users/aam/practicaweb/magenta-panda-f26ac/sourcebit.js
- /Users/aam/practicaweb/magenta-panda-f26ac/next.config.js
- /Users/aam/practicaweb/magenta-panda-f26ac/node_modules/next/dist/server/config.js
- /Users/aam/practicaweb/magenta-panda-f26ac/node_modules/next/dist/server/next.js
- /Users/aam/practicaweb/magenta-panda-f26ac/node_modules/next/dist/server/lib/start-server.js
- /Users/aam/practicaweb/magenta-panda-f26ac/node_modules/next/dist/cli/next-dev.js
- /Users/aam/practicaweb/magenta-panda-f26ac/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:940:15)
    at Function.mod._resolveFilename (/Users/aam/practicaweb/magenta-panda-f26ac/node_modules/next/dist/build/webpack/require-hook.js:96:28)
    at Function.Module._load (node:internal/modules/cjs/loader:773:27)
    at Module.require (node:internal/modules/cjs/loader:1012:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at Object.<anonymous> (/Users/aam/practicaweb/magenta-panda-f26ac/sourcebit.js:1:11)
    at Module._compile (node:internal/modules/cjs/loader:1108:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
    at Module.load (node:internal/modules/cjs/loader:988:32)
    at Function.Module._load (node:internal/modules/cjs/loader:828:14) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/aam/practicaweb/magenta-panda-f26ac/sourcebit.js',
    '/Users/aam/practicaweb/magenta-panda-f26ac/next.config.js',
    '/Users/aam/practicaweb/magenta-panda-f26ac/node_modules/next/dist/server/config.js',
    '/Users/aam/practicaweb/magenta-panda-f26ac/node_modules/next/dist/server/next.js',
    '/Users/aam/practicaweb/magenta-panda-f26ac/node_modules/next/dist/server/lib/start-server.js',
    '/Users/aam/practicaweb/magenta-panda-f26ac/node_modules/next/dist/cli/next-dev.js',
    '/Users/aam/practicaweb/magenta-panda-f26ac/node_modules/next/dist/bin/next'
  ]
}

Esto me sale al querer correrlo

Adrian Avila Molina

hace 4 años

(base) aam@Adrians-MacBook-Air magenta-panda-f26ac % npm audit fix --force
npm WARN using --force Recommended protections disabled.
npm WARN audit Updating lodash to 11.1.2,which is a SemVer major change.
npm WARN audit Updating next to 11.1.2,which is a SemVer major change.
npm WARN audit Updating sourcebit to 0.6.0,which is a SemVer major change.
npm WARN audit No fix available for sourcebit-source-filesystem@*
npm WARN audit No fix available for sourcebit-target-next@*
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react@17.0.1
npm WARN node_modules/react
npm WARN   peer react@">=16" from sourcebit-target-next@0.6.4
npm WARN   node_modules/sourcebit-target-next
npm WARN     sourcebit-target-next@"^0.6.2" from the root project
npm WARN   1 more (the root project)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^17.0.2" from next@11.1.2
npm WARN node_modules/next
npm WARN   next@"11.1.2" from the root project
npm WARN   1 more (sourcebit-target-next)
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react-dom@17.0.1
npm WARN node_modules/react-dom
npm WARN   react-dom@"17.0.1" from the root project
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^17.0.2" from next@11.1.2
npm WARN node_modules/next
npm WARN   next@"11.1.2" from the root project
npm WARN   1 more (sourcebit-target-next)
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react@17.0.1
npm WARN node_modules/react
npm WARN   peer react@">=16" from sourcebit-target-next@0.6.4
npm WARN   node_modules/sourcebit-target-next
npm WARN     sourcebit-target-next@"^0.6.2" from the root project
npm WARN   1 more (the root project)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^17.0.2" from @next/react-dev-overlay@11.1.2
npm WARN node_modules/next/node_modules/@next/react-dev-overlay
npm WARN   @next/react-dev-overlay@"11.1.2" from next@11.1.2
npm WARN   node_modules/next
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react@17.0.1
npm WARN node_modules/react
npm WARN   peer react@">=16" from sourcebit-target-next@0.6.4
npm WARN   node_modules/sourcebit-target-next
npm WARN     sourcebit-target-next@"^0.6.2" from the root project
npm WARN   1 more (the root project)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^17.0.2" from @next/react-dev-overlay@11.1.2
npm WARN node_modules/next/node_modules/@next/react-dev-overlay
npm WARN   @next/react-dev-overlay@"11.1.2" from next@11.1.2
npm WARN   node_modules/next
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react-dom@17.0.1
npm WARN node_modules/react-dom
npm WARN   react-dom@"17.0.1" from the root project
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^17.0.2" from @next/react-dev-overlay@11.1.2
npm WARN node_modules/next/node_modules/@next/react-dev-overlay
npm WARN   @next/react-dev-overlay@"11.1.2" from next@11.1.2
npm WARN   node_modules/next
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react-dom@17.0.1
npm WARN node_modules/react-dom
npm WARN   react-dom@"17.0.1" from the root project
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^17.0.2" from @next/react-dev-overlay@11.1.2
npm WARN node_modules/next/node_modules/@next/react-dev-overlay
npm WARN   @next/react-dev-overlay@"11.1.2" from next@11.1.2
npm WARN   node_modules/next
npm ERR! Cannot read property 'version' of undefined

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/aam/.npm/_logs/2021-10-07T18_09_24_909Z-debug.log

Alguna explicacion??

Adrian Avila Molina

hace 4 años

me descargue otra plantilla con el mismo stack pero el archivo index no tiene las partes de excerpt ni date, y el layout dice advanced, esta mal eso?