prevjs

เกี่ยวกับ

PrevJS เป็นเครื่องมือสร้างเว็บไซต์แบบคงที่ที่ใช้งานง่ายสุด ๆ ที่สร้างจากเทมเพลต EJS เป้าหมายหลักคือการสร้าง เพิ่มประสิทธิภาพ และปรับใช้เว็บไซต์แบบคงที่โดยใช้เวลาน้อยลงมาก

คุณสมบัติ

• สร้าง - สร้างขึ้นสำหรับผู้ใช้งานส่วนหน้าที่ต้องการเขียนโค้ดใน html, js และ css ธรรมดา ซึ่งหมายความว่าคุณสามารถแปลงเว็บไซต์คงที่ที่มีอยู่ให้เป็นไซต์ prevjs ได้อย่างง่ายดาย

• ⏱ สร้าง - ส่งออกได้ รับการปรับให้เหมาะสมสำหรับ SEO ด้วยการสร้างแผนผังเว็บไซต์ การดึงข้อมูลเพจล่วงหน้า การแปลง webp และการลดขนาด คะแนน 99 ในเครื่องมือ Google PageSpeed

• - ปรับใช้ - โฮสต์ไปยัง CDN ของคุณด้วยการคลิก การสนับสนุนนอกกรอบสำหรับ AWS CloudFront

• - เทมเพลตแบบไดนามิก - สร้าง หน้าเว็บแบบคงที่แบบไดนามิก จากข้อมูล JSON ด้วยเทมเพลตเดียว มีประโยชน์สำหรับบล็อก doc

• - ดูตัวอย่างเทมเพลตแบบไดนามิก โดยไม่ต้องส่งออก เพียงป้อนเส้นทางไดนามิกในเบราว์เซอร์ของคุณ จากนั้น PrevJS จะโหลดหน้าเว็บที่มีข้อมูลที่เกี่ยวข้องโดยอัตโนมัติ

• - ไซต์ PrevJS สามารถเป็น ส่วนหนึ่งของเว็บไซต์ที่คุณมีอยู่ได้ เนื่องจากไซต์ prevjs แทบไม่มีการขึ้นต่อกันหรือโมดูลโหนด สามารถเป็นส่วนหนึ่งของเว็บไซต์ที่คุณมีอยู่ได้แม้ว่าจะเป็นไซต์ JSP หรือ PHP ก็ตาม

• - การแสดงตัวอย่างไซต์แบบสด - ไม่ต้องโหลดหน้าเว็บซ้ำหลังจากแก้ไข

• - รองรับอนาคต โค้ดทั้งในการพัฒนาและส่งออกเป็นแบบเว็บเนทีฟ เนื่องจากไม่จำเป็นต้องมีการแก้ไขหรือไลบรารีพิเศษ (ยกเว้น ejs) ซึ่งหมายความว่าแม้ในเหตุการณ์ที่ไม่น่าจะเป็นไปได้ PrevJS จะไม่ได้รับการบำรุงรักษา โค้ดของคุณก็จะไม่หยุดทำงานเหมือนกับเครื่องมือสร้างไซต์ที่ไม่ได้รับการดูแลอื่นๆ

• Ⓜ️ รองรับ เว็บไซต์มาร์กดาวน์ โดยกำเนิด แปลงเว็บไซต์ด้วยไฟล์ .md เป็น html พร้อมด้วยสไตล์และสคริปต์ ตัวอย่าง: https://prevjs.com

ข้อกำหนดเบื้องต้น

ซอฟต์แวร์

• ติดตั้ง nodejs และ npm จาก http://nodejs.org/
• (ทางเลือก - ทางเลือกแทน NPM) ตัวจัดการแพ็คเกจเส้นด้าย ติดตั้ง https://yarnpkg.com/getting-started/install

ความรู้

• จำเป็น: HTML พื้นฐาน, CSS ที่จำเป็นสำหรับการออกแบบหน้าเว็บ
• ทางเลือก: ความรู้เกี่ยวกับเทมเพลต https://ejs.co/ ถือเป็นข้อดีอย่างมาก
• ทางเลือก: Jquery, Bootstrap จะช่วยได้มาก
• ไม่จำเป็นต้องมีความรู้เกี่ยวกับเฟรมเวิร์กแอปพลิเคชันขั้นสูงใดๆ เช่น React

วิธีใช้

ขั้นตอนที่ 1: ติดตั้งคำสั่ง prevjs CLI จากรีจิสทรี NPM

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 cloudfront ที่ใช้งานจริง

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 หรือจาก URL JSON ระยะไกลก็ได้ มีประโยชน์เมื่อการออกแบบหน้าเว็บไม่เปลี่ยนแปลง แต่เพียงข้อมูลที่แตกต่างกันในแต่ละหน้า

แต่ละโฟลเดอร์เทมเพลตภายใน TEMPLATES ควรมีไฟล์ต่อไปนี้ซึ่งมีชื่อเฉพาะเหล่านี้:

template.ejs = ประกอบด้วยโครงสร้างเทมเพลต html ที่เต็มไปด้วยตัวแปรข้อมูล

template.json = ประกอบด้วยอาร์เรย์ของข้อมูลเพจที่ใช้สำหรับสร้างเพจโดยใช้ template.ejs

ตัวอย่าง template.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 ผู้นำด้านโครงร่าง Lo-Fi