gatsby starter gcn

gatsby-starter-gcn

Una plantilla inicial para crear increíbles sitios web estáticos con Gatsby, Contentful y Netlify. Inspirado en gatsby-contentful-starter.

Características

• Integración completa con contenido de marcador de posición listo para usar
• Integración de Netlify que incluye un formulario de contacto prediseñado
• Diseño responsivo mínimo: hecho para personalizar o desarmar
• Lógica de paginación
• Interfaz de usuario del tema
• Componente compatible con SEO
  • Soporte para compartir OpenGraph
  • Generación de mapas del sitio
• Google Analytics
• Aplicación web progresiva
• Soporte sin conexión
• Módulo Gatsby Standard para vincular Javascript con StandardJS
• Soporte de Stylelint para componentes con estilo para eliminar el CSS en JS

Manifestación

https://gcn.netlify.app/

Empezando

Instalar

 git clone https://github.com/ryanwiemer/gatsby-starter-gcn.git
yarn install

O a través de la CLI de Gatsby

 gatsby new gatsby-starter-gcn https://github.com/ryanwiemer/gatsby-starter-gcn.git

Configurar contenido

1. Regístrate en Contentful y crea un nuevo espacio vacío

2. yarn run setup

3. Ingrese la información solicitada para su espacio Contentful que se encuentra aquí: app.contentful.com → Configuración del espacio → Claves API . Deberá proporcionar una clave API estándar (primera pestaña) y una clave de administración (segunda pestaña).

Personalización

Datos del sitio web

Editar datos siteMeta en /src/gatsby-config.js

  siteMetadata: {
    title : 'GCN' , // Title of the website
    description : // Description of the website
      'A starter template to build amazing static websites with Gatsby, Contentful and Netlify' ,
    siteUrl : 'https://gcn.netlify.app' , // Website URL. Do not include trailing slash
    image : '/images/share.jpg' , // Path to default image for SEO
    menuLinks : [ // The links used in the top menu
      {
        name : 'Home' ,
        slug : '/' ,
      } ,
      {
        name : 'About' ,
        slug : '/about/' ,
      } ,
      {
        name : 'Contact' ,
        slug : '/contact/' ,
      } ,
    ] ,
    postsPerFirstPage : 7 , // Number of posts on the first page
    postsPerPage : 6 , // Number of posts used on all other pages
    /*
      Root URL for posts and tags
      For example: 'blog' will result in:
        - www.example.com/blog/
        - www.example.com/blog/post-name/
        - www.example.com/blog/tag/tag-name/
    */
    basePath : '/' , // Defaults to the homepage
  }

Nota: Si no ve sus cambios reflejados cuando desarrolla localmente, es posible que deba ejecutar yarn clean y luego reiniciar el servidor a través de yarn develop .

Interfaz de usuario del tema

Editar /src/gatsby-plugin-theme-ui/index.js

 export default {
  colors : {
    background : '#ffffff' ,
    text : '#121212' ,
    primary : '#121212' ,
    secondary : '#e9e9e9' ,
    tertiary : '#f3f3f3' ,
    highlight : '#5b8bf7' ,
  } ,
  fonts : {
    body : '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif' ,
  } ,
  sizes : {
    maxWidth : '1050px' ,
    maxWidthCentered : '650px' ,
  } ,
  responsive : {
    small : '35em' ,
    medium : '50em' ,
    large : '70em' ,
  } ,
}

Usando el estándar Gatsby

1. Verifique rápidamente su código en busca de errores con el script yarn test
2. Puede ver el archivo README de Gatsby Standard para obtener detalles sobre cómo integrar los módulos Gatsby Standard, Stylelint y Prettier incluidos en este proyecto en su editor de texto.

Contenido y SEO

1. Puede reemplazar los archivos share.jpg y favicon.png en el directorio static/images .
2. Las meta descripciones se definen en Contentful. Si elige dejar este campo en blanco en publicaciones nuevas, se utilizará en su lugar un extracto de 320 caracteres de la publicación/página.

Despliegue

Implementación manual de Netlify

1. Ejecute gatsby build

2. Arrastre y suelte la carpeta /public/ en Netlify

Implementación de Netlify desde Git (recomendado)

1. Nuevo sitio web Netlify de Git

2. Conéctate con GitHub y selecciona tu repositorio

3. Navegue a Netlify: Configuración → Construir e implementar → Construir variables de entorno . Agregue las siguientes variables de entorno utilizando Space ID y API de entrega de contenido: token de acceso de Contentful. Además, si lo desea, puede ingresar un ID de Google Analytics. Las variables deben tener nombres exactamente así para que funcionen correctamente.

 ACCESS_TOKEN
SPACE_ID
GOOGLE_ANALYTICS

4. Vaya a Netlify: Implementaciones . Haga clic en Trigger deploy para activar manualmente una implementación y confirmar que el sitio web se está creando correctamente utilizando las variables de entorno de compilación. En este punto, tenga en cuenta que cada vez que presione para master una implementación, se iniciará automáticamente y se publicará en producción.

Configuraciones adicionales

Webhook con contenido (opcional)

1. Navegue a Netlify: Configuración → Crear e implementar → Crear ganchos . Crea un nuevo gancho de compilación.

2. Vaya a Contentful: app.contentful.com → Configuración del espacio → Webhooks . Cree un webhook utilizando la URL de compilación de Netlify que acaba de crear y configure qué eventos deben activar la compilación en producción. Por ejemplo, lo siguiente reconstruirá el sitio web de producción cada vez que se publique, cancele o elimine una publicación o página:

Notificaciones de formulario de Netlify (opcional)

1. Vaya a Netlify: Formularios → Notificaciones

2. Haga clic en el menú desplegable Agregar notificación y seleccione el método de notificación que desee.

Consejos útiles

• Si realiza ediciones en su espacio Contentful mientras ejecuta yarn develop deberá detenerlo y volver a ejecutar el comando para ver los cambios reflejados. Por ejemplo, una nueva publicación o página no aparecerá automáticamente hasta que se haya reconstruido el sitio web.
• NO almacene sus tokens de acceso a contenido ni sus identificadores de espacio en ningún lugar de GitHub. Trátelos como contraseñas.