大版本更新
一口气全面统一博客样式,移除部分冗余导航页面,更专注内容展示。
不因虚度年华而悔恨,不因碌碌无为而羞愧
无论你想直接用主题源码建站,还是安装 shirones npm 包,这篇安装指南都能带你跑通第一步。

本站由 Shirone 主题驱动——一个基于 Astro 7、Svelte 5 与 Tailwind CSS 4 的 Material 3 Expressive 博客主题。这篇记录两种安装路线:直接克隆主题源码,或安装 npm 包。两种方式跑起来后效果一致,区别在于后续升级的姿势。
node -v 验证corepack enable适合想深度定制、参与主题开发的人,本站就是这么跑的。
1git clone https://github.com/LyraVoid/Shirone.git my-blog2cd my-blog3pnpm install4pnpm dev打开 http://localhost:4321 就能看到带示例内容的完整站点。常用脚本还有:
1pnpm build # 构建静态站点到 dist/2pnpm preview # 本地预览构建产物3npx astro check # .astro 文件类型检查适合只想写文章、不碰主题源码的人。在一个空目录里:
1pnpm init2pnpm install shirones3pnpm exec shirone initinit 命令会生成 astro.config.mjs、最小配置目录和内容骨架,之后同样用 pnpm dev 启动。主题升级只需 pnpm update shirones,你的配置和内容完全不受影响。
Shirone 官方提供 Shirone-Content 内容模板仓库,把”文章 + 媒体 + 配置覆盖”放进独立仓库。这是本站采用的模式:
shirone.content.json,指向你的内容仓:1{2 "source": {3 "type": "git",4 "remote": "https://github.com/你的用户名/你的内容仓.git",5 "branch": "main"6 }7}pnpm content:sync,内容会被物化到主题的 src/content/、src/data/ 等目录pnpm content:status 检查连接状态,pnpm content:validate 校验内容合法性如果内容仓就在本机(比如 ../my-content),可以写一个 .env 文件:
1CONTENT_DIR=../my-content本地路径优先级高于 shirone.content.json 里的 git 源,适合改动频繁的写作期。
pnpm build 产出的 dist/ 是纯静态文件,扔到哪都能跑:
pnpm build,输出目录 dist,之后 push 即自动部署dist/ 目录即可站点能跑起来只是开始。接下来建议按顺序做三件事:改站点身份(标题、头像、社交链接),删掉示例文章换成自己的内容,然后配置导航和侧栏。这些正是后面两篇文章的主题——设置篇和使用篇,见本站分类目录。
生成精美分享图或复制链接,与更多人分享本文。
最后更新于 ,距今已过 71 天
部分内容可能已过时