หน้าแรก>ซอร์สโค้ด ASP>หมวดหมู่อื่นๆ
ดาวน์โหลด

เครื่องกำเนิดบล็อก Hypermedia Static

นี่คืออะไร?

การสร้างบล็อกโดยใช้รูปแบบการออกแบบ "เกาะ" ฐานข้อมูล SQLite ที่ขับเคลื่อนด้วยแบ็กเอนด์ที่สร้างเว็บไซต์ที่ทันสมัยแบบคงที่

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

สคริปต์จะวนผ่านฐานข้อมูลที่สร้างทั้งเอกสาร HTML ที่แสดงผลอย่างสมบูรณ์และตัวอย่าง DOM สำหรับทุกหน้าบนเว็บไซต์ Nginx อ่านคำขอและจะให้บริการอย่างใดอย่างหนึ่งโดยพิจารณาจากการมีอยู่ของส่วนหัว hx-request hx-boost ใช้เพื่อยกแท็กยึดทั้งหมดไปยังคำขอ AJAX โดยอัตโนมัติทำให้เวทมนตร์เกิดขึ้น เอกสารการตอบสนองมีแท็ก <title> ที่ HTMX รับรู้และนำไปใช้กับหน้าเว็บเพื่อให้ดีกว่า UX & SEO

ภาพหน้าจอ

โพสต์ที่แสดงผล

บล็อก

Backend Post Editor

บรรณาธิการ

การติดแท็กข้อมูลเมตาของบรรณาธิการ

editor_meta

การแก้ไขหมวดหมู่แบ็กเอนด์

edit_cat

อาคาร

คำสั่ง build ทั้งหมดทำงานโดยใช้ Bun

  • bun install จะดึงการพึ่งพาที่ต้องการทั้งหมดลง
  • bun edit เรียกใช้เซิร์ฟเวอร์แบ็กเอนด์สำหรับการจัดการฐานข้อมูล WYSIWYG
  • bun run init สร้างโครงสร้างโฟลเดอร์ dist และย้ายไฟล์เข้าที่สำหรับไซต์ที่แสดงผล
  • bun htmx จะเรียกใช้ TypeScript เพื่อสร้างสินทรัพย์ HTML ของไซต์
  • bun css เรียกใช้สคริปต์ PostCSS เพื่อสร้างและปรับแต่งสไตล์ของไซต์โดยใช้ TailWindSCSS
  • bun start Runs Init, HTMX และ CSS

ข้อมูล

เนื้อหาของไซต์ถูกสร้างขึ้นจากฐานข้อมูล SQLite 4 ตารางที่มี: โพสต์หมวดหมู่แท็กและตารางข้อมูลเมตาเชิงสัมพันธ์ที่สัมพันธ์กัน ตรรกะฐานข้อมูลมีอยู่ใน: SRC/รุ่น

เทมเพลต

แม่แบบ html/หนวดอาศัยอยู่ใน: src/views

สไตล์ชีทหลักอยู่ที่นี่: src/ui/theme.css ฉันรู้ว่าฉันใช้ tailwinds "ผิด" ออกไปที่นี่

โดเมน

มี 2 ​​ไฟล์ที่กำหนดโดเมนทั่วโลกที่ใช้ หนึ่งคือสำหรับตัวแก้ไขแบ็กเอนด์อีกบล็อกตัวเอง พวกเขาเริ่มต้นเป็น //localhost สำหรับการสนับสนุนทางเลือก HTTP

Backend Editor

ตัวแก้ไข WYSIWYG บนเว็บสามารถเข้าถึงได้โดยเรียกใช้ bun edit ตัวแก้ไขสนับสนุนการเพิ่มแก้ไขและลบโพสต์และข้อมูลเมตาของพวกเขารวมถึงหมวดหมู่และแท็กด้วยตัวเอง พอร์ตเริ่มต้นและชื่อโฮสต์ (localhost: 8999) สามารถเปลี่ยนแปลงได้ใน: src/server.ts

เว็บเซิร์ฟเวอร์

การกำหนดค่าตัวอย่าง Nginx มีอยู่ในไดเรกทอรี Nginx "เวทย์มนตร์" ที่แท้จริงเพียงอย่างเดียวคือการต่อท้ายไดเรกทอรีรากเกี่ยวกับการมีอยู่ของส่วนหัวของ HX-Request ในตัวอย่างที่มีอยู่ในไซต์

สถานะ

v1.0 ของโครงการนี้เสร็จสมบูรณ์! ตอนนี้กำลังเปิดบล็อกของฉันที่ https://blog.xe.ro

สิ่งที่ต้องทำและความคิด

  • ทางเลือก nginx (เช่นแคดดี้)
    • nginx hx-header "root rewrite" vs inline hx-get เพื่อ slug url การทดสอบ perf
  • idk อาจเป็นบล็อกจริง? •

พื้นหลัง

(ฉันกำลังคิดที่จะเรียกโครงการนี้ tnthumbs b/c ที่สร้างขึ้นโดยใช้: typeScript nginx tailwindcss htmx unix bun bun sqlite)

การอ้างอิง

  • https://bun.sh/docs
  • https://bun.sh/docs/api/sqlite
  • https://tailwindcss.com/docs
  • https://tailwindcomponents.com/cheatsheet
  • https://htmx.org/docs
  • https://htmx.org/api
  • https://htmx.org/attributes/hx-push-url
  • https://www.nerdfonts.com/cheat-sheet
  • https://github.com/janl/mustache.js
  • http://mustache.github.io/mustache.5.html

ใบอนุญาต

ไฟล์ทั้งหมดใน repo นี้รวมถึงเนื้อหาของบล็อกของฉันได้รับการเผยแพร่ CC0 / Kopimi! ด้วยจิตวิญญาณแห่ง เสรีภาพในการให้ข้อมูล ฉันขอแนะนำให้คุณแยกดัดแปลงเปลี่ยนแปลงแบ่งปันหรือทำสิ่งที่คุณต้องการกับโครงการนี้! ^c^v

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด