{"id":70879,"date":"2023-10-11T16:21:17","date_gmt":"2023-10-11T14:21:17","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=70879&preview=true&preview_id=70879"},"modified":"2023-10-16T11:33:16","modified_gmt":"2023-10-16T09:33:16","slug":"vuepress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/vuepress\/","title":{"rendered":"Crea y Personaliza un Sitio de Documentaci\u00f3n y Blog R\u00e1pido con VuePress"},"content":{"rendered":"

En el acelerado panorama digital actual, tener un sitio de documentaci\u00f3n o blog bien organizado y visualmente atractivo es esencial para captar la atenci\u00f3n de tu audiencia y mantenerla interesada. Pero, \u00bfc\u00f3mo puedes conseguirlo sin dedicar interminables horas al desarrollo web<\/a>?<\/p>\n

Este art\u00edculo explica c\u00f3mo crear y personalizar un sitio de documentaci\u00f3n y blog r\u00e1pido utilizando VuePress, un generador de sitios est\u00e1ticos<\/a> (SSG – Static Site Generators) minimalista pero potente.<\/p>\n

\"VuePress
Demostraci\u00f3n de documentaci\u00f3n y blog de VuePress.<\/figcaption><\/figure>\n
<\/div><\/kinsta-auto-toc>\n

\u00bfQu\u00e9 es VuePress?<\/h2>\n

VuePress es un framework de c\u00f3digo abierto<\/a> especializado en generar sitios web est\u00e1ticos, orientado principalmente a la documentaci\u00f3n y los blogs. Fue creado por Evan You<\/a>, el genio detr\u00e1s de Vue.js<\/a>, y encarna la filosof\u00eda de simplicidad y facilidad de uso por la que Vue.js es conocido.<\/p>\n

\u00bfPor qu\u00e9 utilizar VuePress?<\/h3>\n

Aqu\u00ed tienes algunas razones de peso por las que VuePress puede ser la elecci\u00f3n perfecta para ti.<\/p>\n

    \n
  1. Simplicidad Markdown:<\/strong> VuePress simplifica la creaci\u00f3n de contenidos con Markdown, facilitando la escritura y estructuraci\u00f3n de contenidos sin formatos complejos.<\/li>\n
  2. Integraci\u00f3n con Vue.js:<\/strong> VuePress integra a la perfecci\u00f3n Vue.js, permitiendo elementos web interactivos y din\u00e1micos para una experiencia de usuario atractiva.<\/li>\n
  3. Rendimiento y personalizaci\u00f3n:<\/strong> VuePress ofrece un rendimiento excelente con sitios web est\u00e1ticos de carga r\u00e1pida y amplias opciones de personalizaci\u00f3n para adaptarse a tu estilo y necesidades.<\/li>\n<\/ol>\n

    Primeros Pasos con VuePress<\/h2>\n

    Antes de sumergirte en VuePress, aseg\u00farate de que tienes instalado Node.js<\/a> o Yarn Classic<\/a> en tu ordenador. Hay dos formas de empezar con VuePress: o bien utilizas el generador create-vuepress-site<\/a>, que te ayudar\u00e1 a crear la estructura b\u00e1sica del sitio VuePress, o bien utilizas la instalaci\u00f3n manual.<\/p>\n

    Para este art\u00edculo, vamos a utilizar el m\u00e9todo de instalaci\u00f3n manual.<\/p>\n

      \n
    1. Crea un nuevo directorio y c\u00e1mbialo:<\/li>\n<\/ol>\n
      mkdir vuepress-starter && cd vuepress-starter<\/code><\/pre>\n
        \n
      1. Inicial\u00edzalo con tu gestor de paquetes preferido. Para este art\u00edculo, vamos a utilizar Yarn:<\/li>\n<\/ol>\n
        yarn init<\/code><\/pre>\n
          \n
        1. Instala VuePress en tu proyecto como dependencia del desarrollador:<\/li>\n<\/ol>\n
          yarn add -D vuepress<\/code><\/pre>\n
            \n
          1. Crea una carpeta docs<\/strong> para guardar todo tu c\u00f3digo y luego crea un archivo README.md<\/strong>, que sirve como archivo \u00edndice de tu proyecto, similar a index.html<\/strong>:<\/li>\n<\/ol>\n
            mkdir docs && echo '# Hello VuePress' > docs\/README.md<\/code><\/pre>\n
              \n
            1. Abre tu proyecto en un editor de c\u00f3digo y a\u00f1ade los siguientes scripts a tu archivo package.json<\/strong> para que puedas servir y construir tu sitio:<\/li>\n<\/ol>\n
              \"scripts\": {\n    \"dev\": \"vuepress dev docs\",\n    \"build\": \"vuepress build docs\"\n  },<\/code><\/pre>\n
              Ahora puedes servir tu sitio ejecutando el comando yarn dev<\/code>. VuePress iniciar\u00e1 tu servidor de desarrollo en http:\/\/localhost:8080.<\/p>\n
              \"Defualt
              Tema predeterminado para la instalaci\u00f3n manual de VuePress.<\/figcaption><\/figure>\n
              Ya has creado un sitio de documentaci\u00f3n. Ver\u00e1s que VuePress ofrece un tema predeterminado limpio y minimalista. Sin embargo, es altamente personalizable, ofreci\u00e9ndote libertad creativa para crear un aspecto \u00fanico para tu sitio web.<\/p>\n
              Crear P\u00e1ginas de Documentaci\u00f3n<\/h2>\n
              VuePress sigue una estructura de directorios sencilla para organizar la documentaci\u00f3n. Dentro de la carpeta de tu proyecto, encontrar\u00e1s el directorio docs<\/strong> que hemos creado, donde puedes crear archivos Markdown<\/a> (.md<\/code>) para tus p\u00e1ginas de documentaci\u00f3n.<\/p>\n
              Por ejemplo, puedes crear archivos como getting-started.md<\/strong>, usage.md<\/strong> y troubleshooting.md<\/strong>. Estos archivos se convierten autom\u00e1ticamente en rutas a las que puedes acceder cuando navegas a http:\/\/localhost:8080\/getting-started, http:\/\/localhost:8080\/usage y http:\/\/localhost:8080\/troubleshooting.<\/p>\n
              Para mejorar la organizaci\u00f3n de tu documentaci\u00f3n, puedes crear carpetas dedicadas a p\u00e1ginas de documentaci\u00f3n relacionadas. Por ejemplo, puedes crear una carpeta llamada guide<\/strong> y organizarla con gu\u00edas espec\u00edficas como using-kinsta-stsh.md<\/strong>. Cuando emplees esta estructura, el contenido de using-kinsta-stsh<\/strong>.md<\/strong> ser\u00e1 accesible a trav\u00e9s de una URL como http:\/\/localhost:8080\/guide\/using-kinsta-stsh.<\/p>\n
              Tambi\u00e9n puedes crear un archivo README.md<\/strong> o index.md<\/strong> en el nivel ra\u00edz de la carpeta del guide<\/strong>. Este archivo servir\u00e1 como p\u00e1gina \u00edndice, permitiendo a los usuarios navegar a http:\/\/localhost:8080\/guide\/ y acceder c\u00f3modamente al contenido con una barra lateral que aprender\u00e1s a configurar en la siguiente secci\u00f3n.<\/p>\n
              En este repositorio de muestra de VuePress<\/a>, observar\u00e1s que se han creado todos estos archivos, y se ha a\u00f1adido algo de contenido markdown a cada uno de ellos. Si\u00e9ntete libre de crear tus archivos seg\u00fan tus preferencias, ya sea desde cero para adaptarlos a tus necesidades espec\u00edficas o inspir\u00e1ndote en el contenido disponible en el repositorio.<\/p>\n
              Personalizar la Apariencia de VuePress<\/h2>\n
              Una vez que hayas creado tu sitio de documentaci\u00f3n con contenido, puede que te resulte dif\u00edcil navegar por \u00e9l, especialmente si tienes muchos archivos que gestionar. Sin embargo, VuePress te permite personalizar la estructura de navegaci\u00f3n de tu sitio para hacerlo m\u00e1s f\u00e1cil de usar y organizado.<\/p>\n
              Para personalizar el aspecto y la navegaci\u00f3n de tu sitio, crea una carpeta .vuepress<\/strong> en el directorio ra\u00edz de tu proyecto. Esta carpeta contendr\u00e1 archivos de configuraci\u00f3n y activos relacionados con tu sitio VuePress.<\/p>\n
              Configuraci\u00f3n de la navegaci\u00f3n<\/h3>\n
              En la carpeta . vuepress<\/strong>, crea un archivo config.js<\/strong>. Tambi\u00e9n puedes utilizar otros formatos de archivo como YAML (.yml), TOML (.toml) o TypeScript (.ts) para tu configuraci\u00f3n.<\/p>\n
              En tu archivo config.js<\/strong>, puedes definir la estructura de navegaci\u00f3n de tu sitio utilizando el objeto themeConfig<\/code>. Aqu\u00ed tienes un ejemplo de configuraci\u00f3n:<\/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
              En este ejemplo, estamos configurando los sitios title<\/code> y description<\/code>, definiendo los enlaces de navegaci\u00f3n y configurando una barra lateral para la secci\u00f3n \/guide\/<\/code>.<\/p>\n
              La matriz nav<\/code> especifica los enlaces de navegaci\u00f3n en la parte superior de tu sitio. El objeto barra lateral define la estructura de la barra lateral para secciones espec\u00edficas. En este caso, est\u00e1 configurado para la secci\u00f3n \/guide\/<\/code>.<\/p>\n
              Puedes leer m\u00e1s sobre la configuraci\u00f3n de la barra de navegaci\u00f3n<\/a> en la documentaci\u00f3n de VuePress.<\/p>\n
              Estilizar<\/h3>\n
              VuePress te permite personalizar la apariencia de tu sitio mediante estilos. Puedes anular los estilos predeterminados utilizando algunas variables definidas o definir tu propio estilo. Para ello, crea una carpeta de estilos<\/strong> en la carpeta .vuepress<\/strong><\/p>\n
              Para aplicar anulaciones sencillas al estilo del preajuste predeterminado o definir algunas variables para utilizarlas m\u00e1s adelante, puedes crear un archivo palette.styl<\/strong> en .vuepress\/styles<\/strong>. Estas son algunas variables predefinidas que puedes modificar:<\/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
              Estas variables pueden utilizarse para mantener un estilo coherente en todo tu sitio. VuePress tambi\u00e9n proporciona una forma c\u00f3moda de a\u00f1adir estilos adicionales. Puedes crear un archivo index.styl<\/strong> en la carpeta .vuepress\/styles<\/strong> donde puedes utilizar la sintaxis CSS<\/a> normal:<\/p>\n
              .content {\n  font-size 30px\n}<\/code><\/pre>\n
              Lee m\u00e1s sobre el estilo de VuePress<\/a> en la documentaci\u00f3n oficial.<\/p>\n
              Uso de componentes<\/h3>\n
              VuePress admite el uso de componentes para mejorar la funcionalidad y el aspecto de tus p\u00e1ginas. Puedes crear componentes Vue e incluirlos en tus archivos Markdown. Crea una carpeta components en .vuepres<\/strong>, y entonces cualquier archivo *.vue<\/code> que se encuentre en .vuepress\/components<\/strong> se registrar\u00e1 autom\u00e1ticamente como componente global.<\/p>\n
              Por ejemplo, considera la posibilidad de crear dos componentes, HomeOptions.vue<\/strong> y 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
              Dentro de estos archivos de componentes vue.js, puedes a\u00f1adir c\u00f3digos CSS. Vamos a a\u00f1adir c\u00f3digo a los componentes HomeOptions.vue<\/strong> y HostingBanner.vue<\/strong>.<\/p>\n
              A\u00f1ade el c\u00f3digo siguiente a 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
              A\u00f1ade tambi\u00e9n el c\u00f3digo siguiente a 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
              Dentro de cualquier archivo Markdown, podr\u00e1s utilizar directamente los componentes (los nombres se deducen de los nombres de archivo):<\/p>\n
              <HomeOptions\/>\n<HostingBanner\/><\/code><\/pre>\n
              Lee m\u00e1s sobre los componentes en VuePress<\/a> en la documentaci\u00f3n.<\/p>\n
              Personalizar la p\u00e1gina de inicio<\/h3>\n
              En VuePress, el tema predeterminado ofrece un dise\u00f1o de p\u00e1gina de inicio predise\u00f1ado que puedes utilizar para crear un punto de partida atractivo e informativo para tu sitio. Para utilizar este dise\u00f1o de p\u00e1gina de inicio, debes especificar home: true<\/code> e incluir algunos metadatos adicionales en el frontmatter YAML de tu archivo ra\u00edz README.md<\/strong>.<\/p>\n
              Aqu\u00ed tienes un ejemplo del frontmatter 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
              Todas estas configuraciones hacen que tu p\u00e1gina de inicio de la documentaci\u00f3n tenga este aspecto:<\/p>\n
              \"VuePress
              P\u00e1gina de inicio por defecto de VuePress.<\/figcaption><\/figure>\n
              Cabe se\u00f1alar que puedes desactivar los valores heroText<\/code> y tagline<\/code> o cualquier otro estableciendo sus campos correspondientes en null<\/code> si prefieres un dise\u00f1o m\u00e1s sencillo o no incluirlo. Cualquier contenido que incluyas despu\u00e9s del frontmatter YAML (es decir, la secci\u00f3n de metadatos) se tratar\u00e1 como Markdown normal y se renderizar\u00e1 a continuaci\u00f3n de la secci\u00f3n de caracter\u00edsticas.<\/p>\n
              Si quieres un dise\u00f1o de p\u00e1gina de inicio totalmente personalizado, VuePress tambi\u00e9n admite dise\u00f1os personalizados. Adem\u00e1s, puedes crear un pie de p\u00e1gina de texto enriquecido utilizando la Sintaxis de Ranura Markdown, que ofrece m\u00e1s flexibilidad a la hora de mostrar el contenido del pie de p\u00e1gina. Aqu\u00ed tienes un ejemplo de c\u00f3mo crear un pie de p\u00e1gina de texto enriquecido:<\/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
              En este caso, el contenido de la secci\u00f3n ::: slot footer<\/code> te permite incluir enlaces e informaci\u00f3n adicional en la zona del pie de p\u00e1gina de tu p\u00e1gina de inicio.<\/p>\n
              Ahora que ya sabes c\u00f3mo realizar las personalizaciones anteriores, a\u00f1ade a la p\u00e1gina de inicio los componentes creados anteriormente y elimina algunas opciones para que la p\u00e1gina de inicio tenga mejor aspecto:<\/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
              \"Using
              Uso de componentes en la p\u00e1gina de inicio de VuePress.<\/figcaption><\/figure>\n
              Siguiendo estas t\u00e9cnicas de personalizaci\u00f3n de VuePress, puedes crear un sitio de documentaci\u00f3n que no s\u00f3lo proporcione contenidos valiosos, sino que tambi\u00e9n ofrezca una excelente experiencia de usuario con una navegaci\u00f3n organizada y un estilo atractivo.<\/p>\n
              Puedes leer m\u00e1s sobre la personalizaci\u00f3n del tema predeterminado<\/a> en la documentaci\u00f3n.<\/p>\n
              Crear una Secci\u00f3n de Blog con VuePress<\/h2>\n
              A\u00f1adir una secci\u00f3n de blog a tu sitio VuePress es muy sencillo, ya que VuePress te permite escribir componentes Vue personalizados que pueden insertarse en cualquier archivo Markdown. Vamos a crear un componente que mostrar\u00e1 la lista de entradas del blog.<\/p>\n
              Crea un archivo BlogIndex.vue<\/strong> en la carpeta components<\/strong> y a\u00f1ade el siguiente c\u00f3digo:<\/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
              En el fragmento de c\u00f3digo proporcionado, defines una plantilla Vue que recorre las entradas de tu blog utilizando v-for<\/code>, mostrando el t\u00edtulo de la entrada, la descripci\u00f3n y un enlace \u00abLeer m\u00e1s\u00bb para cada entrada.<\/p>\n
              La secci\u00f3n de script exporta un componente Vue que calcula y recupera las entradas del blog. Estas entradas se filtran en funci\u00f3n de su ruta (que comienza por \/blog\/<\/code>) y la ausencia de un atributo frontmatter blog_index<\/code>. A continuaci\u00f3n, se ordenan por fecha en orden descendente para presentar primero las \u00faltimas entradas.<\/p>\n
              Cuando crees nuevas entradas de blog, deber\u00e1s especificar la fecha de la entrada como parte de la informaci\u00f3n de la portada. Esto ayudar\u00e1 a ordenar las entradas para que aparezcan primero las m\u00e1s recientes.<\/p>\n
              Para almacenar las entradas del blog, crea una carpeta llamada blog<\/strong> en la ra\u00edz del proyecto. En esta carpeta, a\u00f1ade un archivo README.md<\/strong>. \u00c9ste ser\u00e1 el \u00edndice del blog, y aqu\u00ed es donde incluir\u00e1s el componente BlogIndex<\/code> para listar todas las entradas del blog.<\/p>\n
              ---\nblog_index: true\n---\n\n# Blog\n\nWelcome To Our Blog\n\n<BlogIndex \/><\/code><\/pre>\n
              Aseg\u00farate de a\u00f1adir el atributo blog_index<\/code> frontmatter, ya que es fundamental para garantizar que el propio \u00edndice del blog no aparezca entre las entradas individuales del blog. Este atributo se utiliza al filtrar las entradas en la propiedad computed posts del componente BlogIndex.vue<\/strong>.<\/p>\n
              A continuaci\u00f3n, crea una carpeta blog en la ra\u00edz de tu proyecto que almacenar\u00e1 todas las entradas del blog y crear\u00e1 cada entrada. Por ejemplo, crea un archivo first-post.md<\/strong> y a\u00f1ade el siguiente contenido markdown:<\/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
              Para cada entrada del blog, aseg\u00farate de definir los par\u00e1metros esenciales de la portada, como el t\u00edtulo de la entrada, la fecha y otros metadatos relevantes. Esta organizaci\u00f3n meticulosa garantiza que las entradas de tu blog se presenten de forma cohesionada y proporciona una experiencia de lectura atractiva para tu audiencia.<\/p>\n
              \"Adding<\/a>
              A\u00f1adir blog a VuePress.<\/figcaption><\/figure>\n
              Por \u00faltimo, puedes a\u00f1adir la navegaci\u00f3n del blog a tu barra de navegaci\u00f3n en el archivo .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
              Puedes hacer mucho m\u00e1s con VuePress, como a\u00f1adir plugins<\/a>, utilizar un tema independiente<\/a> o incluso crear tu propio tema<\/a>.<\/p>\n
              Desplegar un Sitio Est\u00e1tico VuePress en Kinsta<\/h2>\n
              Kinsta te permite alojar hasta 100 sitios web est\u00e1ticos<\/a>\u00a0de forma gratuita<\/strong>. Para ello, env\u00eda tu c\u00f3digo a tu proveedor Git preferido (Bitbucket<\/a>, GitHub<\/a> o GitLab<\/a>) y luego despli\u00e9galo en Kinsta.<\/p>\n
              Antes de enviar tus archivos a cualquier proveedor de Git, crea un archivo <\/a>.gitignore<\/a> en la ra\u00edz de tu proyecto para especificar los archivos y carpetas que Git debe ignorar al enviar tu c\u00f3digo:<\/p>\n
              # dependencies\n\/node_modules\n\n# build directory\n.\/docs\/.vuepress\/dist\n\/public<\/code><\/pre>\n