ryosuke gatsby blog

Portafolio personal y blog de Ryosuke

Una cartera y un blog personal creado con el marco GatsbyJS para generar un sitio web estático está impulsado por reacts. Es un rayo rápido, SEO y PWA amigable, y se despliega directamente a una CDN como GitHub Pages o Netlify.

Esta es una alternativa de JavaScript a las soluciones del generador de sitios estáticos escritas en GO o Ruby. También está más desarrollado que el blog de inicio de Gatsby con características como archivos de blog, manejo de imágenes, optimización de SEO y algunos más.

Estructura

• Hogar
• Proyectos
• • Archivo de paginación
• Blog
• • Archivo de paginación
• Etiquetas
• • Archivo de etiquetas
• Acerca de

Formato de publicación / campos

 ---
title : Deploy a Static React Blog using GatsbyJS and Github
date : " 2018-03-21 "
section : blog
cover_image : " ./[email protected] "
tags : [ 'design', 'development', 'react', 'github', 'gatsbyjs', 'ssg', 'static site generator' ]
---

Your post here

• La sección puede ser blog o project .
• Las etiquetas deben ser una matriz
• El contenido del cuerpo puede incluir Markdown o HTML.

Complementos

Codepen

Para incrustar los módulos CodePen, simplemente copie el código de incrustación y elimine el script JS que se importa.

Gorjeo

Incronice sin problemas los tweets en las publicaciones copiando la parte de bloquesquote del código de incrustación en su archivo Markdown. No copie el archivo JS vinculado, el complemento maneja automáticamente.

Manifiesto

Configurar en gatsby-config.js .

Alimento RSS

Configurar en gatsby-config.js .

Desarrollo

Corriendo en Gatsbyjs, un SSG que crea aplicaciones React estáticas.

1. npm install
2. npm run develop

Despliegue

Páginas de Github

Construimos localmente los archivos, luego implementamos utilizando un script NPM que actualiza una rama de repo GIT específica llamada gh-pages .

Para habilitar esto, solo inicialice un repositorio Git en el proyecto, comete sus cambios y agregue su repositorio de GitHub como repositorio remoto. Asegúrese de etiquetar el control remoto como origin , de lo contrario, el despliegue de Gatsby no sabrá a qué repositorio presionar.

Implementar el sitio para origin el repositorio remoto:

npm run deploy

Creación o edición de contenido

1. git pull del origen remoto para garantizar que tenga las últimas publicaciones y para fusionar cualquier conflicto.
2. Agregue una nueva carpeta a src/content/projects o src/content/blog que lleva el nombre de su publicación. Esto se convertirá en la babosa del artículo: no necesita 'kebab-case' su título, pero tenga en cuenta el formato.
3. Cree un archivo de Markdown en la carpeta. Asegúrese de usar archivos anteriores como plantilla para incluir todos los campos apropiados (enumerados anteriormente).
4. Complete la publicación, asegúrese de incluir una imagen de portada (consulte el siguiente paso para manejar imágenes)
5. Para cualquier imagen, incluya en la misma carpeta que el markdown y el enlace de la publicación localmente usando <img src="./my-image.jpg" /> .
6. Ejecute npm run deploy en la raíz del proyecto para implementar en las páginas GitHub.

Netlificar

Este sitio también es capaz de implementarse en Netlify. Simplemente inicie sesión en NetLify, cree una nueva aplicación y apunte a este repositorio. Siga los pasos, asegúrese de que Netlify esté ejecutando gatsby build y señalando el directorio /public . Esto también le permite usar el CMS NetLify, ya que requiere un servidor para el soporte de OAUTH2 y el alojamiento en Netlify le permite reconstruir en cada edición (en lugar de construir desde su máquina personal e implementarse desde allí).

Créditos

• Gatsbyjs
• Reactjs
• Íconos de Davide Pacilio