teeny

Teeny: เครื่องกำเนิดไซต์แบบคงที่อย่างง่าย

ข้อจำกัดความรับผิดชอบ: นี่เป็นเครื่องมือที่ฉันสร้างขึ้นในสองสามชั่วโมงเพื่อสร้างบล็อกส่วนตัวของฉัน Yakkomajuri.github.io ตอนนี้มันไม่ได้ทำอะไรมากและอาจจะไม่เคย

- เริ่มต้นอย่างรวดเร็ว

npm i -g teeny-cli # yarn global add teeny-cli
teeny init && teeny develop

สำหรับตัวอย่างของโครงการที่ใช้ Teeny ลองดู repo ของบล็อกส่วนตัวของฉัน

backstory

คุณสามารถอ่านเกี่ยวกับแรงจูงใจของฉันในการสร้าง Teeny ในโพสต์บล็อกนี้ชื่อ "ทำไมฉันสร้างตัวสร้างไซต์คงที่ของตัวเอง"

คำสั่งที่รองรับ

เริ่มต้นโครงการเล็ก ๆ ในไดเรกทอรีปัจจุบัน

teeny init

สร้างไฟล์ HTML แบบคงที่และเพิ่มลงใน public/

teeny build

เริ่มเซิร์ฟเวอร์ Teeny ในเครื่องที่รับฟังการเปลี่ยนแปลงไฟล์

teeny develop

- มันทำงานอย่างไร

Teeny เป็นเครื่องกำเนิดไซต์แบบคงที่ที่เรียบง่ายสร้างขึ้นเพื่อให้เหมาะกับความต้องการของฉันและความต้องการของฉันเท่านั้น

ทั้งหมดที่ทำคือสร้างหน้าเว็บตามเทมเพลต HTML และเนื้อหา markdown

มันทำน้อยมากและมีความเห็นอย่างมาก ( อ่าน: ฉันขี้เกียจเกินไปที่จะสร้างตัวจัดการการปรับแต่ง/เงื่อนไข ) แต่ทำให้ฉันสามารถสร้างบล็อกที่ฉันมีความสุขด้วยอย่างรวดเร็ว

โดยพื้นฐานแล้วมีเพียง 2 แนวคิดที่คุณต้องคิดเกี่ยวกับ: เทมเพลตและหน้า

เทมเพลต

เทมเพลตเป็น HTML ธรรมดาและควรเพิ่มลงใน templates/ ไดเรกทอรีย่อย

พวกเขาสามารถมีองค์ประกอบที่มี page-content รหัส ID ซึ่งเป็นที่ที่วัยรุ่นเพิ่ม HTML ที่สร้างขึ้นโดยการแยกวิเคราะห์เนื้อหา markdown

หน้า

Markdown เป็นพลเมืองชั้นหนึ่งในวัยรุ่นดังนั้นหน้าเว็บทั้งหมดของเว็บไซต์ของคุณจึงถูกกำหนดโดยไฟล์ Markdown

ไฟล์ไม่จำเป็นต้องมีเนื้อหาจริงใด ๆ ดังนั้นหากคุณต้องการให้เพจถูกกำหนดอย่างหมดจดใน HTML คุณเพียงแค่ต้องสร้างเทมเพลตที่อ้างอิงจากไฟล์หน้า

ในการระบุว่าหน้าเทมเพลตควรใช้คุณสามารถระบุได้ในหน้า frontmatter ของหน้าเช่น:

 ---
template: blog
---

ในตัวอย่างข้างต้น Teeny จะมองหาเทมเพลตที่เรียกว่า blog.html หากไม่ได้ระบุเทมเพลต Teeny จะมองหาไฟล์ default.html ใน templates/ และใช้สิ่งนั้น

ตัวอย่างการใช้งาน

นี่คือตัวอย่างของ Teeny ในที่ทำงาน

ในการเริ่มต้นโครงการเล็ก teeny init สิ่งนี้จะสร้างสิ่งต่อไปนี้ในไดเรกทอรีปัจจุบันของคุณ:

 .
├── pages
│   └── index.md
├── static
│   └── main.js
└── templates
    ├── default.html
    └── homepage.html

ถ้าคุณเรียกใช้ teeny build คุณจะต้องจบลงด้วยสิ่งนี้:

 .
├── pages
│   └── index.md
├── public
│   ├── index.html
│   └── main.js
├── static
│   └── main.js
└── templates
    ├── default.html
    └── homepage.html

index.md ใช้เทมเพลต homepage และร่วมกันสร้าง index.html เป็นมาตรฐานกับ SSG อื่น ๆ ไฟล์คงที่จะถูกเสิร์ฟจาก public/

นอกจากนี้คุณยังสังเกตเห็น main.js ถูกย้ายไปยัง public/ ด้วย Teeny จะใช้ไฟล์ที่ไม่ใช่แบบไม่ใช้เทมเพลตและไม่ใช่หน้าทั้งหมดจาก pages/ , templates/ และ static/ และคัดลอกไปยัง public/ ตามโครงสร้างเดียวกันจากไดเรกทอรี Origin

เหตุผลสำหรับเรื่องนี้คือจริง ๆ แล้วฉันไม่ต้องการนำเข้า "เวทมนตร์" ซึ่งคุณต้องนำเข้าสินทรัพย์คงที่จากเส้นทางที่ไม่สอดคล้องกับโครงสร้างไดเรกทอรีจริง ด้วยเหตุนี้ฉันจึงตัดสินใจว่าไฟล์คงที่จะอยู่ภายใน templates/ และ pages/ ตามความจำเป็น

หลังจากนั้นฉันก็ยอมจำนนต่อวิธี static/ ไดเรกทอรีแม้ว่าอาจมีสินทรัพย์ทั้งหน้าและแม่แบบต้องการใช้ นำเข้าจาก static/ เป็น "เวทมนตร์" ซึ่งหมายความว่าคุณต้องคิดเกี่ยวกับผลลัพธ์ของ teeny build เพื่อให้พวกเขาทำงาน

คำสั่งสุดท้ายที่ Teeny สนับสนุนคือ teeny develop สิ่งนี้สร้างเซิร์ฟเวอร์ HTTP ไปยังไฟล์เซิร์ฟเวอร์จาก public/ ไดเรกทอรีย่อย

มันฟังการเปลี่ยนแปลงไฟล์และอัปเดตไฟล์คงที่ทันที (ไร้เดียงสาโดยเพียงแค่สร้างทุกอย่างในแต่ละครั้งที่ตรวจจับการเปลี่ยนแปลง)

- การปรับปรุงในอนาคตที่มีศักยภาพ

ฉันต้องการให้เล็ก ๆ น้อยที่สุดเท่าที่จะทำได้ ฉันจงใจใส่รหัสทั้งหมดไว้ในไฟล์เดียวเพื่อเป็นเครื่องเตือนใจตัวเองว่านี่ควรจะเป็นเครื่องมือง่ายๆสำหรับฉันในการสร้างบล็อกคงที่อย่างง่าย ๆ อย่างรวดเร็ว

อย่างไรก็ตามมันสามารถใช้การอัพเกรด "ประสบการณ์นักพัฒนาซอฟต์แวร์" ไม่กี่อย่างเช่นวิธีการที่ได้รับการปรับปรุงให้ดีที่สุดใน teeny develop แทนที่จะสร้างทุกอย่างขึ้นใหม่อย่างไร้เดียงสารวมถึงตัวเลือกการปรับแต่งที่ดีขึ้น