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