QWER: SvelteKit 静态博客启动器

预览

连结

• Github Repo: https://github.com/kwchang0831/svelte-QWER
• Demo 体验站 : https://svelte-qwer.vercel.app/

特点

• 完善的 SEO (OpenGraph Meta)
• 加载性能良好，请参考下方 PageSpeed 评分
• 开箱即用的 Atom / JSON feed, PWA, Sitmap
• 照片前处理，自动转换格式与解析度。响应式图片。
• 编写方式使用 Markdown 语法，基于文件系统的路由。

性能

技术栈

• SvelteKit

• UnoCSS : CSS 引擎

• Marked : Markdown 前处理引擎

• Prismjs : 程式码高亮

• Giscus : 使用 Github Discussion 作为数据源的评论组件

部署

部署可以使用免费的 Vercel 或 Netlify

目前状态

QWER 的设计灵感来自于 Urara。我前一个静态博客是使用 Urara : https://urara.kwchang0831.dev/

QWER 是我第一个 Svelte 的 Project ，边学边写出来的。用了大约 1~2 个月的空闲时间码出来。架构上与效能上肯定还有很多进步的空间。但，目前的状况我觉得已经可以开始来尝试玩看看了。

Demo 网站部署至 Vercel 到建置完成需要约 1 分钟。因为内建响应式图片，会自动进行图片前处理，每张图片约会生成 4 张不同解析度的图片与 2 种格式(avif, webp)，所以图片越多建置的时间也会相对拉长。若关掉响应式图片，建置时间可以省下超过一半以上的时间，不到 30 秒。响应式图片的设定可以依喜好更改，看是要针对哪些解析度与需要哪些格式。

Project 目前才刚开始启动，我还会继续持续开发。

再麻烦各位，如果喜欢我的 Project ，帮我在 Github 上点个 star ⭐。

感谢各位。🙏

更多信息

• 使用教学 : https://svelte-qwer.vercel.app/intro-to-QWER
• Demo 体验站 : https://svelte-qwer.vercel.app/
• Github Repo: https://github.com/kwchang0831/svelte-QWER