hypermedia blog

HyperMedia靜態博客生成器

這是什麼？

使用“島嶼”設計模式建立博客。 SQLITE數據庫驅動的後端，該後端生成了靜態的現代網站。

它如何工作？

腳本通過數據庫循環，為網站上的每個頁面創建了完全渲染的HTML文檔和DOM片段。 NGINX讀取請求，並根據hx-request標題的存在將一個或另一個。 hx-boost被用來自動將所有錨標籤提升到Ajax請求，從而使魔術實現。響應文檔包含<title>標籤，HTMX識別並適用於該頁面以獲得更好的UX＆SEO。

屏幕截圖

渲染帖子

後端郵政編輯器

編輯元數據標記

後端類別編輯

建築

所有構建命令均使用BUN運行。

• bun install將拉下所有所需的依賴項。
• bun edit運行Wysiwyg數據庫管理的後端服務器。
• bun run init構建了dist文件夾結構，並將文件移至渲染站點的位置。
• bun htmx將運行打字稿以實際生成網站的HTML資產。
• bun css運行PostCSS腳本，以使用TailWindScss生成和優化網站的樣式。
• bun start運行INIT，HTMX和CSS。

數據

該網站的內容是從包含4個表SQLite數據庫生成的：帖子，類別，標籤和將它們相關的關係元數據表。數據庫邏輯存在於：SRC/模型中。

模板

html/鬍鬚模板現場：src/views

主要樣式表在這裡：src/ui/theme.css。我知道我在這裡使用尾風“錯誤” 。

域

有2個定義使用的全局域的文件。一個是為後端編輯器，另一個是博客本身。他們默認為//localhost以獲得HTTP後備支持。

後端編輯器

可以通過運行bun edit訪問基於Web的Wysiwyg編輯器。編輯器支持添加，編輯和刪除帖子及其元數據以及類別和標籤本身。默認端口和主機名（localhost：8999）可以更改為：src/server.ts。

Web服務器

NGINX樣本配置可在NGINX目錄中使用。唯一的真正的“魔術”是將hx-Request標題在網站可用示例中存在的根目錄附加到根目錄上。

地位

該項目的V1.0完成了！現在正在https://blog.xe.ro為我的博客提供動力

待辦事項和想法

• nginx替代方案（例如Caddy）
  • nginx HX頭“ root Rebrite”與內聯hx-get to slug urls perf testing
• idk，也許是實際的博客？ •͡㇁•͡

背景

（我正在考慮將此項目稱為b/c ，它是使用以下方式構建的：Typescript nginx tailwindcss htmx unix mustache 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

執照

此存儲庫中的所有文件，包括我的博客內容，都發布了CC0 / Kopimi！本著信息自由的精神，我鼓勵您分叉，修改，更改，共享或做您喜歡的任何事情！ ^c^v