Este é um exemplo de como configurar um site estático com VuePress nos serviços de Hospedagem de Aplicativos ou Sites Estáticos da Kinsta a partir de um repositório do GitHub.
VuePress é um gerador de site estático que permite incorporar conteúdo dinâmico em seus arquivos Markdown usando componentes Vue para produzir páginas HTML estáticas. Mais informações estão disponíveis no site do VuePress.
A Kinsta instala automaticamente as dependências definidas no seu arquivo composer.json durante o processo de implantação.
Hospedagem de site estático
- Faça login no GitHub e crie um novo repositório a partir deste modelo (Use this template > Create a new repository): Kinsta – Hello World – Site Estático com VuePress.
- No MyKinsta, adicione um site estático com o repositório Hello World – VuePress e as seguintes configurações de build:
- Comando de build:
npm run build - Versão do Node: 16.20.0
- Diretório de publicação: ./docs/.vuepress/dist
- Comando de build:
- O site estará disponível assim que a build terminar, e a página Hello World ser carregada na URL do seu site.
Hospedagem de aplicativos
-
Faça login no GitHub e crie um novo repositório a partir deste modelo (Use this template > Create a new repository): Kinsta – Hello World – Site Estático com VuePress
- No MyKinsta, adicione um aplicativo com o repositório “Hello World VuePress”. O Comando Start pode ser deixado em branco para o processo web, pois a Kinsta detecta automaticamente o comando necessário durante a primeira implantação.
- O aplicativo estará disponível assim que a build terminar, e a página Hello World ser carregada na URL do seu aplicativo.
Configuração do servidor web
Porta
Kinsta define automaticamente a variável do ambiente PORT. Você não precisa defini-la ou codificá-la no aplicativo. O pacote serve utiliza a porta definida por Kinsta automaticamente.
Comando start
Quando você implanta o aplicativo, a Kinsta cria automaticamente um processo web com npm start como Comando Start.
Ciclo de vida da implantação
Toda vez que você inicia uma implantação (compilando seu aplicativo ou reimplantando com uma confirmação recebida), o comando npm build é executado, seguido pelo comando npm start.
Página Hello World
O aplicativo ou site estará disponível assim que a build terminar, e a página Hello World ser carregada na URL do seu aplicativo ou na URL do site estático.
