menimal

มินิมอล ?

Menimal เป็น ตัวสร้างไซต์คง ที่ขั้นต่ำ

มุ่งเน้นไปที่เนื้อหา: เพียงเขียนไฟล์มาร์กดาวน์ สไตล์ CSS แล้วทุกอย่างจะถูกสร้างขึ้นสำหรับคุณ

Menimal นั้นเรียบง่ายโดยการออกแบบ:

• ไม่มีจาวาสคริปต์ (ไม่มี package.json )
• ไม่มีเทมเพลต HTML
• ไม่มี mdx
• ไม่มี SEO หรือข้อมูลเมตา

---

• เริ่มต้นใช้งาน
  • ปรับใช้
• โครงสร้างโฟลเดอร์
  • pages
  • static
  • config.json
  • style.css
• แผนการทำงาน
• ใบอนุญาต
• หมายเหตุ
  • ตัวสร้างไซต์คงที่อื่น ๆ
  • การพัฒนา
  • การนำไปปฏิบัติ

เริ่มต้นใช้งาน

Menimal เป็นสคริปต์ npx เดียวที่คุณสามารถเรียกใช้ได้จากทุกที่โดยไม่ต้องติดตั้งแพ็คเกจใดๆ

ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง NodeJs บนเครื่องของคุณแล้ว

คุณเพียงแค่ต้องเรียกใช้คำสั่งเดียว:

npx menimal

สิ่งนี้จะสร้างโฟลเดอร์ build ด์ที่มีเว็บไซต์คงที่ของคุณ

ปรับใช้

แพลตฟอร์มโฮสติ้งอนุญาตให้กำหนดคำสั่ง build และโฟลเดอร์เอาต์พุต:

• คำสั่ง Build: npx menimal
• โฟลเดอร์เอาท์พุต: build

นั่นคือทั้งหมดที่ คุณสามารถปรับใช้ Menimal ได้ทุกที่ ?

---

โครงสร้างโฟลเดอร์

Menimal ต้องการโครงสร้างโฟลเดอร์ที่แม่นยำ:

• pages : มีไฟล์มาร์กดาวน์ ( .md )
• static : มีไฟล์คงที่ ( robots.txt , fonts , favicon.ico )
• config.json : มีการกำหนดค่าไซต์ (น้อยที่สุด)
• style.css : มีสไตล์ (ไฟล์ css เดียว)

ดูตัวอย่างที่สมบูรณ์และใช้งานได้ภายในโฟลเดอร์ตัวอย่าง

pages

ไฟล์มาร์กดาวน์ทุกไฟล์จะสอดคล้องกับหน้า .html ในเว็บไซต์

ชื่อของไฟล์ .md ใช้เพื่อสร้างทั้งชื่อของไฟล์ HTML และชื่อของเพจ:

• ไฟล์ HTML: เหมือนกับ .md ที่มีอักขระตัวพิมพ์เล็กทั้งหมด
• ชื่อเรื่อง: เหมือนกับ .md โดยมี - แทนที่ด้วยการเว้นวรรค

ตัวอย่างเช่น This-is-the-Title-of-the-article.md จะสร้าง:

• HTML: this-is-the-title-of-the-article.html
• ชื่อเรื่อง: นี่คือชื่อของบทความ

static

ไฟล์ทั้งหมดที่อยู่ใน static จะถูกคัดลอกในบิลด์สุดท้าย

ที่นี่คุณสามารถเพิ่มรูปภาพ แบบอักษร robots.txt , favicon.ico , sitemap.xml หรืออะไรก็ได้จริงๆ ??‍♂️

config.json

สำหรับตอนนี้การกำหนดค่าต้องใช้ฟิลด์เดียว: ชื่อของเว็บไซต์ที่แสดงใน <header> :

{
  "name" : " Sandro Maglione "
}

style.css

สไตล์ทั้งหมดถูกกำหนดไว้ ในไฟล์ css ไฟล์เดียว

คุณสามารถดูโครงสร้าง HTML ที่สร้างขึ้นของแต่ละไฟล์ภายในเทมเพลต

ไฟล์นี้จะถูกย่อขนาดและนำเข้าในทุกเพจที่สร้างขึ้น

แผนการทำงาน

• โหลดแบบอักษรล่วงหน้าในรูปแบบ HTML

 < link rel =" preload " href =" font.woff2 " as =" font " crossorigin type =" font/woff2 " > 

ใบอนุญาต

ใบอนุญาต MIT โปรดดูรายละเอียดในไฟล์ LICENSE.md

---

หมายเหตุ

โครงการนี้เป็นส่วนหนึ่งของจดหมายข่าวรายสัปดาห์ของฉันที่ sandromaglione.com

ตัวสร้างไซต์คงที่อื่น ๆ

• เฮกโซ
• เจคิลล์
• ฮิวโก้

การพัฒนา

• ใช้ npx --loglevel silly .. จากโฟลเดอร์ example เพื่อแก้ไขข้อบกพร่องคำสั่ง npx

การนำไปปฏิบัติ

อ่านรายละเอียดการดำเนินการทั้งหมดได้ในบทความเต็ม ?