Démarrez votre projet avec ce modèle. Ce lanceur est livré avec les fichiers et paramètres Gatsby les plus essentiels dont vous pourriez avoir besoin pour être opérationnel à toute vitesse avec le générateur d'applications ultra-rapide pour React.
Créez un site Web Gatsby.
Utilisez la CLI Gatsby pour créer un nouveau site, en spécifiant ce Template .
# Crie um novo site do Gatsby usando esse Template
gatsby new my-project https://github.com/solrachix/gatsby-template
Commencez à développer.
Accédez au répertoire de votre nouveau site et lancez-le.
cd my-project/
gatsby develop
Ouvrez le code et commencez à éditer !
Votre site fonctionne désormais sur http://localhost:8000
!
Remarque : Vous verrez également un deuxième lien : http://localhost:8000/___graphql
. Il s'agit d'un outil que vous pouvez utiliser pour expérimenter l'interrogation de vos données. Apprenez-en plus sur l'utilisation de cet outil dans le [Tutoriel Gatsby](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql).
Ouvrez le répertoire my-project
dans l'éditeur de code de votre choix et modifiez src/pages/index.js
. Enregistrez vos modifications et le navigateur se mettra à jour en temps réel !
Progressive Web App est un terme utilisé pour désigner une nouvelle méthodologie de développement logiciel. Contrairement aux applications traditionnelles, une Progressive Web App peut être considérée comme une évolution hybride entre des pages Web classiques et une application mobile.
Le manifeste de l'application Web (qui fait partie de la spécification PWA) alimenté par le plugin manifest permet aux utilisateurs d'ajouter votre site Web à l'écran d'accueil de la plupart des navigateurs mobiles - voir ici. Le manifeste fournit la configuration et les icônes du téléphone.
Ce plugin fournit plusieurs fonctionnalités en plus de la configuration du manifeste pour vous faciliter la vie, ce sont :
Chacune de ces fonctionnalités dispose d'une configuration étendue disponible afin que vous ayez toujours le contrôle.
Où rechercher ces plugins ? Cliquez ici et recherchez
Un aperçu rapide des fichiers et répertoires de niveau supérieur que vous verrez dans ce modèle Gatsby.
.
├── node_modules
├── config/
│ └── MetaData.js
├── src/
│ ├── assets/
│ │ └── images/
│ │ └── logo.png
│ ├── components/
│ ├── Pages/
| │ └── index.js
│ ├── posts/
| │ └── 2020-04-08--nosso-primeiro-post/
| │ └── index.md
│ ├── styles/
│ | ├── themes/
│ | └── GlobalStyles.js
│ ├── templates/
│ | ├── post.js
│ | └── tag.js
│ └── html.js
├── static/
│ ├── favicon.ico
│ └── robots.txt
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md
Fichiers/dossiers | Description |
---|---|
/node_modules | Ce répertoire contient tous les modules de code dont dépend votre projet (packages npm) qui sont automatiquement installés. |
/src | Ce répertoire contiendra tout le code lié à ce que vous verrez sur le front-end de votre site Web (ce que vous voyez dans le navigateur), comme l'en-tête du site Web ou un modèle de page. src est une convention pour "code source". |
.gitignore | Ce fichier indique à git quels fichiers il ne doit pas suivre/ne pas conserver d'historique des versions. |
.plus jolirc | il s'agit d'un fichier de configuration pour Prettier. Prettier est un outil qui vous aide à maintenir la cohérence du formatage de votre code. |
* gatsby-browser.js | C'est dans ce fichier que Gatsby espère trouver toute utilisation des API du navigateur Gatsby (si elles existent). Cela permet la personnalisation/extension des paramètres Gatsby par défaut qui affectent le navigateur. |
gatsby-config.js | Il s'agit du fichier de configuration principal d'un site Web Gatsby. C'est ici que vous pouvez spécifier des informations sur votre site (métadonnées), telles que le titre et la description de votre site, les plugins Gatsby que vous souhaitez inclure, etc. (Consultez les documents de configuration pour plus de détails). |
gatsby-node.js | C'est dans ce fichier que Gatsby s'attend à trouver toute utilisation des API Gatsby Node (si elles existent). Cela permet la personnalisation/extension des paramètres Gatsby par défaut qui affectent certaines parties du processus de création du site. |
gatsby-ssr.js | C'est dans ce fichier que Gatsby espère trouver toute utilisation des API de rendu du serveur Gatsby (si elles existent). Cela permet de personnaliser les paramètres Gatsby par défaut qui affectent le rendu côté serveur. |
LICENCE | Gatsby est sous licence MIT |
package-lock.json | (voir package.json ci-dessous, en premier). Il s'agit d'un fichier généré automatiquement basé sur les versions exactes des dépendances npm qui ont été installées pour votre projet. (Vous ne modifiez pas ce fichier directement). |
package.json | Un fichier manifeste pour les projets Node.js, qui inclut des éléments tels que des métadonnées (nom du projet, auteur, etc.). Ce manifeste permet à npm de savoir quels packages installer pour votre projet. |
LISEZMOI.md | Un fichier texte contenant des informations de référence utiles sur votre projet. |
**** |
Vous cherchez plus de conseils ? La documentation complète de Gatsby se trouve [sur le site Web] (https://www.gatsbyjs.org/). Voici quelques points de départ :
Pour la plupart des développeurs, je recommande de commencer par notre [tutoriel approfondi pour créer un site Web avec Gatsby] (https://www.gatsbyjs.org/tutorial/). Cela commence sans aucune hypothèse sur votre niveau de capacité et passe par chaque étape du processus.
Pour plonger directement dans les exemples de code, visitez la [documentation] (https://www.gatsbyjs.org/docs/). En particulier, consultez les sections Guides , API Reference et Advanced Tutorials dans la barre latérale.