Skip to content

Repository files navigation

苏不不不酥的小站 · Eric's blog

一个克制、温润、编辑感的多页个人博客。基于 Astro + Svelte + Tailwind CSS + TypeScript 构建,面向 EdgeOne Makers 静态部署。

Slogan:A seed of resolve planted in the heart, Endurance becomes a required art. 心中埋下争气的种子,忍耐便是人生的必修课。

技术栈

  • Astro 4(静态输出,内容集合)
  • Svelte 4 交互岛(首页轮播、共享环境背景、搜索浮层、相册灯箱、主题切换、评论、Mermaid 渲染)
  • Tailwind CSS 3 + 语义化 CSS token 设计系统
  • remark-math + rehype-katex 公式渲染(KaTeX)
  • Shiki 代码高亮(暗色模式作用域覆盖)
  • 客户端 Mermaid(运行时 CDN 加载,仅扫描文章正文)
  • 纯静态本地搜索(构建期生成 public/search-data.json

页面路由

/ 首页 · /posts/[slug]/ 文章详情 · /archive/ 归档 · /about/ 关于 · /friends/ 友链 · /albums/ 相册 · /albums/[id]/ 相册详情 · /projects/ 项目 · /skills/ 技能 · /timeline/ 时间线 · /diary/ 日记 · /404 · 全站搜索浮层(Ctrl/Cmd + K)。

本地开发

npm install
npm run dev      # 会先生成搜索索引,再启动 astro dev

访问 http://localhost:4321

构建

npm run build    # 自动执行 prebuild 生成 search-data.json,再 astro build
npm run preview  # 预览 dist/

产物位于 dist/,纯静态,可直接部署。

部署到 EdgeOne Makers

  1. 将本项目推送到 Git 仓库(或直接上传)。
  2. 在 EdgeOne Makers 新建 Pages 项目,选择该仓库。
  3. 构建配置:
    • Install commandnpm install
    • Build commandnpm run build
    • Output directorydist
  4. 部署完成后,把 astro.config.mjs 里的 site 改成你的正式域名,重新构建,可获得正确的 canonical / Open Graph 链接。

也可以直接把已构建好的 dist/ 目录作为静态资源上传部署。

内容与数据

  • 文章:src/content/posts/*.md(frontmatter 契约见 src/content/config.ts)。
  • 站点品牌 / 资源映射:src/data/site.ts
  • 友链 / 相册 / 项目 / 技能 / 时间线 / 日记:src/data/*.ts

新增文章后,npm run build 会自动重建搜索索引。

评论

当前使用本地演示评论(无需任何外部服务,评论保存在访客浏览器本地)。 如需接入真实评论(Giscus / Twikoo),替换 src/components/comments/CommentMount.svelte 即可,文章页的挂载位置与禁用逻辑已预留。

设计说明

  • 亮 / 暗双主题,暖色相(hue ≈ 60),玻璃拟态表面。
  • 桌面 / 平板 / 移动为差异化布局,而非等比缩放。
  • 首页 Hero 轮播与非首页环境背景通过 localStorage 共享同一轮播索引与节奏(切换路由不会重置到第一张)。
  • 图片一律置于比例受控的容器内,避免原始尺寸撑破布局。

祝写作愉快。像劈竹一样,第一节最难,之后顺势而下。

About

My Blog website

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages