prevjs Télécharger - prevjs Téléchargement du code source

prevjs

Autres catégories

1.0.0

Télécharger

Logo

À propos

PrevJS est un générateur de sites Web statiques très simple, construit sur des modèles EJS. Son objectif principal est de créer, optimiser et déployer des sites Web statiques avec beaucoup moins de travail.

Caractéristiques

?‍ Créer - Créé pour les personnes front-end qui souhaitent coder en HTML, js et css simples . Ce qui signifie également que vous pouvez facilement convertir votre site Web statique existant en un site précédent.
⏱ Build - Export optimisé pour le référencement avec génération de plan de site, prélecture de pages, conversion webp et minification. Scores 99 dans l’outil Google PageSpeed.
? Déployer - Hébergez sur votre CDN en un clic. Prise en charge prête à l'emploi pour AWS CloudFront
? Modèles dynamiques - Générez dynamiquement des pages Web statiques à partir de données JSON avec un seul modèle. Utile pour le blog, la doc
? Aperçu dynamique du modèle sans exportation. Entrez simplement le chemin dynamique dans votre navigateur et PrevJS chargera automatiquement la page avec les données associées
? Les sites PrevJS peuvent faire partie de votre site Web existant . Puisqu'un site prevjs n'a presque pas de dépendances ni de modules de nœuds. Il peut faire partie de votre site Web existant même s'il s'agit d'un site JSP ou PHP.
? Aperçu en direct du site - pas de rechargement des pages Web après l'édition
? À l’épreuve du temps , le code tant en développement qu’à l’exportation est natif du Web car il ne nécessite aucune modification ni bibliothèque particulière (sauf ejs). Ce qui signifie que même dans le cas peu probable où PrevJS ne serait pas maintenu, votre code ne fera pas faillite comme les autres générateurs de sites non maintenus.
Ⓜ️ Prend en charge les sites Web de démarque de manière native. Convertissez le site Web avec des fichiers .md en HTML avec le style et le script. Exemple : https://prevjs.com

Conditions préalables

Logiciel

Installez nodejs et npm depuis http://nodejs.org/.
(Facultatif - alternative à NPM) Gestionnaire de packages Yarn, installez https://yarnpkg.com/getting-started/install

Connaissance

Requis : HTML de base, CSS requis pour la conception de pages Web
Facultatif : La connaissance des modèles https://ejs.co/ est un gros plus
Facultatif : Jquery, Bootstrap aiderait beaucoup
Aucune connaissance requise des frameworks d'application avancés comme React.

Comment utiliser

Étape 1 : Installez la commande CLI prevjs à partir du registre NPM

npm install @produle/prevjs -g

(Facultatif - alternative à NPM) Commande Yarn : yarn --global add @produle/prevjs

Étape 2 : Pour créer un site prevjs très basique (facultatif)

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

Étape 3 : Pour prévisualiser votre site Web sur un ordinateur local

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

Étape 4 : Pour optimiser et exporter votre site Web pour la production

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

Étape 5 : Pour déployer votre site Web exporté en production AWS cloudfront

prevjs --deploy /path-to-my-website-folder/recipe.json (nécessite la configuration de la commande aws)

Pour répertorier les recettes de sites Web disponibles localement

prevjs --list-recipes local

Pour installer une recette particulière

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

Exemple de structure de site 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

Exemple de fichier recette.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": ""
  }
}

Génération de pages dynamiques à l'aide de MODÈLES

Ce dossier TEMPLATES est utilisé pour générer dynamiquement des pages avec des données. Les données peuvent être soit en ligne dans le fichier template.json, soit à partir d'une URL JSON distante. Utile lorsque la conception de la page Web ne change pas mais que seules ses données sont différentes pour chaque page.

Chaque dossier de modèles dans TEMPLATES doit contenir les fichiers suivants portant ces noms spécifiques :

template.ejs = Contient la structure HTML du modèle remplie de variables de données

template.json = Contient un tableau de données de page utilisé pour générer des pages à l'aide de template.ejs

Exemple de modèle.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"
    
    }
  ]
}

Conseils

Pour configurer des chemins absolus vers les actifs dans les fichiers ejs, utilisez cette variable <%= siteobj.urlpath => Elle est livrée avec une barre oblique finale et détecte automatiquement entre les environnements local et de production.