Descarga prevjs - Descarga del código fuente prevjs

prevjs

Otras categorias

1.0.0

Descargar

Logo

Acerca de

PrevJS es un generador de sitios web estáticos muy sencillo creado sobre plantillas EJS. Su objetivo principal es crear, optimizar e implementar sitios web estáticos con mucho menos trabajo.

Características

?‍ Crear: creado para usuarios de front-end que desean codificar en html, js y css sin formato . Lo que también significa que puede convertir fácilmente su sitio web estático existente en un sitio prevjs.
⏱ Compilación: exportación optimizada para SEO con generación de mapas del sitio, búsqueda previa de páginas, conversión y minificación de páginas web. Obtiene una puntuación de 99 en la herramienta de velocidad de página de Google.
? Implementar: alojar en su CDN con un clic. Soporte listo para usar para AWS CloudFront
? Plantillas dinámicas: genere páginas web estáticas de forma dinámica a partir de datos JSON con una única plantilla. Útil para blog, doc.
? Vista previa de plantilla dinámica sin exportación. Simplemente ingrese la ruta dinámica en su navegador y PrevJS cargará automáticamente la página con datos relacionados.
? Los sitios PrevJS pueden ser parte de su sitio web existente . Dado que un sitio prevjs casi no tiene dependencias ni módulos de nodo. Puede ser parte de su sitio web existente incluso si es un sitio JSP o PHP.
? Vista previa en vivo del sitio: no es necesario recargar las páginas web después de editarlas
? A prueba de futuro , el código tanto en desarrollo como en exportación es nativo de la web, ya que no requiere modificaciones ni bibliotecas especiales (excepto ejs). Lo que significa que incluso en el improbable caso de que PrevJS no se mantenga, su código no se arruinará como otros generadores de sitios sin mantenimiento.
Ⓜ️ Admite sitios web de rebajas de forma nativa. Convierta un sitio web con archivos .md a html junto con estilo y script. Ejemplo: https://prevjs.com

Requisitos previos

Software

Instale nodejs y npm desde http://nodejs.org/.
(Opcional: alternativa a NPM) Administrador de paquetes Yarn, instale https://yarnpkg.com/getting-started/install

Conocimiento

Requerido: HTML básico, CSS requerido para el diseño de páginas web
Opcional: el conocimiento de las plantillas https://ejs.co/ es una gran ventaja
Opcional: Jquery, Bootstrap ayudaría mucho
No se requieren conocimientos de ningún marco de aplicación avanzado como reaccionar.

como usar

Paso 1: Instale el comando CLI prevjs desde el registro de NPM

npm install @produle/prevjs -g

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

Paso 2: crear un sitio prevjs muy básico (opcional)

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

Paso 3: Para obtener una vista previa de su sitio web en la máquina local

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

Paso 4: optimizar y exportar su sitio web para producción

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

Paso 5: Para implementar su sitio web exportado en producción AWS Cloudfront

prevjs --deploy /path-to-my-website-folder/recipe.json (Requiere configuración del comando aws)

Para enumerar recetas de sitios web disponibles localmente

prevjs --list-recipes local

Para instalar una receta particular

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

Ejemplo de estructura del sitio web 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

Archivo receta.json de muestra

 {
  "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": ""
  }
}

Generación dinámica de páginas usando PLANTILLAS

Esta carpeta PLANTILLAS se utiliza para generar páginas con datos dinámicamente. Los datos pueden estar en línea dentro de template.json o desde una URL JSON remota. Útil cuando el diseño de la página web no cambia pero solo sus datos son diferentes para cada página.

Cada carpeta de plantilla dentro de PLANTILLAS debe contener los siguientes archivos con estos nombres específicos:

template.ejs = Contiene la estructura html de la plantilla llena de variables de datos

template.json = Contiene una matriz de datos de página que se utiliza para generar páginas usando template.ejs

Plantilla de muestra.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"
    
    }
  ]
}

Consejos

Para configurar rutas absolutas a los recursos dentro de los archivos ejs, use esta variable <%= siteobj.urlpath => Viene con una barra diagonal y detecta automáticamente entre los entornos local y de producción.