Cómo usar Gatsby para crear tu blog y trabajar en él desde tu teléfono

Imagen de Jesús Kiteque

Recientemente, decidí migrar mi blog a Gatsby. Gatsby es un generador de sitios estáticos increíblemente rápido basado en React.

La cuestión

¿Por qué a la gente le encanta escribir en plataformas como Medium en lugar de usar un generador de sitio estático?

Hay dos tipos de personas: personas que escriben en plataformas como Medium y personas que codifican el blog ellos mismos usando generadores de sitios estáticos.

Existen muchas ventajas al escribir en plataformas públicas como Medium sobre generadores de sitios estáticos. Si escribe en plataformas públicas, puede escribir en una computadora portátil y editar en su teléfono. Una vez que haya terminado de escribir, solo necesita hacer clic en el botón "Publicar". Todo está hecho, tu blog está en vivo y puedes llegar a tu audiencia de inmediato.

Por otro lado, si escribe un blog en el generador de sitios estáticos, deberá recordar todos los scripts, obtener una vista previa del blog en localhost, construir el blog para producción, confirmar y enviar sus cambios a GitHub e implementar su sitio en el público. Si algo sale mal, es posible que deba repetir algunos de los pasos y esperar unos minutos hasta que el blog en línea sea lo que desea.

Terminará pasando mucho más tiempo haciendo cosas sin importancia aparte de la escritura real.

¿Por qué deberías escribir en Gatsby en lugar de plataformas públicas?

Supongo que esta es la razón por la cual las personas eventualmente dejan de escribir usando un generador de sitio estático y escriben en Medium. Pero hay algo que Medium o Wordpress no puede proporcionar: cuanto más escriba, más desea guardar sus escritos en un lugar seguro, en un formato simple, tal como podría guardar sus libros de diario durante años.

Pero imagina que un día quieres migrar todo lo que escribiste de Medium a otro lugar. Es entonces cuando espera haber escrito todo en Markdown y tener un sitio que aloje esos archivos de Markdown.

Pero, ¿cómo puedo hacer que escribir en Gatsby sea tan fácil como escribir en Medium?

Escribir usando un generador de sitio estático no necesita ser difícil. Siempre creo que cuanto más fácil sea escribir y publicar tu blog, más escribirás. Después de probar e investigar diferentes configuraciones, estoy muy contento con el resultado.

En mi configuración con Travis CI, git push es el nuevo botón "Publicar". Todo lo que necesitas hacer es comprometer y empujar tu código. Y también compartiré cómo editar el blog en su teléfono.

He dividido esta publicación en cinco secciones:

  1. Cómo crear un blog de Gatsby
  2. Configurar páginas de Github para alojar tu blog
  3. Configurar Travis para la implementación automática
  4. Agregar un nuevo blog y publicarlo
  5. Bonificación: Cómo escribir un blog en tu teléfono

1. Cómo crear un blog de Gatsby

Hay muchos tutoriales sobre cómo configurar un blog con Gatsby que analizan todas las potentes funciones que ofrece Gatsby. Esta publicación no se centrará en eso, pero aún mostraré algunos pasos básicos para poner en marcha su blog.

Supongo que ya es un desarrollador de JavaScript y conoce algunos conceptos básicos de npm, yarn e integración continua. Para este tutorial, usaré hilo pero no dudes en usar npm.

Primero, instale gatsby-cli y cree un nuevo repositorio usando el blog oficial de inicio de Gatsby.

$ yarn global agregar gatsby-cli
$ gatsby nuevo gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog
$ cd blog de gatsby
$ gatsby desarrollar

Ahora, abra localhost: 8000 en su navegador y debería ver el blog generado en su navegador.

2. Configure las páginas de Github para alojar su blog

Ahora, alojemos el blog públicamente.

Hay muchas opciones para alojar su sitio de forma gratuita, pero prefiero poner el código fuente y el código de producción en un solo lugar. Como confirmo mi código a GitHub, prefiero alojar mi sitio usando las páginas de GitHub. Pero siéntase libre de usar otros servicios para alojar su sitio estático.

Nota: más tarde necesitaré usar Travis CI para implementar automáticamente el sitio web después de cada confirmación, por lo que también es posible que deba verificar qué plataformas admiten para la implementación.

Ahora, cree un repositorio llamado username.github.io. Este será el repositorio tanto del código fuente de su sitio como de la compilación de producción generada.

Debido a que la página de GitHub sirve contenido de la rama maestra, deberá implementar el contenido de la carpeta pública generada por el comando de creación de hilo en la rama maestra. Tendremos que poner nuestro código fuente en otra rama. Lo llamaremos desarrollar.

Creemos una confirmación inicial y cambiemos el nombre de la rama a desarrollar.

$ git init
$ git add.
$ git commit -m "Confirmación inicial"
$ git branch -m desarrollar

Ahora, necesitamos insertar nuestro código en GitHub. Si ya ha creado el repositorio llamado username.github.io, inserte su código en el repositorio.

$ git remote add origin git@github.com: username / username.github.io.git
$ git push -u origen desarrollar

Asegúrese de que no hay una rama maestra en su repositorio de GitHub y que la rama predeterminada está configurada para desarrollarse.

3. Configure Travis para el despliegue automático

Este es un paso importante. Aunque podemos usar el despliegue de hilo para implementar, esos son otros tres pasos: generar una carpeta pública, implementar en la página de GitHub, esperar y verificar en línea.

Pero podemos deshacernos de esos pasos con Travis CI. Travis CI es un servicio alojado, distribuido y de integración continua que se utiliza para construir y probar proyectos de software alojados en GitHub.

Si su proyecto es público en GitHub, Travis CI es gratis. Ahora, cree una cuenta de Travis conectándose a su GitHub y agregue su repositorio en Travis.

Cree un archivo .travis.yml en la raíz del proyecto

idioma: nodo_js
cache:
  directorios:
    - ~ / .npm
notificaciones:
  correo electrónico:
    destinatarios:
      - chen@huchen.me
    on_success: siempre
    on_failure: siempre
node_js:
  - '9'
git:
  profundidad: 3
guión:
  - construcción de hilo
desplegar:
  proveedor: páginas
  skip-cleanup: verdadero
  keep-history: verdadero
  token de github: $ GITHUB_TOKEN
  dir-local: público
  target-branch: maestro
  en:
    rama: desarrollar

También puedes ver en Gist. Déjame explicarte esta configuración:

  • notificaciones: le pedí a Travis que me enviara un correo electrónico sobre el éxito y no se pudo construir. De manera predeterminada, solo envía un correo electrónico si el estado cambió (por ejemplo, si fue exitoso pero cambió a fallido, o si falló y cambió para corregir la compilación). Pero quería recibir un correo electrónico, incluso si fue un éxito, para poder verificar en línea.
  • git: profundidad: 3: le pedí a Travis que usara la profundidad 3 al clonar el proyecto, ya que ayudará a acelerar la construcción.
  • script: el script que necesita ejecutar Travis es la creación de hilo, que crea archivos estáticos en la carpeta pública para su posterior implementación.
  • implementación: le pedí a Travis que se implementara en las páginas de GitHub después del éxito del script de construcción de hilo. Utiliza el $ GITHUB_TOKEN que configuré en la configuración del repositorio de Travis (volveré a esto a continuación), inserta el contenido en la carpeta pública en la rama maestra de GitHub y solo debe activar la implementación en la rama de desarrollo. Haga clic aquí para leer más sobre la implementación de la configuración.

Crea un token para que Travis lo empuje a GitHub

Deberá generar un token de acceso personal con el ámbito public_repo o repo (se requiere repo para repositorios privados) para permitir que Travis envíe el código al repositorio de GitHub. Esto se debe a que Travis ejecuta la creación de hilo y necesita insertar la carpeta pública en la rama maestra donde está sirviendo GitHub Pages.

Una vez que se crea un token, deberá copiarlo y pegarlo en la configuración de repositorio de Travis.

Ahora, agregue .travis.yml en git y envíe los cambios a GitHub.

$ git add .travis.yml
$ git commit -m "Agregar archivo de configuración de Travis"
$ git empuje origen desarrollar

Ahora, puede verificar el estado en Travis. Debería ver el estado de Travis cambiado a amarillo (en ejecución). Si todo está bien, se pondrá verde en unos minutos, y debería recibir un correo electrónico sobre la compilación exitosa. Puede visitar https://username.github.io para ver el blog que acaba de crear.

4. Agregar un nuevo blog y publicar

Aquí viene la parte divertida. Ahora demostraré lo fácil que es publicar un nuevo blog usando este proceso.

Ahora, agreguemos un nuevo blog.

  1. Cree un archivo index.md en src / pages / new-blog; . Necesitarás crear una nueva carpeta new-blog también.
  2. Ponga contenido simple en index.md.
---
title: Hola nuevo blog
fecha: "2018–04–16T23: 46: 37.121Z"
---
Hola Mundo

3. Confirme este nuevo archivo e inserte en GitHub

$ git add.
$ git commit -m "Agregar un nuevo blog"
$ git empuje origen desarrollar

4. Espere a que Travis termine y verifique en línea. Después de recibir un correo electrónico unos minutos más tarde, puede consultar https://username.github.io nuevamente. Deberías ver tu nuevo blog en la lista.

5. Bonificación: cómo escribir el blog desde tu teléfono

Quiero eliminar otra barrera para escribir tu blog. Solo podía escribir mi blog cuando estaba con mi computadora portátil, pero me preguntaba: ¿podría usar mi teléfono para crear ideas y editarlas?

Resultó ser bastante fácil. Todo lo que necesita hacer es agregar sus archivos de Escritorio y Documentos a iCloud Drive y colocar su repositorio en Escritorio o Documentos. Puede tomar algo de tiempo inicialmente, pero una vez que todo está cargado, las actualizaciones son instantáneas y puedo ver mis ediciones en mi computadora portátil, mi iPhone y iPad al mismo tiempo sin ningún problema.

Hay muchas aplicaciones de descuento en iPhone. Personalmente, creo que IA Writer es el mejor: es compatible con todas las plataformas, es elegante y se centra en la escritura, y es muy compatible con iCloud Drive.

Aunque también puedo configurar mi iPhone para hacer git commits y push, creo que no es necesario. Si la parte más difícil de escribir un blog ya está hecha, usar una computadora portátil para hacer la verificación final y confirmar el código no es un gran problema para mí. git push es tan simple como hacer clic en el botón "Publicar" en Medio.

¡Eso es!

Hemos llegado al final de este tutorial. Gracias por leer hasta aquí.

Esta publicación es solo la punta del iceberg de las características de Gatsby. Estoy sorprendido por su flexibilidad y sus potentes funciones. Definitivamente deberías revisar su tutorial oficial.