nuxt netlify cms starter template
v2.0.0
Crie sites estáticos e sem servidor com Vue.js e Netlify CMS.
Este é um modelo inicial para construir sites estáticos com Vue.js e Netlify CMS, baseado em Nuxt v1.x. O que cobre:
Configuração via Vue CLI ?
Configure facilmente um projeto Nuxt.js quase em branco.
Atualmente não otimizado para Vue CLI v3.0 .
Edição de conteúdo via Netlify CMS ✏️
Netlify CMS é um CMS do lado do cliente que se conecta diretamente ao seu repositório git para editar arquivos markdown.
Também oferece suporte a outros formatos de arquivo, mas este modelo só funciona com o formato padrão de marcação frontmatter.
Mostrar conteúdo em Vue.js por meio do módulo Nuxtent/Nuxtdown ?️
O módulo Nuxtdown (fork fixo do Nuxtent) permite consultar o conteúdo e mostrá-lo na UI.
Geração de site estático via Nuxt.js ✅
Nuxt.js, a famosa estrutura para construir aplicativos Vue.js universais, gera um site estático.
Modelo inicial Nuxt.js + Netlify CMS
Configuração
Desenvolvimento
Produção
Implantação manual via FTP
Implantar no Netlify
Implante com outras soluções de CI
Pré-requisitos
Configurar
Uso
Problemas conhecidos
Contribuição
Certifique-se de ter node 8.0+ e npm 5.0+ instalados
Você sabe o que é Netlify CMS e Nuxt.js.
Instalar via vue-cli : Se você usar uma versão mais recente do Vue CLI, provavelmente terá que instalar um pacote adicional para que vue init funcione, pois este modelo ainda não está otimizado para o Vue CLI mais recente.
$ vue init renestalder/nuxt-netlify-cms-starter-template meu-projeto
$ cd meu projeto
# instala dependências$ npm install # Ou yarn install Envie o projeto para seu repositório git : para poder editar o conteúdo, você precisa enviar seu projeto para um repositório git. O CMS sempre se conecta diretamente ao repositório git e edita o conteúdo na ramificação definida em static/admin/config.yml .
Legal, você seguiu as etapas importantes para começar. Agora configure todos os componentes corretamente para sua infraestrutura.
Autenticação e modelos CMS Configure onde seu repositório está hospedado e como os usuários do CMS farão login para editar o conteúdo. Defina também arquivos e campos para o seu conteúdo.
Arquivo : static/admin/config.yml
Documentação : Documentação oficial do Netlify CMS -> Configuração
Roteamento e consulta
Imediatamente, a IU não tem ideia de onde seu conteúdo está armazenado e quais rotas dinâmicas pertencem a qual conteúdo. Nuxt.js só pode mapear páginas estáticas por padrão. Rotas dinâmicas, como postagens de blog com nomes de arquivos diferentes, não são detectadas. A configuração para isso acontece pelo Nuxtdown.
Arquivo : nuxtdown.config.js
Documentação : Leiame do Nuxtdown
Informações gerais do site
Informações gerais como tags HTML <head> e títulos de páginas são definidas por meio do Nuxt.js. Não se preocupe com a configuração de roteamento para Nuxt.js, isso é resolvido pelo Nuxtdown.
Arquivo : nuxt.config.js
Documentação : Documentação oficial do Nuxt.js -> Configuração
Durante o desenvolvimento, execute a versão SPA do lado do cliente do seu aplicativo. Use a tarefa dev ou serve , o que for melhor para você. Eles fazem o mesmo.
# serve com hot reloading em localhost:3000$ npm run dev
Acesse http://localhost:3000
Para produção, gere o site estático.
# gera um projeto estático$ npm run generate
Para que funcione em seu servidor de produção, a compilação precisa saber a URL/domínio final onde o site será executado. Para isso, você pode editar a tarefa npm generate:manual no package.json e definir sua URL de produção. Isso é útil quando você implanta manualmente seu site:
# gera um projeto estático que será hospedado na URL fornecida em package.json$ npm run generate:manual
A pasta do seu projeto gerado conterá um arquivo netlify-example.toml que você pode renomear para netlify.toml para começar a implantação do Netlify. Ele define automaticamente o BASE_URL com base na configuração do Netlify e no tipo de implantação (implantação de produção, implantação de filial, implantação de visualização). Portanto, não há necessidade de definir o URL de produção em package.json .
Se você usar outras soluções de CI, sempre deverá certificar-se de que a variável de ambiente BASE_URL esteja definida como a URL onde o site será executado. Ferramentas como o GitLab permitem que você defina variáveis de ambiente nas configurações do projeto e facilitam o uso de qualquer maneira que você queira implantar seu projeto.
Não funciona com Nuxt v2.3.0 e superior : Existem algumas alterações no Nuxt v2.3.0 que não são compatíveis com Nuxtdown/Nuxtent. É por isso que a versão está atualmente corrigida em v2.2.x.
Se você estiver interessado em contribuir com o projeto, consulte CONTRIBUTING.md
