gatsby starter gcn

gatsby-starter-gcn

Un modèle de démarrage pour créer d'étonnants sites Web statiques avec Gatsby, Contentful et Netlify. Inspiré de Gatsby-contentful-starter.

Caractéristiques

• Intégration de contenu avec du contenu fictif prêt à l'emploi
• Intégration Netlify comprenant un formulaire de contact prédéfini
• Conception réactive minimale - conçue pour être personnalisée ou démontée
• Logique de pagination
• Interface utilisateur du thème
• Composant optimisé pour le référencement
  • Prise en charge du partage OpenGraph
  • Génération de plan de site
• Google Analytics
• Application Web progressive
• Assistance hors ligne
• Module Gatsby Standard pour le linting Javascript avec StandardJS
• Prise en charge de Stylelint pour les composants stylisés pour pelucher le CSS dans JS

Démo

https://gcn.netlify.app/

Commencer

Installer

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

Ou via la CLI Gatsby

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

Configuration du contenu

1. Inscrivez-vous à Contentful et créez un nouvel espace vide

2. yarn run setup

3. Entrez les informations demandées pour votre espace Contentful trouvées ici : app.contentful.com → Paramètres de l'espace → Clés API . Vous devrez fournir à la fois une clé API standard (premier onglet) et une clé de gestion (deuxième onglet).

Personnalisation

Données du site Web

Modifier les données siteMeta dans /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
  }

Remarque : Si vous ne voyez pas vos modifications reflétées lors du développement local, vous devrez peut-être exécuter yarn clean suivi d'un redémarrage du serveur via yarn develop .

Interface utilisateur du thème

Modifier /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' ,
  } ,
}

Utiliser la norme Gatsby

1. Vérifiez rapidement votre code pour les erreurs avec le script yarn test
2. Vous pouvez consulter le fichier README de Gatsby Standard pour plus de détails sur la façon d'intégrer les modules Gatsby Standard, Stylelint et Prettier inclus dans ce projet dans votre éditeur de texte.

Contenu et référencement

1. Vous pouvez remplacer les fichiers share.jpg et favicon.png dans le répertoire static/images .
2. Les méta descriptions sont définies dans Contentful. Si vous choisissez de laisser ce champ vide sur les nouvelles publications, un extrait de 320 caractères de la publication/page sera utilisé à la place.

Déploiement

Déploiement manuel de Netlify

1. Exécutez gatsby build

2. Glissez et déposez le dossier /public/ dans Netlify

Déploiement de Netlify depuis Git (recommandé)

1. Nouveau site Web Netlify de Git

2. Connectez-vous à GitHub et sélectionnez votre dépôt

3. Accédez à Netlify : Paramètres → Créer et déployer → Créer des variables d'environnement . Ajoutez les variables d'environnement suivantes à l'aide de Space ID et de l'API Content Delivery - jeton d'accès de Contentful. De plus, si vous le souhaitez, vous pouvez saisir un identifiant Google Analytics. Les variables doivent être nommées exactement ainsi pour fonctionner correctement.

 ACCESS_TOKEN
SPACE_ID
GOOGLE_ANALYTICS

4. Accédez à Netlify : Déploie . Cliquez sur Trigger deploy pour déclencher manuellement un déploiement afin de confirmer que le site Web est construit avec succès à l'aide de vos variables d'environnement de construction. À ce stade, sachez que chaque fois que vous appuyez sur master un déploiement démarre automatiquement et est publié en production.

Paramètres supplémentaires

Webhook de contenu (facultatif)

1. Accédez à Netlify : Paramètres → Construire et déployer → Construire des hooks . Créez un nouveau hook de construction.

2. Accédez à Contentful : app.contentful.com → Paramètres d'espace → Webhooks . Créez un webhook à l'aide de l'URL de build Netlify que vous venez de créer et configurez les événements qui doivent déclencher la build en production. Par exemple, ce qui suit reconstruira le site Web de production à chaque fois qu'un article ou une page est publié, non publié ou supprimé :

Notifications du formulaire Netlify (facultatif)

1. Accédez à Netlify : Formulaires → Notifications

2. Cliquez sur la liste déroulante Ajouter une notification et sélectionnez la méthode de notification souhaitée.

Conseils utiles

• Si vous apportez des modifications à votre espace Contentful pendant l'exécution yarn develop vous devrez l'arrêter et réexécuter la commande pour voir les modifications reflétées. Par exemple, une nouvelle publication ou une nouvelle page n'apparaîtra pas automatiquement tant que le site Web n'aura pas été reconstruit.
• NE stockez PAS vos jetons d’accès Contentful ou vos identifiants d’espace n’importe où dans GitHub. Traitez-les comme des mots de passe.