Criar e executar um projeto VitePress

O que é VitePress?

O VitePress é um gerador de sites estáticos baseado no Vite, projetado especialmente para escrever documentação. VitePress é impulsionado pelo Vue e oferece uma velocidade de construção e experiência de desenvolvimento extremamente rápidas. Ele fornece uma API simples, porém poderosa, facilitando a criação e a manutenção de documentação.

Principais características e vantagens do VitePress

• Experiência de desenvolvimento rápida: O VitePress usa o Vite como ferramenta de construção subjacente, oferecendo atualização instantânea e velocidade de construção extremamente rápidas.
• Configuração simples: Com um arquivo de configuração simples, os usuários podem configurar e personalizar rapidamente seu site de documentação.
• Extensões poderosas de Markdown: Suporta componentes Vue e plugins de Markdown personalizados, tornando a escrita da documentação mais flexível e poderosa.
• SEO integrado: Mapa do site automaticamente gerado e estrutura HTML otimizada, melhorando a compatibilidade com os motores de busca.
• Tamanho extremamente reduzido: Por meio da técnica de Tree-shaking, os arquivos estáticos gerados são muito pequenos, possibilitando um carregamento rápido.

Usar VitePress pode ajudar os desenvolvedores a configurar rapidamente um site de documentação de alto desempenho.

Criar e executar um projeto VitePress com o ServBay

Neste artigo, utilizaremos o ambiente Node.js fornecido pelo ServBay para criar e executar um projeto VitePress. Usaremos a funcionalidade "Hospedagem" do ServBay para configurar um servidor Web e acessar o projeto usando proxy reverso e serviço de arquivos estáticos.

Criar um projeto VitePress

1. Inicializar o projeto

   Primeiro, certifique-se de que você instalou o ambiente Node.js fornecido pelo ServBay. Em seguida, utilize os seguintes comandos para inicializar um novo projeto VitePress:

   cd /Applications/ServBay/www
   mkdir servbay-vitepress-app
   cd servbay-vitepress-app
   npm add -D vitepress
   npx vitepress init

   Siga as instruções, inserindo as informações do projeto e escolhendo outras opções conforme necessário:

    ┌  Welcome to VitePress!
    │
    ◇  Where should VitePress initialize the config?
    │  ./docs
    │
    ◇  Site title:
    │  ServBay VitePress Demo
    │
    ◇  Site description:
    │  A ServBay VitePress Demo Site
    │
    ◇  Theme:
    │  Default Theme
    │
    ◇  Use TypeScript for config and theme files?
    │  Yes
    │
    ◇  Add VitePress npm scripts to package.json?
    │  Yes
    │
    └  Done! Now run npm run docs:dev and start writing.

Modificar o conteúdo do projeto VitePress

1. Modificar o arquivo docs/index.md

   Abra o arquivo docs/index.md e modifique o conteúdo para que a página exiba "Hello ServBay!"

   # Hello ServBay!
   
   Bem-vindo ao uso do ServBay para executar o site de documentação do VitePress.

Entrar no modo de desenvolvimento

1. Executar o servidor de desenvolvimento

   Inicie o servidor de desenvolvimento e especifique a porta (por exemplo: 8585):

   npm run docs:dev -- --port 8585

   Isso iniciará um servidor de desenvolvimento localmente e exporá a porta 8585.

2. Configurar o proxy reverso da hospedagem do ServBay

   Utilize a funcionalidade de "Hospedagem" do ServBay para acessar o servidor de desenvolvimento através de proxy reverso. Nas configurações de "Hospedagem" do ServBay, adicione um novo proxy reverso:

   • Nome: My first VitePress dev site
   • Domínio: servbay-vitepress-test.dev
   • Tipo de Hospedagem: Proxy Reverso
   • IP: 127.0.0.1
   • Porta: 8585

   Consulte as etapas detalhadas em adicionando um site de desenvolvimento Nodejs.

3. Acessar o modo de desenvolvimento

   Abra o navegador e acesse https://servbay-vitepress-test.dev para visualizar o projeto em tempo real. Como o ServBay suporta nomes de domínio personalizados e certificados SSL gratuitos, você desfrutará de maior segurança.

Construir a versão de produção

1. Construir a versão de produção

   Quando concluir o desenvolvimento, use o seguinte comando para construir a versão de produção:

   npm run docs:build

   Após a construção, os arquivos estáticos gerados estarão no diretório docs/.vitepress/dist.

2. Configurar o serviço de arquivos estáticos

   Utilize a funcionalidade de "Hospedagem" do ServBay para acessar a versão de produção através do serviço de arquivos estáticos. Nas configurações de "Hospedagem" do ServBay, adicione um novo site estático:

   • Nome: My first VitePress production site
   • Domínio: servbay-vitepress-test.prod
   • Tipo de Hospedagem: Estático
   • Diretório Raiz do Site: /Applications/ServBay/www/servbay-vitepress-app/docs/.vitepress/dist

3. Acessar o modo de produção

   Abra o navegador e acesse https://servbay-vitepress-test.prod para visualizar a versão de produção construída. Com o domínio personalizado do ServBay e certificados SSL gratuitos, seu site contará com maior segurança e confiabilidade.

Executar no modo URL limpa

Se o seu VitePress estiver executando no modo URL limpa (ou seja, cleanUrls: true), configure as seguintes opções na funcionalidade de "Hospedagem" do ServBay:

• Nome: My first VitePress production site
• Domínio: servbay-vitepress-test.prod
• Configuração personalizada: Marque
• Configuração Caddy:

encode zstd gzip
import set-log servbay-vitepress-test.prod

tls internal

try_files {path} {path}/ {path}.html

root * /Applications/ServBay/www/servbay-vitepress-app/docs/.vitepress/dist

file_server

Após salvar, você poderá acessar o VitePress sem a necessidade de .html. Por exemplo, https://servbay-vitepress-test.prod/path.

Seguindo os passos acima, você criou e executou com sucesso um projeto VitePress, usando as funcionalidades fornecidas pelo ServBay para gerenciar e acessar seu projeto.