技术栈

概述

30 秒代码网站采用现代静态站点生成方法构建，注重性能、可维护性和开发者体验。它结合了多种尖端技术，为代码片段提供了一个响应式、以内容为中心的平台。

核心技术

该项目基于以下基础技术构建

技术	版本	目的
Astro	^5.6.0	静态站点生成框架
Node.js	>=22.14.0	JavaScript 运行时
Netlify	-	托管和部署平台
SASS	^1.68.0	CSS 预处理器
JavaScript	ES 模块	主要编程语言
Shiki/Prism	^3.2.1/^1.30.0	代码语法高亮

来源： package.json9-42 package.json65-69 README.md22-24

技术架构

技术栈的组织方式旨在区分构建时处理和运行时功能之间的关注点。

来源： package.json9-42 README.md22-24 package.json43-56

Astro 框架

Astro 作为网站的核心框架，提供了静态站点生成能力。它负责路由、组件渲染和构建过程。

构建流程

构建过程利用 package.json 中定义的各种 npm 脚本

predev：为开发运行准备脚本
dev：启动 Astro 开发服务器
prebuild：运行完整的准备脚本
build：使用 Astro 生成生产构建

来源： package.json43-56 README.md22-24

内容处理技术

项目使用复杂的管道处理 markdown 和 YAML 文件内容，生成最终的 HTML 输出。

Markdown 处理

内容处理利用了

front-matter：从 markdown 文件中提取元数据
remark：将 markdown 解析为结构化格式
rehype：转换和处理 HTML
prismjs/shiki：提供代码语法高亮

来源： package.json9-33 README.md22-24

语法高亮系统

项目同时使用 Shiki 和 Prism 进行代码语法高亮，支持丰富的、准确的代码展示。

语法高亮系统支持

多种编程语言
行高亮
行号
语法主题

来源： package.json9-33 README.md22-24

开发环境

该项目包含一套全面的开发工具，以确保代码质量和可维护性

工具	目的
ESLint	JavaScript 代码检查
Prettier	代码格式化
Vitest	JavaScript 测试
锐利	图像优化
SASS	CSS 预处理

开发工作流通过 npm 脚本实现

dev/watch：用于本地开发和热重载
test：使用 Vitest 运行测试
create：内容创建工具
console：开发控制台

来源： package.json43-56 package.json9-33

部署架构

部署流程利用了

GitHub 用于版本控制和协作
Netlify 用于持续部署和托管
由存储库更改触发的自动化构建

来源： README.md22-24

Node.js 要求

该项目需要 Node.js 版本 22.14.0 或更高版本，利用了现代 JavaScript 功能，包括

ES 模块（package.json 中的type: "module"）
现代 JavaScript 语法
通过 browserslist 目标浏览器兼容性

来源： package.json65-69 package.json5-8

图像处理

图像优化通过 Sharp 进行处理，这是一个高性能的 Node.js 图像处理库

这提供了针对不同屏幕尺寸和设备类型的优化图像，提高了性能和用户体验。

来源： package.json28

技术整合

技术通过模块化方法进行整合

这种整合创造了从内容创建到最终部署的无缝工作流程。