{"id":63960,"date":"2023-10-11T11:22:48","date_gmt":"2023-10-11T14:22:48","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=63960&preview=true&preview_id=63960"},"modified":"2023-10-24T03:09:24","modified_gmt":"2023-10-24T06:09:24","slug":"vuepress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/vuepress\/","title":{"rendered":"Crie e Personalize um Site R\u00e1pido de Documenta\u00e7\u00e3o e Blog com VuePress"},"content":{"rendered":"

No cen\u00e1rio digital acelerado de hoje, ter uma documenta\u00e7\u00e3o ou site de blog bem organizado e visualmente atraente \u00e9 essencial para captar a aten\u00e7\u00e3o do seu p\u00fablico e mant\u00ea-los engajados. Mas como voc\u00ea pode conseguir isso sem gastar horas intermin\u00e1veis em desenvolvimento web<\/a>?<\/p>\n

Este artigo explica como voc\u00ea pode criar e personalizar um site r\u00e1pido de documenta\u00e7\u00e3o e blog usando o VuePress, um gerador de site est\u00e1tico<\/a> (SSG) minimalista, por\u00e9m poderoso.<\/p>\n

\"Demonstra\u00e7\u00e3o
Demonstra\u00e7\u00e3o da documenta\u00e7\u00e3o e do blog do VuePress.<\/figcaption><\/figure>\n
<\/div><\/kinsta-auto-toc>\n

O que \u00e9 VuePress?<\/h2>\n

O VuePress \u00e9 uma framework de c\u00f3digo aberto<\/a> especializado na gera\u00e7\u00e3o de sites est\u00e1ticos, voltados principalmente para documenta\u00e7\u00e3o e blogs. Ele foi criado por Evan You<\/a>, o g\u00eanio por tr\u00e1s do Vue.js<\/a>, e incorpora a filosofia de simplicidade e facilidade de uso pela qual o Vue.js \u00e9 conhecido.<\/p>\n

Por que usar o VuePress?<\/h3>\n

Aqui est\u00e3o alguns motivos convincentes pelos quais o VuePress pode ser a escolha perfeita para voc\u00ea.<\/p>\n

    \n
  1. Simplicidade do markdown<\/strong>: O VuePress simplifica a cria\u00e7\u00e3o de conte\u00fado com Markdown, facilitando a escrita e a estrutura\u00e7\u00e3o de conte\u00fado sem formata\u00e7\u00e3o complexa.<\/li>\n
  2. Integra\u00e7\u00e3o com o Vue.js<\/strong>: O VuePress integra perfeitamente o Vue.js, permitindo elementos interativos e din\u00e2micos da web para uma experi\u00eancia de usu\u00e1rio envolvente.<\/li>\n
  3. Desempenho e personaliza\u00e7\u00e3o<\/strong>: O VuePress oferece excelente desempenho com sites est\u00e1ticos de carregamento r\u00e1pido e amplas op\u00e7\u00f5es de personaliza\u00e7\u00e3o para atender ao seu estilo e \u00e0s suas necessidades.<\/li>\n<\/ol>\n

    Come\u00e7ando com o VuePress<\/h2>\n

    Antes de iniciar com o VuePress, certifique-se de que voc\u00ea tenha o Node.js<\/a> ou o Yarn Classic<\/a> instalados no seu computador. Existem duas maneiras de come\u00e7ar com o VuePress: voc\u00ea pode usar o gerador create-vuepress-site<\/a>, que ajudar\u00e1 a criar a estrutura b\u00e1sica do site VuePress para voc\u00ea, ou usar a instala\u00e7\u00e3o manual.<\/p>\n

    Para este artigo, vamos usar o m\u00e9todo de instala\u00e7\u00e3o manual.<\/p>\n

      \n
    1. Crie um novo diret\u00f3rio e altere ele:<\/li>\n<\/ol>\n
      mkdir vuepress-starter && cd vuepress-starter<\/code><\/pre>\n
        \n
      1. Inicialize com o gerenciador de pacotes de sua prefer\u00eancia. Para este artigo, vamos usar o Yarn:<\/li>\n<\/ol>\n
        yarn init<\/code><\/pre>\n
          \n
        1. Instale o VuePress em seu projeto como uma depend\u00eancia de desenvolvedor:<\/li>\n<\/ol>\n
          yarn add -D vuepress<\/code><\/pre>\n
            \n
          1. Crie uma pasta docs<\/strong> para armazenar todo o seu c\u00f3digo e, em seguida, crie um arquivo README.md<\/strong>, que serve como o arquivo de \u00edndice do seu projeto, semelhante ao index.html<\/strong>:<\/li>\n<\/ol>\n
            mkdir docs && echo '# Hello VuePress' > docs\/README.md<\/code><\/pre>\n
              \n
            1. Abra seu projeto em um editor de c\u00f3digo e adicione os seguintes scripts ao arquivo package.json<\/strong> para que voc\u00ea possa servir e criar seu site:<\/li>\n<\/ol>\n
              \"scripts\": {\n    \"dev\": \"vuepress dev docs\",\n    \"build\": \"vuepress build docs\"\n  },<\/code><\/pre>\n
              Agora voc\u00ea pode servir seu site executando o comando yarn dev<\/code>. O VuePress iniciar\u00e1 seu servidor de desenvolvimento em http:\/\/localhost:8080.<\/p>\n
              \"Tema
              Tema padr\u00e3o para a instala\u00e7\u00e3o manual do VuePress.<\/figcaption><\/figure>\n
              Agora voc\u00ea criou um site de documenta\u00e7\u00e3o. Voc\u00ea perceber\u00e1 que o VuePress oferece um tema padr\u00e3o limpo e minimalista pronto para uso. No entanto, ele \u00e9 altamente personaliz\u00e1vel, dando a voc\u00ea a liberdade criativa para criar uma apar\u00eancia exclusiva para o seu site.<\/p>\n
              Criando p\u00e1ginas de documenta\u00e7\u00e3o<\/h2>\n
              O VuePress segue uma estrutura de diret\u00f3rios simples para organizar a documenta\u00e7\u00e3o. Dentro da pasta do seu projeto, voc\u00ea encontrar\u00e1 o diret\u00f3rio docs<\/strong> que criamos, onde poder\u00e1 criar arquivos Markdown<\/a> (.md<\/code>) para suas p\u00e1ginas de documenta\u00e7\u00e3o.<\/p>\n
              Por exemplo, voc\u00ea pode criar arquivos como getting-started.md<\/strong>, usage.md<\/strong> e troubleshooting.md<\/strong>. Esses arquivos tornam-se automaticamente rotas que podem ser acessadas quando voc\u00ea navega para http:\/\/localhost:8080\/getting-started, http:\/\/localhost:8080\/usage e http:\/\/localhost:8080\/troubleshooting.<\/p>\n
              Para aprimorar a organiza\u00e7\u00e3o da sua documenta\u00e7\u00e3o, voc\u00ea pode criar pastas dedicadas para p\u00e1ginas de documenta\u00e7\u00e3o relacionadas. Por exemplo, voc\u00ea pode criar uma pasta chamada guide<\/strong> e organiz\u00e1-la com guias espec\u00edficos, como using-kinsta-stsh.md<\/strong>. Quando voc\u00ea emprega essa estrutura, o conte\u00fado em using-kinsta-stsh.md<\/strong> torna-se acess\u00edvel por meio de um URL como http:\/\/localhost:8080\/guide\/using-kinsta-stsh.<\/p>\n
              Voc\u00ea tamb\u00e9m pode criar um arquivo README.md<\/strong> ou index.md<\/strong> no n\u00edvel raiz da pasta guide<\/strong>. Esse arquivo servir\u00e1 como p\u00e1gina de \u00edndice, permitindo que os usu\u00e1rios naveguem para http:\/\/localhost:8080\/guide\/ e acessem convenientemente o conte\u00fado com uma barra lateral que voc\u00ea aprender\u00e1 a configurar na pr\u00f3xima se\u00e7\u00e3o.<\/p>\n
              Neste reposit\u00f3rio de amostra do VuePress<\/a>, voc\u00ea notar\u00e1 que todos esses arquivos foram criados e que algum conte\u00fado markdown foi adicionado a cada arquivo. Sinta-se \u00e0 vontade para criar seus arquivos de acordo com suas prefer\u00eancias, seja do zero para atender \u00e0s suas necessidades espec\u00edficas ou inspirando-se no conte\u00fado dispon\u00edvel no reposit\u00f3rio.<\/p>\n
              Personalizando a apar\u00eancia do VuePress<\/h2>\n
              Depois de criar seu site de documenta\u00e7\u00e3o com conte\u00fado, voc\u00ea pode achar dif\u00edcil navegar nele, especialmente se tiver muitos arquivos para gerenciar. No entanto, o VuePress permite que voc\u00ea personalize a estrutura de navega\u00e7\u00e3o do seu site para torn\u00e1-lo mais f\u00e1cil de usar e organizado.<\/p>\n
              Para personalizar a apar\u00eancia e a navega\u00e7\u00e3o do seu site, crie uma pasta .vuepress<\/strong> no diret\u00f3rio raiz do seu projeto. Essa pasta conter\u00e1 arquivos de configura\u00e7\u00e3o e ativos relacionados ao seu site VuePress.<\/p>\n
              Configura\u00e7\u00e3o de navega\u00e7\u00e3o<\/h3>\n
              Na pasta .vuepress<\/strong>, crie um arquivo config.js<\/strong>. Voc\u00ea tamb\u00e9m pode usar outros formatos de arquivo como YAML (.yml), TOML (.toml) ou TypeScript (.ts) para sua configura\u00e7\u00e3o.<\/p>\n
              No seu arquivo config.js<\/strong>, voc\u00ea pode definir a estrutura de navega\u00e7\u00e3o do seu site usando o objeto themeConfig<\/code>. Aqui est\u00e1 um exemplo de configura\u00e7\u00e3o:<\/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
              Neste exemplo, estamos configurando as se\u00e7\u00f5es title<\/code> e description<\/code> do site, definindo links de navega\u00e7\u00e3o e configurando uma barra lateral para a se\u00e7\u00e3o \/guide\/<\/code>.<\/p>\n
              A array nav<\/code> especifica os links de navega\u00e7\u00e3o na parte superior do site. O objeto sidebar define a estrutura da barra lateral para se\u00e7\u00f5es espec\u00edficas. Nesse caso, ele est\u00e1 configurado para a se\u00e7\u00e3o \/guide\/<\/code>.<\/p>\n
              Voc\u00ea pode ler mais sobre a configura\u00e7\u00e3o da barra<\/a> de navega\u00e7\u00e3o na documenta\u00e7\u00e3o do VuePress.\u00a0 \u00a0