Download prevjs - download do código-fonte prevjs

prevjs

Outras categorias

1.0.0

Baixar

Logotipo

Sobre

PrevJS é um gerador de sites estáticos super fácil construído sobre modelos EJS. Seu principal objetivo é construir, otimizar e implantar sites estáticos com muito menos trabalho.

Características

?‍ Criar - Criado para pessoas front-end que desejam codificar em HTML, js e css simples . O que também significa que você pode converter facilmente seu site estático existente em um site prevjs
⏱ Build - Exportação otimizada para SEO com geração de sitemap, pré-busca de página, conversão webp e minificação. Pontuação 99 na ferramenta Pagespeed do Google.
? Implantar - Hospede seu CDN com um clique. Suporte pronto para uso para AWS CloudFront
? Modelos dinâmicos – Gere páginas da web estáticas dinamicamente a partir de dados JSON com um único modelo. Útil para blog, documento
? Visualização dinâmica do modelo sem exportação. Basta inserir o caminho dinâmico em seu navegador e o PrevJS carregará automaticamente a página com os dados relacionados
? Os sites PrevJS podem fazer parte do seu site existente . Já que um site prevjs quase não tem dependências ou módulos de nó. Ele pode fazer parte do seu site existente, mesmo que seja um site JSP ou PHP.
? Visualização ao vivo do site - sem recarregar as páginas da web após a edição
? Preparado para o futuro , o código tanto em desenvolvimento quanto em exportação é nativo da web, pois não requer modificações ou bibliotecas especiais (exceto ejs). O que significa que mesmo no caso improvável de o PrevJS não ser mantido, seu código não irá quebrar como outros geradores de sites não mantidos.
Ⓜ️ Suporta sites de markdown nativamente. Converta sites com arquivos .md em HTML junto com estilo e script. Exemplo: https://prevjs.com

Pré-requisitos

Programas

Instale nodejs e npm em http://nodejs.org/.
(Opcional - alternativa ao NPM) Gerenciador de pacotes Yarn, instale https://yarnpkg.com/getting-started/install

Conhecimento

Obrigatório: HTML básico, CSS necessário para design de páginas da web
Opcional: conhecimento de modelos https://ejs.co/ é uma grande vantagem
Opcional: Jquery, Bootstrap ajudaria muito
Não é necessário conhecimento de nenhuma estrutura de aplicativo avançada, como reagir.

Como usar

Etapa 1: instalar o comando CLI prevjs do registro NPM

npm install @produle/prevjs -g

(Opcional - alternativa ao NPM) Comando Yarn: yarn --global add @produle/prevjs

Etapa 2: para criar um site prevjs muito básico (opcional)

prevjs --create /path-to-where-my-website-folder-should-be/

Etapa 3: para visualizar seu site na máquina local

prevjs --run /path-to-my-website-folder/recipe.json

Passo 4: Para otimizar e exportar seu site para produção

prevjs --export /path-to-my-website-folder/recipe.json

Etapa 5: para implantar seu site exportado em produção AWS cloudfront

prevjs --deploy /path-to-my-website-folder/recipe.json (requer configuração do comando aws)

Para listar receitas de sites disponíveis localmente

prevjs --list-recipes local

Para instalar uma receita específica

prevjs --create business1 /path-to-my-site/recipe.json

Exemplo de estrutura de site PrevJS

 website/recipe.json => Stores configuration of this website for PrevJS
website/index.ejs => Index page of the website
website/about/index.ejs => Example route of another page in site

website/DRAFTS => Any page that should not be deployed, are placed inside this folder
website/DRAFTS/working.ejs => Example drafts page

website/PARTIALS => All re-used components and sections of website used in multiple pages
website/PARTIALS/header.ejs => Example partial for header in all pages

website/TEMPLATES => Contains templates for dynamically generating pages from json data
website/TEMPLATES/example-template/template.ejs => HTML page with data variables of an example template
website/TEMPLATES/example-template/template.json => Contains array of page data each with unique dynamic route

website/STATIC => All static files like images,js and css are stored here
website/STATIC/css/external => All third party css files
website/STATIC/css/internal => All internal styles written for this site
website/STATIC/js/external => All third party JS files and libraries
website/STATIC/js/internal => All internal js code written for this site
website/STATIC/images => Images used in this website, can be nested like webpages
website/STATIC/favicon.ico => Website Favicon

Arquivo de amostra de receita.json

 {
  "recipe_ver": "0.0.1",
  "name": "business-website",
  "description": "Business - Product site",
  "author": "Business Inc",
  "production_url": "https://business.com",
  
   "optimize": {
    "webp": "true",
    "minify_js": "true",
    "minify_css": "true",
    "minify_html": "true"
  },
  "deploy": {
    "domain": "https://business.com",
    "type": "aws",
    "aws_bucket": "",
    "aws_cfdistributions": ""
  }
}

Geração dinâmica de páginas usando TEMPLATES

Esta pasta TEMPLATES é usada para gerar páginas com dados dinamicamente. Os dados podem estar embutidos dentro do template.json ou de um URL JSON remoto. Útil quando o design da página da web não muda, mas apenas os dados são diferentes para cada página.

Cada pasta de modelo dentro de TEMPLATES deve conter os seguintes arquivos com estes nomes específicos:

template.ejs = Contém a estrutura HTML do template preenchida com variáveis de dados

template.json = Contém uma matriz de dados de página que é usada para gerar páginas usando template.ejs

Exemplo de modelo.json

 {
  "generate": true,
  "pages": [
    {
      "path": "doc/article1",
      "source": "inline",
      "data": {
        "title": "Doc Title 1",
        "post": "Post article 1"
      }
    },
    {
      "path": "doc/article2",
      "source": "jsonurl",
      "dataurl": "https://recipes.prevjs.com/examples/basic/article2.json"
    
    }
  ]
}

Pontas

Para configurar caminhos absolutos para ativos dentro dos arquivos ejs, use esta variável <%= siteobj.urlpath => Ela vem com uma barra final e detecta automaticamente entre ambientes locais e de produção.