prevjs
1.0.0
PrevJS는 EJS 템플릿을 기반으로 구축된 매우 쉬운 정적 웹 사이트 생성기입니다. 주요 목표는 훨씬 적은 작업으로 정적 웹 사이트를 구축, 최적화 및 배포하는 것입니다.
? 생성 - 일반 html, js 및 css 로 코딩하려는 프런트엔드 사용자를 위해 생성되었습니다. 이는 또한 기존 정적 웹사이트를 prevjs 사이트로 쉽게 변환할 수 있음을 의미합니다.
⏱ 빌드 - 사이트맵 생성, 페이지 프리페칭, webp 변환 및 축소를 통해 SEO에 최적화된 내보내기입니다. Google 페이지 속도 도구에서 99점을 받았습니다.
? 배포 - 클릭 한 번으로 CDN에 호스팅할 수 있습니다. AWS CloudFront 에 대한 기본 지원
? 동적 템플릿 - 단일 템플릿을 사용하여 JSON 데이터에서 정적 웹 페이지를 동적으로 생성합니다. 블로그, 문서에 유용
? 내보내기 없이 동적 템플릿 미리보기 . 브라우저에 동적 경로를 입력하기만 하면 PrevJS가 관련 데이터가 포함된 페이지를 자동으로 로드합니다.
? PrevJS 사이트는 기존 웹사이트의 일부일 수 있습니다. prevjs 사이트에는 종속성이나 노드 모듈이 거의 없습니다. JSP 또는 PHP 사이트라도 기존 웹사이트의 일부가 될 수 있습니다.
? 사이트 실시간 미리보기 - 편집 후 웹페이지를 다시 로드하지 않음
? 미래에도 사용할 수 있는 개발 및 내보내기 코드는 특별한 수정이나 라이브러리(ejs 제외)가 필요하지 않으므로 웹 기반입니다. 즉, 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에 있을 수 있습니다. 웹페이지 디자인은 변경되지 않고 페이지마다 데이터만 다를 때 유용합니다.
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 템플릿을 사용하여 웹사이트를 만드는 방법을 알아보려면 해당 웹사이트(https://ejs.co/)를 확인하세요.
이 오픈 소스 웹사이트 빌더는 lo-fi 와이어프레임 분야의 선두주자인 MockFlow의 후원을 받습니다.
