{"id":73678,"date":"2023-10-11T15:21:37","date_gmt":"2023-10-11T14:21:37","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=73678&preview=true&preview_id=73678"},"modified":"2023-10-17T11:46:41","modified_gmt":"2023-10-17T10:46:41","slug":"vuepress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/vuepress\/","title":{"rendered":"Cr\u00e9ez et personnalisez un site de documentation et de blog rapide avec VuePress"},"content":{"rendered":"

Dans le paysage num\u00e9rique actuel, qui \u00e9volue rapidement, il est essentiel de disposer d’une documentation ou d’un site de blog bien organis\u00e9 et visuellement attrayant pour attirer l’attention de votre public et maintenir son int\u00e9r\u00eat. Mais comment y parvenir sans consacrer des heures interminables au d\u00e9veloppement web<\/a> ?<\/p>\n

Cet article explique comment cr\u00e9er et personnaliser un site de documentation et de blog rapide en utilisant VuePress, un g\u00e9n\u00e9rateur de site statique<\/a> (SSG) minimaliste mais puissant.<\/p>\n

\"D\u00e9monstration
D\u00e9monstration de la documentation et du blog VuePress.<\/figcaption><\/figure>\n
<\/div><\/kinsta-auto-toc>\n

Qu’est-ce que VuePress ?<\/h2>\n

VuePress est un framework open source<\/a> sp\u00e9cialis\u00e9 dans la cr\u00e9ation de sites web statiques, principalement orient\u00e9s vers la documentation et les blogs. Il a \u00e9t\u00e9 cr\u00e9\u00e9 par Evan You<\/a>, le g\u00e9nie de Vue.js<\/a>, et il incarne la philosophie de simplicit\u00e9 et de facilit\u00e9 d’utilisation pour laquelle Vue.js est connu.<\/p>\n

Pourquoi utiliser VuePress ?<\/h3>\n

Voici quelques raisons convaincantes pour lesquelles VuePress pourrait \u00eatre le choix id\u00e9al pour vous.<\/p>\n

    \n
  1. Simplicit\u00e9 Markdown :<\/strong> VuePress simplifie la cr\u00e9ation de contenu avec Markdown, ce qui facilite la r\u00e9daction et la structuration du contenu sans formatage complexe.<\/li>\n
  2. Int\u00e9gration Vue.js :<\/strong> VuePress int\u00e8gre Vue.js de mani\u00e8re transparente, ce qui permet d’utiliser des \u00e9l\u00e9ments web interactifs et dynamiques pour une exp\u00e9rience utilisateur attrayante.<\/li>\n
  3. Performance et personnalisation :<\/strong> VuePress offre d’excellentes performances avec des sites web statiques \u00e0 chargement rapide et des options de personnalisation \u00e9tendues pour s’adapter \u00e0 votre style et \u00e0 vos besoins.<\/li>\n<\/ol>\n

    D\u00e9marrer avec VuePress<\/h2>\n

    Avant de plonger dans VuePress, assurez-vous que Node.js<\/a> ou Yarn Classic<\/a> est install\u00e9 sur votre ordinateur. Il y a deux fa\u00e7ons de d\u00e9marrer avec VuePress : soit vous utilisez le g\u00e9n\u00e9rateur create-vuepress-site<\/a>, qui vous aidera \u00e0 construire la structure de base de votre site VuePress, soit vous utilisez l’installation manuelle.<\/p>\n

    Pour cet article, nous allons utiliser la m\u00e9thode d’installation manuelle.<\/p>\n

      \n
    1. Cr\u00e9ez un nouveau r\u00e9pertoire et modifiez-le :<\/li>\n<\/ol>\n
      mkdir vuepress-starter && cd vuepress-starter<\/code><\/pre>\n
        \n
      1. Initialisez avec votre gestionnaire de paquets pr\u00e9f\u00e9r\u00e9. Pour cet article, nous utiliserons Yarn :<\/li>\n<\/ol>\n
        yarn init<\/code><\/pre>\n
          \n
        1. Installez VuePress dans votre projet en tant que d\u00e9pendance de d\u00e9veloppeur :<\/li>\n<\/ol>\n
          yarn add -D vuepress<\/code><\/pre>\n
            \n
          1. Cr\u00e9ez un dossier docs<\/strong> pour contenir tout votre code et cr\u00e9ez ensuite un fichier README.md<\/strong>, qui sert de fichier d’index de votre projet, similaire \u00e0 index.html <\/strong>:<\/li>\n<\/ol>\n
            mkdir docs && echo '# Hello VuePress' > docs\/README.md<\/code><\/pre>\n
              \n
            1. Ouvrez votre projet dans un \u00e9diteur de code et ajoutez les scripts suivants \u00e0 votre fichier package.json<\/strong> afin de pouvoir servir et construire votre site :<\/li>\n<\/ol>\n
              \"scripts\": {\n    \"dev\": \"vuepress dev docs\",\n    \"build\": \"vuepress build docs\"\n  },<\/code><\/pre>\n
              Vous pouvez maintenant servir votre site en ex\u00e9cutant la commande yarn dev<\/code>. VuePress d\u00e9marrera votre serveur de d\u00e9veloppement \u00e0 l’adresse http:\/\/localhost:8080.<\/p>\n
              \"Defualt<\/a>
              Th\u00e8me par d\u00e9faut pour l’installation manuelle de VuePress.<\/figcaption><\/figure>\n
              Vous avez maintenant cr\u00e9\u00e9 un site de documentation. Vous remarquerez que VuePress propose d’embl\u00e9e un th\u00e8me par d\u00e9faut propre et minimaliste. Cependant, il est hautement personnalisable, ce qui vous donne la libert\u00e9 de cr\u00e9er un aspect et une convivialit\u00e9 uniques pour votre site web.<\/p>\n
              Cr\u00e9er des pages de documentation<\/h2>\n
              VuePress suit une structure de r\u00e9pertoire simple pour organiser la documentation. Dans le dossier de votre projet, vous trouverez le r\u00e9pertoire docs<\/strong> que nous avons cr\u00e9\u00e9, o\u00f9 vous pouvez cr\u00e9er des fichiers Markdown<\/a> (.md<\/code>) pour vos pages de documentation.<\/p>\n
              Par exemple, vous pouvez cr\u00e9er des fichiers tels que get-started.md<\/strong>, usage.md<\/strong> et troubleshooting.md<\/strong>. Ces fichiers deviennent automatiquement des itin\u00e9raires accessibles lorsque vous naviguez vers http:\/\/localhost:8080\/getting-started, http:\/\/localhost:8080\/usage et http:\/\/localhost:8080\/troubleshooting.<\/p>\n
              Pour am\u00e9liorer l’organisation de votre documentation, vous pouvez cr\u00e9er des dossiers d\u00e9di\u00e9s aux pages de documentation connexes. Par exemple, vous pouvez cr\u00e9er un dossier appel\u00e9 guide<\/strong> et l’organiser avec des guides sp\u00e9cifiques comme using-kinsta-stsh.md<\/strong>. Lorsque vous utilisez cette structure, le contenu de using-kinsta-stsh.md<\/strong> devient accessible via une URL telle que http:\/\/localhost:8080\/guide\/using-kinsta-stsh.<\/p>\n
              Vous pouvez \u00e9galement cr\u00e9er un fichier README.md<\/strong> ou index.md<\/strong> \u00e0 la racine du dossier guide<\/strong>. Ce fichier servira de page d’index, permettant aux utilisateurs de naviguer vers http:\/\/localhost:8080\/guide\/ et d’acc\u00e9der facilement au contenu \u00e0 l’aide d’une barre lat\u00e9rale que vous apprendrez \u00e0 configurer dans la section suivante.<\/p>\n
              Dans cet exemple de d\u00e9p\u00f4t VuePress<\/a>, vous remarquerez que tous ces fichiers ont \u00e9t\u00e9 cr\u00e9\u00e9s et que du contenu markdown a \u00e9t\u00e9 ajout\u00e9 \u00e0 chacun d’entre eux. N’h\u00e9sitez pas \u00e0 cr\u00e9er vos fichiers selon vos pr\u00e9f\u00e9rences, soit en partant de z\u00e9ro pour r\u00e9pondre \u00e0 vos besoins sp\u00e9cifiques, soit en vous inspirant du contenu disponible dans le d\u00e9p\u00f4t.<\/p>\n
              Personnaliser l’apparence de VuePress<\/h2>\n
              Une fois que vous avez cr\u00e9\u00e9 votre site de documentation avec du contenu, vous pouvez trouver qu’il est difficile de naviguer, surtout si vous avez beaucoup de fichiers \u00e0 g\u00e9rer. VuePress vous permet toutefois de personnaliser la structure de navigation de votre site pour le rendre plus convivial et mieux organis\u00e9.<\/p>\n
              Pour personnaliser l’apparence et la navigation de votre site, cr\u00e9ez un dossier .vuepress<\/strong> dans le r\u00e9pertoire racine de votre projet. Ce dossier contiendra les fichiers de configuration et les ressources li\u00e9es \u00e0 votre site VuePress.<\/p>\n
              Configuration de la navigation<\/h3>\n
              Dans le dossier .vuepress<\/strong>, cr\u00e9ez un fichier config.js.<\/strong> Vous pouvez \u00e9galement utiliser d’autres formats de fichiers tels que YAML (.yml), TOML (.toml) ou TypeScript (.ts) pour votre configuration.<\/p>\n
              Dans votre fichier config.js<\/strong>, vous pouvez d\u00e9finir la structure de navigation de votre site \u00e0 l’aide de l’objet themeConfig<\/code>. Voici un exemple de configuration :<\/p>\n
              module.exports = {\n    title: 'Kinsta Vuepress',\n    description: 'A VuePress QuickStart for Kinsta',\n    themeConfig: {\n        nav: [\n            {\n                text: 'Guide',\n                link: '\/guide\/',\n            },\n            {\n                text: 'Static Site Hosting',\n                link: 'https:\/\/sevalla.com\/static-site-hosting\/',\n            },\n        ],\n        sidebar: {\n            '\/guide\/': [\n                {\n                    title: 'Guide',\n                    collapsable: false,\n                    children: ['', 'using-kinsta-stsh'],\n                },\n            ],\n        },\n    },\n};<\/code><\/pre>\n
              Dans cet exemple, nous configurons les sites title<\/code> et description<\/code>, nous d\u00e9finissons les liens de navigation et nous mettons en place une colonne lat\u00e9rale pour la section \/guide\/<\/code>.<\/p>\n
              Le tableau nav<\/code> sp\u00e9cifie les liens de navigation en haut de votre site. L’objet sidebar d\u00e9finit la structure de la colonne lat\u00e9rale pour des sections sp\u00e9cifiques. Dans ce cas, il est configur\u00e9 pour la section \/guide\/<\/code>.<\/p>\n
              Vous pouvez en savoir plus sur la configuration des barres de navigation<\/a> dans la documentation VuePress.<\/p>\n
              Style<\/h3>\n
              VuePress vous permet de personnaliser l’apparence de votre site \u00e0 l’aide de styles. Vous pouvez soit remplacer les styles par d\u00e9faut \u00e0 l’aide de certaines variables d\u00e9finies, soit d\u00e9finir votre propre style. Pour cela, cr\u00e9ez un dossier styles<\/strong> dans le dossier .vuepress<\/strong><\/p>\n
              Pour appliquer des modifications simples au style du pr\u00e9-r\u00e9glage par d\u00e9faut ou d\u00e9finir des variables \u00e0 utiliser ult\u00e9rieurement, vous pouvez cr\u00e9er un fichier palette.styl<\/strong> dans le dossier .vuepress\/styles<\/strong>. Voici quelques variables pr\u00e9d\u00e9finies que vous pouvez modifier :<\/p>\n
              \/\/ colors\n$accentColor = #5333ED\n$textColor = #2c3e50\n$borderColor = #eaecef\n$codeBgColor = #282c34\n$arrowBgColor = #ccc\n$badgeTipColor = #42b983\n$badgeWarningColor = darken(#ffe564, 35%)\n$badgeErrorColor = #DA5961\n\n\/\/ layout\n$navbarHeight = 3.6rem\n$sidebarWidth = 20rem\n$contentWidth = 740px\n$homePageWidth = 960px\n\n\/\/ responsive breakpoints\n$MQNarrow = 959px\n$MQMobile = 719px\n$MQMobileNarrow = 419px<\/code><\/pre>\n
              Ces variables peuvent \u00eatre utilis\u00e9es pour maintenir un style coh\u00e9rent sur l’ensemble de votre site. VuePress offre \u00e9galement un moyen pratique d’ajouter des styles suppl\u00e9mentaires. Vous pouvez cr\u00e9er un fichier index.styl<\/strong> dans le dossier .vuepress\/styles<\/strong> o\u00f9 vous pouvez utiliser la syntaxe CSS<\/a> normale :<\/p>\n
              .content {\n  font-size 30px\n}<\/code><\/pre>\n
              Pour en savoir plus sur le style de VuePress<\/a>, consultez la documentation officielle.<\/p>\n
              Utilisation de composants<\/h3>\n
              VuePress prend en charge l’utilisation de composants pour am\u00e9liorer la fonctionnalit\u00e9 et l’apparence de vos pages. Vous pouvez cr\u00e9er des composants Vue et les inclure dans vos fichiers Markdown. Cr\u00e9ez un composant<\/p>\n
              components dans .vuepres,<\/strong> puis tous les fichiers *.vue<\/code> trouv\u00e9s dans .vuepress\/components<\/strong> sont automatiquement enregistr\u00e9s en tant que composants globaux.<\/p>\n
              Par exemple, vous pouvez cr\u00e9er deux composants, HomeOptions.vue<\/strong> et HostingBanner.vue <\/strong>:<\/p>\n
              .\n\u2514\u2500 .vuepress\n   \u2514\u2500 components\n      \u251c\u2500 HomeOptions.vue\n      \u2514\u2500 HostingBanner.vue<\/code><\/pre>\n
              Dans ces fichiers de composants vue.js, vous pouvez ajouter des codes CSS. Ajoutons du code aux composants HomeOptions.<\/strong> vue et HostingBanner.vue.<\/strong><\/p>\n
              Ajoutez le code ci-dessous \u00e0 HomeOptions.vue <\/strong>:<\/p>\n
              <template>\n    <div class=\"options\">\n        <div class=\"option\">\n            <a\n                href=\"https:\/\/docs.sevalla.com\/templates\/overview\"\n                target=\"_blank\"\n            >\n                <h3>Quick Start Examples<\/h3>\n            <\/a>\n            <p>Explore quick start examples for setting up static sites.<\/p>\n        <\/div>\n        <div class=\"option\">\n            <a\n                href=\"https:\/\/docs.sevalla.com\/static-sites\/overviewgetting-started-static-site-hosting\/\"\n                target=\"_blank\"\n            >\n                <h3>Getting Started<\/h3>\n            <\/a>\n            <p>Learn how to get started with static site hosting.<\/p>\n        <\/div>\n        <div class=\"option\">\n            <a\n                href=\"https:\/\/docs.sevalla.com\/static-sites\/overviewmanage-static-sites\/\"\n                target=\"_blank\"\n            >\n                <h3>Manage Static Sites<\/h3>\n            <\/a>\n            <p>Discover how to efficiently manage your static sites.<\/p>\n        <\/div>\n    <\/div>\n<\/template>\n\n<style scoped>\n    a {\n        color: #2c3e50;\n    }\n    a:hover {\n        color: #5333ed;\n    }\n    .options {\n        display: flex;\n        gap: 10px;\n        margin: 40px 0;\n    }\n    .option {\n        border: 2px solid #eaecef;\n        border-radius: 5px;\n        padding: 10px;\n    }\n<\/style><\/code><\/pre>\n
              Ajoutez \u00e9galement le code ci-dessous \u00e0 HostingBanner.vue <\/strong>:<\/p>\n
              <template>\n    <div class=\"banner\">\n        <p>Host Your Static Site With Kinsta for Free!<\/p>\n        <a\n            href=\"https:\/\/docs.sevalla.com\/static-sites\/overview\"\n            target=\"_blank\"\n            class=\"btn\"\n            >Read More<\/a\n        >\n    <\/div>\n<\/template>\n\n<style> scoped>\n    .banner {\n        background: rgb(156, 85, 34);\n        background: linear-gradient(\n            90deg,\n            rgba(156, 85, 34, 1) 0%,\n            rgba(32, 50, 103, 1) 42%,\n            rgba(13, 18, 25, 1) 69%,\n            rgba(22, 47, 60, 1) 100%\n        );\n        color: #fff;\n        padding: 20px;\n        border-radius: 5px;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        flex-direction: column;\n    }\n    .banner p {\n        width: 600px;\n        font-size: 40px;\n        font-weight: bold;\n        text-align: center;\n        line-height: 50px;\n    }\n    .banner .btn {\n        border-radius: 5px;\n        padding: 15px;\n        color: #1f1f1f;\n        font-weight: bold;\n        background: #fff;\n        display: inline-block;\n        margin-bottom: 10px;\n    }\n    .banner .btn:hover {\n        background: #111319;\n        color: #fff;\n    }\n<\/style><\/code><\/pre>\n
              \u00c0 l’int\u00e9rieur de n’importe quel fichier Markdown, vous pouvez alors utiliser directement les composants (les noms sont d\u00e9duits des noms de fichiers) :<\/p>\n
              <HomeOptions\/>\n<HostingBanner\/><\/code><\/pre>\n
              Pour en savoir plus sur les composants dans VuePress<\/a>, consultez la documentation.<\/p>\n
              Personnaliser la page d’accueil<\/h3>\n
              Dans VuePress, le th\u00e8me par d\u00e9faut propose une page d’accueil pr\u00e9d\u00e9finie que vous pouvez utiliser pour cr\u00e9er un point de d\u00e9part attrayant et informatif pour votre site. Pour utiliser cette pr\u00e9sentation de page d’accueil, vous devez sp\u00e9cifier home: true<\/code> et inclure quelques m\u00e9ta-donn\u00e9es suppl\u00e9mentaires dans le frontmatter YAML de votre fichier README.md <\/strong>racine.<\/p>\n
              Voici un exemple d’article de t\u00eate YAML :<\/p>\n
              ---\nhome: true\nheroImage: \/hero.png\nheroText: Hero Title\ntagline: Hero subtitle\nactionText: Get Started \u2192\nactionLink: \/guide\/\nfeatures:\n- title: Simplicity First\n  details: Minimal setup with markdown-centered project structure helps you focus on writing.\n- title: Vue-Powered\n  details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.\n- title: Performant\n  details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.\nfooter: MIT Licensed | Copyright \u00a9 2018-present Evan You\n---<\/code><\/pre>\n
              Toutes ces configurations font que la page d’accueil de votre documentation ressemble \u00e0 ceci :<\/p>\n
              \"Page
              Page d’accueil par d\u00e9faut de VuePress.<\/figcaption><\/figure>\n
              Il convient de noter que vous pouvez d\u00e9sactiver les valeurs heroText<\/code> et tagline<\/code> ou toute autre valeur en d\u00e9finissant leurs champs correspondants \u00e0 null<\/code> si vous pr\u00e9f\u00e9rez une mise en page plus simple ou ne pas l’inclure. Tout contenu que vous incluez apr\u00e8s le frontmatter YAML (c’est-\u00e0-dire la section des m\u00e9tadonn\u00e9es) sera trait\u00e9 comme du Markdown normal et sera rendu apr\u00e8s la section des caract\u00e9ristiques.<\/p>\n
              Si vous souhaitez une page d’accueil enti\u00e8rement personnalis\u00e9e, VuePress prend \u00e9galement en charge les mises en page personnalis\u00e9es. En outre, vous pouvez cr\u00e9er un pied de page en texte riche en utilisant la syntaxe Markdown Slot, ce qui offre une plus grande flexibilit\u00e9 dans l’affichage du contenu du pied de page. Voici un exemple de d\u00e9finition d’un pied de page en texte enrichi :<\/p>\n
              ---\nhome: true\n---\n\n::: slot footer\nMade with \u2764\ufe0f by Kinsta. [Static Site Hosting](https:\/\/sevalla.com\/static-site-hosting\/)\n:::<\/code><\/pre>\n
              Dans ce cas, le contenu de la section ::: slot footer<\/code> vous permet d’inclure des liens et des informations suppl\u00e9mentaires dans la zone de pied de page de votre page d’accueil.<\/p>\n
              Maintenant que vous savez comment effectuer les personnalisations ci-dessus, ajoutez les composants cr\u00e9\u00e9s pr\u00e9c\u00e9demment \u00e0 la page d’accueil et supprimez certaines options afin d’am\u00e9liorer l’aspect de la page d’accueil :<\/p>\n
              ---\nhome: true\ntagline: A VuePress QuickStart for Kinsta\nactionText: Quick Start \u2192\nactionLink: \/guide\/\n---\n\n<HomeOptions\/>\n<HostingBanner\/>\n\n::: slot footer\nMade with \u2764\ufe0f by Kinsta. [Static Site Hosting](https:\/\/sevalla.com\/static-site-hosting\/)\n:::<\/code><\/pre>\n
              \"Utilisation
              Utilisation de composants sur la page d’accueil VuePress.<\/figcaption><\/figure>\n
              En suivant ces techniques de personnalisation de VuePress, vous pouvez cr\u00e9er un site de documentation qui non seulement fournit un contenu pr\u00e9cieux, mais offre \u00e9galement une excellente exp\u00e9rience utilisateur avec une navigation organis\u00e9e et un style attrayant.<\/p>\n
              Vous pouvez en savoir plus sur la personnalisation du th\u00e8me par d\u00e9faut<\/a> dans la documentation.<\/p>\n
              Cr\u00e9er une section blog avec VuePress<\/h2>\n
              Ajouter une section blog \u00e0 votre site VuePress est un jeu d’enfant puisque VuePress vous permet d’\u00e9crire des composants Vue personnalis\u00e9s qui peuvent \u00eatre ins\u00e9r\u00e9s dans n’importe quel fichier Markdown. Cr\u00e9ons un composant qui rendra la liste des articles du blog.<\/p>\n
              Cr\u00e9ez un fichier BlogIndex.vue<\/strong> dans le dossier components<\/strong> et ajoutez le code suivant :<\/p>\n
              <template>\n    <div>\n        <div v-for=\"post in posts\" v-bind:key=\"post.path\">\n            <h2>\n                <router-link> :to=\"post.path\">{{ post.frontmatter.title }}<\/router-link>\n            <\/h2>\n            <p>{{ post.frontmatter.description }}<\/p>\n            <p><router-link> :to=\"post.path\">Read more<\/router-link><\/p>\n        <\/div>\n    <\/div>\n<\/template>\n\n<script>>\n    export default {\n        computed: {\n            posts() {\n                return this.$site.pages\n                    .filter(\n                        (x) => x.path.startsWith('\/blog\/') && !x.frontmatter.blog_index\n                    )\n                    .sort(\n                        (a, b) =>\n                            new Date(b.frontmatter.date) - new Date(a.frontmatter.date)\n                    );\n            },\n        },\n    };\n<\/script><\/code><\/pre>\n
              Dans l’extrait de code fourni, vous d\u00e9finissez un mod\u00e8le Vue qui parcourt en boucle les articles de votre blog \u00e0 l’aide de v-for<\/code>, en affichant le titre de l’article, sa description et un lien \u00ab read more \u00bb pour chaque article.<\/p>\n
              La section script exporte un composant Vue qui calcule et r\u00e9cup\u00e8re les articles du blog. Ces articles sont filtr\u00e9s en fonction de leur chemin d’acc\u00e8s (commen\u00e7ant par \/blog\/<\/code>) et de l’absence d’un attribut frontmatter blog_index<\/code>. Ils sont ensuite tri\u00e9s par date dans l’ordre d\u00e9croissant afin de pr\u00e9senter les derniers articles en premier.<\/p>\n
              Lorsque vous cr\u00e9ez de nouveaux articles de blog, vous devez sp\u00e9cifier la date de publication dans les informations de l’attribut frontmatter. Cela permettra de trier les articles de mani\u00e8re \u00e0 ce que les plus r\u00e9cents apparaissent en premier.<\/p>\n
              Pour stocker les articles de blog, cr\u00e9ez un dossier nomm\u00e9 blog<\/strong> \u00e0 la racine du projet. Dans ce dossier, ajoutez un fichier README.md<\/strong>. Il s’agira de l’index du blog, et c’est l\u00e0 que vous inclurez le composant BlogIndex<\/code> pour r\u00e9pertorier tous les articles du blog.<\/p>\n
              ---\nblog_index: true\n---\n\n# Blog\n\nWelcome To Our Blog\n\n<BlogIndex \/><\/code><\/pre>\n
              Veillez \u00e0 ajouter l’attribut blog_index<\/code> frontmatter, car il permet de s’assurer que l’index du blog lui-m\u00eame n’est pas list\u00e9 parmi les diff\u00e9rents articles du blog. Cet attribut est utilis\u00e9 lors du filtrage des articles dans la propri\u00e9t\u00e9 posts computed du composant BlogIndex.vue<\/strong>.<\/p>\n
              Ensuite, cr\u00e9ez un dossier blog \u00e0 la racine de votre projet qui stockera tous les articles du blog et cr\u00e9era chaque article. Par exemple, cr\u00e9ez un fichier first-post.md<\/strong> et ajoutez le contenu markdown suivant :<\/p>\n
              ---\ntitle: \"My Exciting VuePress Blog Journey\"\ndate: 2023-09-28\ndescription: \"Exploring VuePress, a versatile static site generator, and sharing my experiences along the way.\"\n---\n\n# My Exciting VuePress Blog Journey\n\nIn this inaugural blog post, I embark on an exciting journey with VuePress, a powerful static site generator that's perfect for creating documentation, blogs, and more. As I delve into the world of VuePress, I'll be sharing my experiences, insights, and tips on making the most out of this fantastic tool.<\/code><\/pre>\n
              Pour chaque article de blog, veillez \u00e0 d\u00e9finir les r\u00e9glages essentiels de la page d’accueil, tels que le titre de l’article, la date et d’autres m\u00e9ta-donn\u00e9es pertinentes. Cette organisation m\u00e9ticuleuse garantit une pr\u00e9sentation coh\u00e9rente de vos articles de blog et offre \u00e0 votre public une exp\u00e9rience de lecture attrayante.<\/p>\n
              \"Ajouter
              Ajouter un blog \u00e0 VuePress.<\/figcaption><\/figure>\n
              Enfin, vous pouvez ajouter la navigation du blog \u00e0 votre barre de navigation dans le fichier .vuepress\/config.js <\/strong>:<\/p>\n
              nav: [\n            {\n                text: 'Guide',\n                link: '\/guide\/',\n            },\n            { text: 'Blog', link: '\/blog\/' },\n            {\n                text: 'Static Site Hosting',\n                link: 'https:\/\/sevalla.com\/static-site-hosting\/',\n            },\n        ],<\/code><\/pre>\n
              Vous pouvez faire bien d’autres choses avec VuePress, comme ajouter des extensions<\/a>, utiliser un th\u00e8me s\u00e9par\u00e9<\/a> ou m\u00eame cr\u00e9er votre propre th\u00e8me<\/a>.<\/p>\n
              D\u00e9ployer un site statique VuePress sur Kinsta<\/h2>\n
              Kinsta vous permet d’h\u00e9berger<\/a> gratuitement<\/strong> jusqu’\u00e0 100 sites web statiques<\/a>. Vous pouvez le faire en poussant votre code vers votre fournisseur Git pr\u00e9f\u00e9r\u00e9 (Bitbucket<\/a>, GitHub<\/a> ou GitLab<\/a>), puis en le d\u00e9ployant sur Kinsta.<\/p>\n
              Avant de pousser vos fichiers vers un fournisseur Git, cr\u00e9ez un fichier<\/a> .gitignore<\/a> \u00e0 la racine de votre projet pour sp\u00e9cifier les fichiers et dossiers que Git doit ignorer lors de la pouss\u00e9e de votre code :<\/p>\n
              # dependencies\n\/node_modules\n\n# build directory\n.\/docs\/.vuepress\/dist\n\/public<\/code><\/pre>\n