23 Plantillas y Starters de Páginas de Destino Gratis y de Código Abierto para Gatsby/React

Gatsby es un marco gratuito y de código abierto basado en React que ayuda a los desarrolladores a crear aplicaciones y sitios web rápidos y modernos. Gatsby utiliza React para crear sitios web estáticos y es conocido por su alto rendimiento, optimización SEO integrada y facilidad de uso.

Gatsby ofrece una serie de funciones que lo convierten en una opción popular para los desarrolladores. Algunas de estas características incluyen:

• Generación de sitios estáticos: Gatsby genera sitios web estáticos, lo que significa que el contenido está prediseñado y se muestra a los usuarios cuando visitan el sitio. Esto conduce a tiempos de carga más rápidos y un mejor rendimiento.
• Sistema de complementos: Gatsby tiene un sólido sistema de complementos que permite a los desarrolladores agregar fácilmente funciones a sus sitios web. Hay complementos disponibles para una amplia gama de tareas, incluida la optimización de imágenes, la gestión de contenido y más.
• Integración GraphQL: Gatsby se integra con GraphQL, un lenguaje de consulta para API, para permitir a los desarrolladores recuperar y manipular datos más fácilmente.

Gatsby tiene varias ventajas que lo convierten en una opción popular para los desarrolladores. Éstas incluyen:

• Comunidad: Gatsby tiene una comunidad grande y activa de desarrolladores que contribuyen al proyecto y crean complementos y otros recursos.
• Muchos materiales y recursos de código abierto.: Hay muchos tutoriales, publicaciones de blogs y otros recursos disponibles en línea para ayudar a los desarrolladores a aprender Gatsby y superar problemas comunes.
• optimización SEO: Gatsby está optimizado para motores de búsqueda desde el primer momento, lo que significa que los sitios web creados con Gatsby tienden a tener una buena clasificación en las páginas de resultados de los motores de búsqueda.

En general, Gatsby es un marco potente y flexible que puede ayudar a los desarrolladores a crear aplicaciones y sitios web rápidos y modernos. Sus características, ventajas y facilidad de uso lo convierten en una opción popular para desarrolladores de todos los niveles.

En esta publicación, le ofrecemos los mejores iniciadores de aterrizaje abiertos de Gatsby que permiten a los desarrolladores y diseñadores crear un sitio web con una página de destino rápida con el mínimo esfuerzo.

1- Página de inicio de inicio de Gatsby

Con este Arrancador Gatsby, puede crear páginas de destino personalizadas utilizando Gatsby y Contentful con esta combinación de tema inicial. Este inicio demuestra cómo usar Contentful para crear páginas de destino dinámicas y personalizables con Gatsby y puede servir como punto de partida para crear sus propios componentes de página de destino personalizados que coincidan con su marca visual.

2- Inicio de página de inicio de Gatsby SaaS

Inicie su proyecto SaaS con esta plantilla inicial de página de destino. Construido a partir del iniciador principal de Gatsby, tiene todos los archivos de configuración básicos de Gatsby que podría necesitar para comenzar a funcionar rápidamente con el generador de aplicaciones ultrarrápido para React.

Cuenta con:

• Un diseño responsivo
• Opciones optimizadas para SEO
• Complemento de mapa del sitio incluido
• Complemento sin conexión/PWA listo para usar
• Rápido

3- Inicio de página de inicio de Gatsby para aplicaciones móviles

Este es un iniciador de página de destino simple, minimalista y fácil de usar, sin todo tipo de detalles que tendrás que eliminar más tarde. Cree una página de destino hermosa y súper rápida a partir de una plantilla básica con una sola página que ya se ve bien.

La página de inicio mínima viene con algunos complementos ya instalados, pero su enfoque principal es mantenerse simple y lucir limpio. Estas cosas están incluidas por defecto:

• Imagen de Gatsby: imágenes agregadas al src/images La carpeta se optimiza automáticamente mediante el gatsby-image complemento y se puede integrar en componentes con carga diferida y efectos de desenfoque
• Analytics: agregue su ID de seguimiento de Google Analytics a gatsby-config.js para comenzar a rastrear automáticamente a los visitantes del sitio
• Mapa del sitio: cualquier página nueva agregada al sitio se ensambla automáticamente en un mapa del sitio a través de gatsby-plugin-sitemap
• Tema de color: el src/styles/constants.js El archivo contiene un conjunto de colores y estilos predeterminados que se aplican en línea a los componentes del sitio y que se pueden anular con sus propios estilos.

4- gatsby-starter-dimensión-v4

Plantilla de inicio Gatsby.js v45.4.2 basada en Dimension de HTML5 UP. Para más iniciadores y plantillas de Gatsby.

5- Hojas web

WebSheets Listing Page es una plantilla de Gatsby de código abierto que genera sitios web de listados/directorios basados ​​en datos de Google Sheets. El sitio web generado será una aplicación web progresiva estática de carga rápida con SEO y capacidades fuera de línea.

Funciones incluidas en WebSheets:

• Google Sheets como sistema de gestión de contenidos (CMS)
• Sitio estático de carga rápida
• Aplicación web progresiva (PWA) compatible sin conexión
• SEO optimizado
• Google Analytics configurado
• Diseño responsivo móvil
• Modo oscuro/claro
• Botón compartir en redes sociales
• Múltiples combinaciones de diseño
• Botones de llamada a la acción

6- Tema del círculo

Este es un iniciador simple pero rico en funciones y páginas para crear una página de destino responsiva, con animación y diseño moderno. Es una solución ideal para páginas de destino SaaS, aplicaciones móviles o agencias web.

7- Gatsby repetitivo

Este repositorio ofrece un modelo de Gatsby rico en funciones para crear una página de destino progresiva, receptiva y rápida.

Cuenta con:

100/100 puntuaciones de Lighthouse listas para usar

• Soporte completo de mecanografiado
• Soporte total de emociones
• Componentes básicos ligeros y funcionales (sin estilo)
• Generación automática de tipos e integración del editor para GraphQL
• Generadores internos para páginas y componentes (construidos sobre Hygen)
• Sistema de diseño CSS inicial (basado en Pollen)
• Storybook 5 preconfigurado para Gatsby
• Más bonito configurado listo para usar
• Configuración de implementación de Netlify
• Polyfills cargados de forma diferida (variables CSS, etc.)
• Notificaciones de compilación de desarrollo

8- Zauberhaft – Plantilla Gatsby

Cree un sitio web de cartera moderno y único que convierta con Zauberhaft.

Personalice fácilmente la plantilla con clases de utilidad y propiedades personalizadas de CSS. Comience rápidamente y potencie su presencia en línea con la plantilla Zauberhaft Gatsby.

9- Página de inicio de Gatsby

Plantilla de página de Gatsby para crear una página de destino estática y sencilla. Una solución ideal para crear una página de destino para desarrolladores, autónomos, agencias web y aplicaciones móviles. Incluye muchas funciones listas para SEO como Twitter y OpenGraph.

10- Tema Gatsby de la página de inicio de la aplicación

Un tema de Gatsby que crea rápidamente un sitio web de una página para su aplicación móvil que ya se ha lanzado.

Características:

• Recupera automáticamente información de la App Store
• Sensible
• Soporta modo oscuro
• Banners de aplicaciones inteligentes
• Compatible con iOS App Store y Mac App Store

11- Página de inicio automática de la aplicación GatsbyJS

Cree e implemente una página de inicio de una aplicación iOS en GitHub Pages y Netlify en un par de minutos.

12- Página de inicio Gatsby

13- Devfolio gatsby-starter-landing

Inicie el desarrollo de la página de destino con Gatsby, puede consultar el manifestación aquí.

14- inicio-de-la-página-de-aterrizaje-de-gatsby

Iniciador de página de destino de Gatsby para crear páginas de destino de carga rápida, personalizables, escalables y compatibles con SEO. Utiliza Material UI Framework e incluye integración con Mailchimp.

15- Aterrizaje simple

Un iniciador de página de destino sencillo, listo para usar y fácil de personalizar para GatsbyJS con imágenes Hero generadas automáticamente y altamente optimizadas en tamaños y tipos.

El iniciador usa la biblioteca css-in-js. jss y su integración para React React-JSS para declarar y mantener estilos CSS.

dieciséis- Plantilla web Kentico Kontent y GatsbyJs

Plantilla web Kentico Kontent usando Gatsby y Kentico Kontent. Puedes comprobar el manifestación aquí.

17- Página de inicio de tsPartículas Gatsby

• Inicio de página de inicio de StartertsParticles Gatsby

Inicie su proyecto con este modelo de página de destino. Este iniciador se envía con los archivos de configuración principales de Gatsby y Reaccionar tsPartículas Con una configuración sencilla, es posible que necesites ponerte en marcha rápidamente con el generador de aplicaciones ultrarrápido para React.

18- Manzana de arranque Gatsby

Kit de inicio del blog Gatsby con un hermoso diseño responsivo, que incluye las siguientes características:

• Faro 100 + PWA
• componentes con estilo
• Diseño responsivo estilo Apple
• Tema dinámico perfecto (Comentario + Código resaltado)
• Hermosa animación del menú móvil.
• Resaltado de código con comentario-gatsby-vscode
• Declaraciones Comentario
• Soporte de categorías
• Desplazamiento infinito con Intersection Observer
• RSS Feed
• SEO
• Soporte sin conexión
• Más bonita y ESLint

19- Arrancador Gatsby: Prismático

Un Gatsby Starter con mucha tipografía y temática ligera que utiliza el CMS sin cabeza prismático.

En este iniciador se utilizan varias funciones de Prismic:

• Rebanadas: Enriquezca sus publicaciones de blog con citas, imágenes o bloques de código personalizados. Puedes pedirlos como quieras. Cuando utilice Image-Slice, la imagen se insertará y optimizará mediante imagen-gatsby
• Etiquetas: Al marcar una sola palabra o un bloque completo con las etiquetas dadas, Prism.js las transformará en bloques de código resaltados por sintaxis.
• Campos de relación: Clasifique sus publicaciones de blog en Categorías a través de un campo de relación. Puedes cambiar de categoría sobre la marcha
• Ambos tipos personalizados (único/repetible): (Casi) Todos los aspectos del sitio web se gestionan con Prismic. Los enlaces de redes sociales o los proyectos recientes se administran en Prismic, ¡sin entradas codificadas!

20- gatsby-gitbook-iniciador

Inicie su proyecto con este iniciador para crear aplicaciones web de tutoriales y documentos potentes y flexibles. Incluye las siguientes características:

• Escribir usando Markdown / MDX
• Tema de estilo GitBook
• Resaltado de sintaxis usando Prism [Bonus: Code diff highlighting]
• Integración de búsqueda con Algolia
• Aplicación web progresiva, funciona sin conexión
• Integración de Google Analytics
• Barra lateral de navegación generada automáticamente, tabla de contenido, anterior/siguiente
• Alternar modo oscuro
• Editar en GitHub
• Totalmente personalizable
• Incorporaciones enriquecidas y editor de código en vivo usando MDX
• Implementación sencilla: implementación en Netlify/Now.sh/Docker

21- Fundación y Netlify CMS

Un iniciador para lanzar su sitio web personal increíblemente rápido y un blog, creado con gatsby y Netlificar CMS.

Características destacadas:

Un blog y un sitio web personal con Netlify CMS.

• Diseño web adaptable
• Modo oscuro/claro
• Personaliza el color del tema desde CMS

22- Gat
sby + Netlify CMS + Iniciador TailwindCSS

Este repositorio contiene un sitio web empresarial de ejemplo creado con gatsby, Netlificar CMS y Viento de colaCSS: Enlace de demostración.

Sigue el Arquitectura JAMstack utilizando Git como única fuente de información, y Netlificar para implementación continua y distribución CDN.

Inicie su proyecto con este texto estándar predeterminado. Este iniciador se entrega con los archivos de configuración principales de Gatsby que puede necesitar para comenzar a funcionar rápidamente con el generador de aplicaciones ultrarrápido para React.

23- sudadera-gatsby-starter

gatsby-starter-hoodie es un iniciador de gatsby creado para escribir blogs de tecnología. Se admiten Markdown, resaltado de código en varios lenguajes de programación y sintaxis Katex. Además, puedes categorizar fácilmente los artículos en etiquetas y series.

Comience su blog con una sudadera con capucha estilo gatsby cuidadosamente diseñada que admita el modo oscuro.

Las características de gatsby-starter-hoodie incluyen:

• Soporte de rebajas
• Resaltado de código
• Sintaxis de Katex
• Modo oscuro (Responde a la configuración del sistema operativo)
• Categorización de etiquetas
• Categorización de series
• Web responsiva
• SEO
• Declaración (widget de comentario)

Etiquetas

Plantillas de página de destino Código abierto React Gatsby TypeScript JavaScript CMS Blogs Lista de generadores estáticos