prevjs
1.0.0
PrevJS は、EJS テンプレート上に構築された非常に簡単な静的 Web サイト ジェネレーターです。その主な目標は、はるかに少ない作業で静的 Web サイトを構築、最適化、展開することです。
? 作成 -プレーンな html、js、cssでコードを作成したいフロントエンド担当者向けに作成されています。これは、既存の静的 Web サイトを prevjs サイトに簡単に変換できることも意味します。
⏱ ビルド - サイトマップの生成、ページのプリフェッチ、WebP 変換、縮小化により、SEO 向けに最適化されたエクスポート。 Googleのpagespeedツールでは99点を獲得。
?導入 - クリックひとつで CDN にホストします。 AWS CloudFrontのすぐに使えるサポート
?動的テンプレート - 単一のテンプレートを使用して、JSON データから静的 Web ページを動的に生成します。ブログやドキュメントに便利
?エクスポートを行わない動的なテンプレートのプレビュー。ブラウザに動的パスを入力するだけで、PrevJS が関連データを含むページを自動的にロードします。
? PrevJS サイトは、既存の Web サイトの一部にすることができます。 prevjs サイトには依存関係やノード モジュールがほとんどありません。 JSP または PHP サイトであっても、既存の Web サイトの一部にすることができます。
?サイトのライブ プレビュー- 編集後に Web ページを再読み込みする必要はありません
?将来性もあり、特別な変更やライブラリ (ejs を除く) を必要としないため、開発時とエクスポート時のコードは両方とも Web ネイティブです。つまり、PrevJS がメンテナンスされていないというありそうもない出来事があったとしても、他のメンテナンスされていないサイト ジェネレーターのようにコードが破綻することはありません。
npm install @produle/prevjs -g
(オプション - NPM の代替) Yarn コマンド: yarn --global add @produle/prevjs
prevjs --create /path-to-where-my-website-folder-should-be/
prevjs --run /path-to-my-website-folder/recipe.json
prevjs --export /path-to-my-website-folder/recipe.json
prevjs --deploy /path-to-my-website-folder/recipe.json (aws コマンドのセットアップが必要)
prevjs --list-recipes local
prevjs --create business1 /path-to-my-site/recipe.json
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_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 フォルダーは、データを含むページを動的に生成するために使用されます。データは、template.json 内にインラインで配置することも、リモート JSON URL から取得することもできます。 Web ページのデザインは変更せず、ページごとにデータのみが異なる場合に便利です。
TEMPLATES 内の各テンプレート フォルダーには、次の特定の名前を持つファイルが含まれている必要があります。
template.ejs = データ変数が埋め込まれたテンプレート HTML 構造が含まれています
template.json = template.ejs を使用してページを生成するために使用されるページ データの配列が含まれています
{
"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 テンプレートを使用して Web サイトを作成する方法については、Web サイト https://ejs.co/ を参照してください。
このオープンソース Web サイト ビルダーは、ローファイ ワイヤーフレームのリーダーである MockFlow によってスポンサーされています。
