Construire un blog avec Vue et Markdown en utilisant Gridsome

Entrez dans le monde de la génération de sites statiques et du JAMstack avec Gridsome. Apprenez à créer un blog à l'aide de Markdown et GraphQL, puis à le déployer sur Netlify.

Le Web évolue sans cesse et il est essentiel de rester à jour en tant que développeur. Dans cet article, je vais vous présenter le monde de la génération de sites statiques et de JAMstack avec Gridsome. À la fin de l'article, nous créerons un blog en utilisant Markdown en tant que contenu généré et GraphQL pour interroger les publications à afficher sur les pages, puis nous verrons comment le déployer sur Netlify.

Générateurs de sites statiques font partie d'une nouvelle approche hybride du développement Web qui vous permet de créer un site Web puissant localement sur votre ordinateur, mais de pré-construire le site dans des fichiers statiques à déployer. JAMstack est un nouveau moyen de créer des sites Web et des applications offrant de meilleures performances, une sécurité accrue, un coût réduit de la mise à l'échelle et une meilleure expérience des développeurs.

Table des matières:

1. Introduction à Gridsome
2. Conditions préalables
3. Mise en place du projet Gridsome
4. Création d'un blog avec Gridsome
5. Création de la mise en page
6. Affichage de la mise en page
7. Déploiement du blog pour Netlify
8. Conclusion

. Gridsome

Gridsome est un générateur de site statique alimenté par Vue.js permettant de créer des sites Web rapides et sécurisés pouvant être déployés n'importe où. Il est donc facile pour les développeurs de créer des sites Web modernes de JAMstack.

Gridsome est livré avec certaines fonctionnalités qui sont difficiles à manquer, ce qui en fait l'un des générateurs de sites statiques les plus recherchés.

• Développement local avec Hot Reloading – Visualisation des modifications en temps réel tout au long du développement
• Write Vue.js Code – Une infrastructure frontale légère et abordable.
• Couche de données GraphQL – Gestion de données centralisée pour toutes vos données.
• Routage automatique des pages – Créez et gérez rapidement des pages avec des fichiers.
• Prise en charge progressive des images – Redimensionnement automatique, optimisation et chargement progressif des images.
• Prétraitement automatique des pages – Les pages sont chargées en arrière-plan pour navigation rapide.
• Code à optimisation automatique – Découpez rapidement le code et l'optimisation des ressources.
• Création rapide de pages statiques – Déployez en toute sécurité et rapidement sur n'importe quel hôte Web statique.
• Plugins de source de données – Ajoutez des données à partir de fichiers Headless CMSs, APIs ou Markdown populaires.

Conditions préalables

Pour pouvoir suivre ce didacticiel, vous devez posséder des connaissances de base sur les éléments suivants:

Configuration d'un projet enrichissant

Nous aurons besoin de mettre en place un ne w Projet Gridsome, et pour ce faire, nous devrons exécuter les commandes suivantes:

Pour la première étape, installez le CLI Gridsome sur votre ordinateur à l’aide de npm ou de fil.

 $ npm install --global @gridsome / cli ou
$ fil global add @ gridsome / cli

La prochaine étape, après l'installation de la CLI, consiste à créer un nouveau projet intitulé Telerik-blog et à exécuter le projet.

 // crée un nouveau projet impressionnant.
$ gridsome crée un blog telerik
$ cd telerik-blog
$ gridsome develop

Après avoir exécuté ces commandes, votre serveur de développement local doit être exécuté à http: // localhost: 8080 avec l'exemple de page affiché ci-dessous.

Si nous essayons de modifier quelque chose sur cette page de mise en page, nous verrons que cela change automatiquement ce que nous avons à l'écran. Ceci est le résultat de la fonctionnalité Gridsome Hot Reloading dont nous avons parlé plus tôt.

Création d'un blog avec Gridsome

Commençons par décrire ce que nous essayons de faire avec le blog: nous en aurons un page avec une liste de messages et chaque message avec le contenu dans Markdown. Pour ce faire, nous devrons installer un Gridsome Plugin appelé gridsome / système de fichiers source qui aide à transformer les fichiers en contenu pouvant être récupéré avec GraphQL dans vos composants. Continuez et installez le paquet en utilisant cette commande:

 yarn add @ gridsome / source-filesystem ou
npm install @ gridsom / source-filesystem

et configurez-le dans le fichier gridsome.config.js :

 module.exports = {
  siteName: 'Gridsome Blog',
  siteDescription: 'Un blog simple conçu avec Gridsome',
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'content/posts/**/*.md',
        typeName: 'Post',
        route: '/blog/:slug'
      }
    }
  ]
}

La configuration ci-dessus est ce dont nous avons besoin pour configurer le plug-in source-filesystem . Les options définies ici:

• Chemin: l'emplacement du contenu de réduction que nous allons utiliser dans les publications.
• typeName: le type et le nom du modèle GraphQL. Un fichier .vue dans src / templates doit correspondre à typeName pour avoir un modèle.
• itinéraire: Il s'agit de l'itinéraire suivi par chaque publication. c'est-à-dire localhost: 8080 / blog / new-post

Gridsome utilise Layouts comme wrapper pour les pages et les modèles. Les dispositions contiennent des composants tels que l'en-tête, le pied de page, les barres latérales, etc., ainsi qu'un composant slot où le contenu provenant de pages et de modèles est inséré.

Le bloc de code ci-dessus est notre composant Default.vue . Nous pouvons aller de l'avant et vérifier le style utilisé dans le GitHub Repo .

Création de la mise en page

La ​​mise en page sera celle où tous les articles du blog seront répertoriés et serviront également de page d'accueil. Dans Gridsome, Les pages sont utilisées pour les pages normales et pour la liste et les collections GraphQL . Dans ce cas, nos articles de blog sont la collection. L'URL de la page est générée en fonction de l'emplacement et du nom du fichier. Par exemple, si nous créons un fichier dans le répertoire des pages et que nous le nommons Index.vue il sera traité comme index.html qui correspond à la page d'accueil. La même chose s’applique si nous créons un fichier et l’appelons About.vue – il sera traité comme about.html et sera lié comme / about . C'est ainsi que fonctionne le routage dans Pages. Parce que nous voulons seulement afficher tous les posts sur une seule page, nous pouvons continuer et créer le fichier Index.vue ou, si nous en avons déjà un pour nous, nous pouvons l'utiliser .

Notre Index.vue devrait ressembler à ceci:

Et avec cela, nous devrions avoir cette page lorsque nous allons sur la page d'accueil.

Maintenant que nous avons la page d'accueil, nous pouvons aller de l'avant et créer une liste de blog messages et afficher que sur la page. Nous pouvons créer un fichier PostList.vue dans le répertoire des composants, dans lequel nous allons créer la mise en page permettant d'afficher une liste d'articles pour notre blog.

Dans ce fichier, nous avons le contenu nécessaire pour afficher une liste de publications et nous ajoutons également un post accessoires qui nous permettent de transmettre des données du composant parent à la PostList. composant enfant.

Retournez à la page Index.vue du répertoire Pages. N'oubliez pas que j'ai déjà mentionné que Gridsome dispose d'une gestion de données centralisée pour toutes vos données, qui dans notre cas est GraphQL . Il utilise et pour extraire des données dans des pages, des modèles et des composants. Ici, nous devons extraire tous les articles de notre répertoire de contenu écrits en Markdown et les afficher dans notre composant Vue.

 
requête {
  allPost {
    le compte total
    bords {
      noeud {
        identifiant
        Titre
        il est temps de lire
        la description
        date (format: "J MMMM AAAA")
        chemin
      }
    }
  }
}

Nous avons maintenant le contenu dans le composant Vue que nous pouvons transmettre au composant PostList.vue comme ceci:

Affichage de la présentation de la publication

Nous avons maintenant une liste des publications du dossier content affichées. L'étape suivante consiste à afficher un seul message lorsque l'utilisateur clique sur l'un de ces messages. Nous allons utiliser un modèle pour gérer cela. Dans Gridsome, un modèle est utilisé pour afficher une vue unique dans collections GraphQL . Ajoutez un fichier Post.vue dans le répertoire des modèles avec le contenu suivant:

Pour interroger le contenu d’un article, nous allons utiliser une requête de page avec les éléments suivants:

 
query Post ($ path: String!) {
   post: post (chemin: $ chemin) {
    identifiant
    Titre
    contenu
    date (format: "J MMMM AAAA")
    il est temps de lire
  }
}

Cela fait, lorsque vous cliquez sur pour en savoir plus sur la page d'accueil, vous devriez voir le contenu d'un article affiché avec une slug en utilisant le titre de l'article comme nous l'avons configuré dans gridsome.config.js .

Déploiement du blog avec Netlify

Notre blog est complet! La prochaine étape consiste à déployer, et pour cela, nous utiliserons Netlify . Rendez-vous sur le site Web de Netlify et créez un nouveau site. Assurez-vous d'avoir votre base de code sur GitHub. Vous pouvez trouver le dépôt pour ce projet sur GitHub . La prochaine étape consiste à ajouter la configuration suivante:

Après avoir créé un nouveau site sur Netlify, un modal vous invite à configurer notre site. . Allez-y et configurez la branche à déployer en tant que maître et les configurations de construction doivent être gridesome build en tant que commande et dist en tant que répertoire de publication. Ensuite, nous pouvons cliquer sur le site de déploiement et notre site sera déployé avec une URL à visiter en un rien de temps. L'URL de ce projet est disponible ici ici .

Conclusion

Dans cet article, nous avons montré comment créer un blog dans Vue.js avec Gridsome et Markdown. Vous pouvez voir que son implémentation peut être simple et qu'en un rien de temps, vous avez un blog personnel en cours d'exécution. N'hésitez pas à consulter les GitHub Repo et Gridsome Documentation pour en savoir plus.

Ce blog vous a été présenté par Kendo UI

Vous souhaitez en savoir plus sur la création de grands applications Web? Tout commence avec Kendo UI – la bibliothèque complète de composants d'interface utilisateur qui vous permet de créer rapidement des applications réactives de haute qualité. Il comprend tout ce dont vous avez besoin, des grilles et graphiques aux menus déroulants et jauges.