Shiro博客:接入websocket,让博客也拥有像 B 站和 L 站一样在线阅读人数显示,自带SEO。

Shiro

一个极简主义的个人网站,纸的纯净和雪的清新。

Mix Space 服务的个人站点前端。

以下是一些使用 Shiro 的示例站点:

欢迎你来体验 Shiro 的魅力!

:sparkles: 特征

  1. :rocket: SEO 100%,性能优秀:在 LightHouse 中表现优秀,Performance > 90%,Best practice > 90%。
  2. :art: UI 现代化,简洁不简单:用户界面设计现代化,简洁而不简单,让你的体验更加流畅。
  3. :gem: 注重细节,UX 极致:注重每一个细节,所有的动画都使用符合物理的 Spring 弹性动画,每一帧都是大自然的感觉。
  4. :bell: 接入 WebSocket,实时获取最新的文章通知:通过 WebSocket,访客能够实时获取最新的文章通知。
  5. :computer: 实时活动状态展示:配合 ProcessReporter,可以在主页上显示实时活动状态。
  6. :pencil: Markdown 的扩展语法:支持更多的 Markdown 扩展语法,等待你的发掘和使用。
  7. :zap: 轻量级管理面板:可以在管理面板中管理文章、评论等。

:wrench: 技术栈

  • NextJS (App Router)
  • Jotai
  • Framer motion
  • Radix UI
  • Socket.IO
  • TailwindCSS

:page_facing_up: 使用文档

前往:Shiro 主题 | Mix Space

感谢 @wibus-wee@wuhang2003 等其他社区贡献者编写。

:camera: 截图

轻管理面板:


点击查看部分完整页面截图


:zap: 性能

在 M2 Macbook Air 环境中对逻辑最重的页面进行了测试。

:rocket: 部署

看这里.

:whale: 运行

:hammer: 通过预构建运行

首先在 https://github.com/Innei/Shiro/releases 中下载预构建好的 release.zip。然后解压它。

cd standalone
vim .env # 修改你的 ENV 变量
export PORT=2323
node server.js

:books: 推荐使用 Docker Compose

mkdir shiro
cd shiro
wget https://raw.githubusercontent.com/Innei/Shiro/main/docker-compose.yml
wget https://raw.githubusercontent.com/Innei/Shiro/main/.env.template .env

vim .env # 修改你的 ENV 变量
docker compose up -d

docker compose pull # 后续更新镜像

Markdown 扩展语法

请阅读 React Components

作者个人网站 · GitHub @Innei

11 Likes

看了下 很不错

好漂亮的博客!

不错,移动端也好看

其实好看

佬哥发帖格式就看的很舒服 专业的