prevjs

关于

PrevJS 是一个基于 EJS 模板构建的超级简单的静态网站生成器。它的主要目标是以更少的工作来构建、优化和部署静态网站。

特征

• ?‍ 创建 - 为想要使用纯 html、js 和 css进行编码的前端人员创建。这也意味着您可以轻松地将现有的静态网站转换为 prevjs 网站

• ⏱ 构建 - 通过站点地图生成、页面预取、webp 转换和缩小，针对 SEO 进行了优化导出。在 Google pagespeed 工具中得分为 99。

• ？部署 - 单击即可托管到您的 CDN。对AWS CloudFront 的开箱即用支持

• ？动态模板 - 使用单个模板从 JSON 数据动态生成静态网页。对于博客、文档有用

• ？动态模板预览，无需导出。只需在浏览器中输入动态路径，PrevJS 就会自动加载包含相关数据的页面

• ？ PrevJS 网站可以是您现有网站的一部分。由于 prevjs 站点几乎没有依赖项或节点模块。即使它是 JSP 或 PHP 网站，它也可以是您现有网站的一部分。

• ？网站实时预览- 编辑后无需重新加载网页

• ？面向未来，开发和导出中的代码都是 Web 原生的，因为它不需要特殊的修改或库（ejs 除外）。这意味着即使在 PrevJS 未维护的罕见事件中，您的代码也不会像其他未维护的站点生成器那样崩溃。

• Ⓜ️原生支持Markdown 网站。将带有 .md 文件的网站以及样式和脚本转换为 html。示例：https://prevjs.com

先决条件

软件

• 从 http://nodejs.org/ 安装 nodejs 和 npm。
• （可选 - NPM 的替代方案）Yarn 包管理器，安装 https://yarnpkg.com/getting-started/install

知识

• 要求：网页设计所需的基本HTML、CSS
• 可选：了解 https://ejs.co/ 模板是一个很大的优势
• 可选：Jquery、Bootstrap 会有很大帮助
• 不需要了解任何高级应用程序框架（例如 React）。

如何使用

第 1 步：从 NPM 注册表安装 prevjs CLI 命令

npm install @produle/prevjs -g

（可选 - NPM 的替代方案） Yarn 命令： yarn --global add @produle/prevjs

第 2 步：创建一个非常基本的 prevjs 站点（可选）

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

第 3 步：在本地计算机中预览您的网站

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

第 4 步：优化并导出您的网站以进行生产

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

步骤 5：在生产 AWS 云中部署导出的网站

prevjs --deploy /path-to-my-website-folder/recipe.json （需要 aws 命令设置）

列出本地可用的网站食谱

prevjs --list-recipes local

安装特定配方

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

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

示例recipe.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": ""
  }
}

使用 TEMPLATES 生成动态页面

此 TEMPLATES 文件夹用于动态生成包含数据的页面。数据可以内嵌在 template.json 中，也可以来自远程 JSON url。当网页设计不变但每个页面的数据不同时很有用。

TEMPLATES 中的每个模板文件夹应包含以下具有这些特定名称的文件：

template.ejs = 包含填充数据变量的模板 html 结构

template.json = 包含页面数据数组，用于使用 template.ejs 生成页面

示例模板.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"
    
    }
  ]
}

尖端

要设置 ejs 文件内资产的绝对路径，请使用此变量<%= siteobj.urlpath =>它带有尾部斜杠，并自动在本地和生产环境之间进行检测。

关于EJS

要了解有关 EJS 以及如何使用 EJS 模板创建网站的更多信息，请查看他们的网站 https://ejs.co/

赞助商

这个开源网站构建器由低保真线框图领域的领导者 MockFlow 赞助。