gatsby starter landing page

Démarreur de page de destination Gatsby

Un démarreur de page de destination simple, minimal et facile à utiliser, sans toutes sortes de cloches et de sifflets que vous devrez simplement supprimer plus tard. Créez une belle page de destination ultra rapide à partir d'un modèle simple avec une seule page qui a déjà fière allure.

Conditions préalables

Si la CLI Gatsby n’est pas encore installée, faites-le d’abord.

npm install --global gatsby-cli

La CLI Gatsby utilise Node et npm dont vous devrez également être installé. Plus d’informations peuvent être trouvées sur GatsbyJS.org.

Commencer

Installez le démarreur à l'aide de la nouvelle commande Gatsby.

gatsby new landing-page https://github.com/gillkyle/gatsby-starter-landing-page.git

Accédez au répertoire du projet et lancez le site.

 cd landing-page && gatsby develop

Le site sera ouvert dans votre navigateur par défaut sur http://localhost:8000

Modifiez le code dans le /src , enregistrez vos modifications et elles se rechargeront instantanément dans le navigateur.

? Qu'y a-t-il à l'intérieur ?

Le démarreur minimal de page de destination est livré avec quelques plugins déjà installés, mais son objectif principal est de rester simple et propre. Ces éléments sont inclus par défaut :

• ? Gatsby Image : les images ajoutées au dossier src/images sont automatiquement optimisées par le plugin gatsby-image et peuvent être intégrées dans des composants avec un chargement paresseux et des effets de flou.
• Analytics : ajoutez votre identifiant de suivi Google Analytics à gatsby-config.js pour commencer automatiquement à suivre les visiteurs du site
• ? Plan du site : toutes les nouvelles pages ajoutées au site sont automatiquement assemblées dans un plan du site via gatsby-plugin-sitemap
• ? Thème de couleur : le fichier src/styles/constants.js contient un ensemble de couleurs et de styles par défaut qui sont appliqués en ligne aux composants du site et qui peuvent être remplacés par vos propres styles.

? Expérience

Si vous souhaitez essayer de jouer avec le code source dans un terrain de jeu en ligne, vous pouvez ouvrir le dépôt dans Codesandox avec ce bouton.

? Déployer

Si vous souhaitez simplement voir un site en ligne très rapidement, vous pouvez déployer une copie du site sur Netlify avec ce bouton.

Pour créer une version optimisée du site, exécutez cette commande

gatsby build

Un dossier /public sera assemblé et pourra être déployé sur un service tel que Netlify, Surge, GitHub Pages, AWS S3, l'hébergement Firebase ou votre propre serveur de fichiers.