从零构建现代静态网站：原生技术栈与Vite工具链实战指南

1. 项目概述：从零构建一个静态网站

最近在GitHub上看到一个名为“RIMSHASAJID436/stonewebsite”的项目，光看名字，你可能会觉得有点抽象——“石头网站”？这听起来像是一个个人练手项目，或者是一个特定主题的静态站点。作为一名在Web开发领域摸爬滚打多年的从业者，我深知这类项目背后蕴含的价值远不止一个简单的仓库名。它本质上是一个静态网站的完整实现，涵盖了从前端基础架构、现代开发工具链，到部署上线的全流程。对于初学者而言，这是一个绝佳的、可复现的“麻雀虽小，五脏俱全”的实战案例；对于有经验的开发者，也能从中窥见作者在技术选型、代码组织和工程化实践上的思路。

这个项目标题“stonewebsite”或许寓意着网站的基石、坚固或简约。在当今这个前端框架百花齐放的时代，回归基础，用HTML、CSS、JavaScript这些“石头”般稳固的技术栈，构建一个性能优异、易于维护的静态网站，反而成了一种值得推崇的实践。它可能是一个个人博客、作品集、产品介绍页，或者是一个小型企业的官网。无论其具体内容是什么，其核心价值在于提供了一个清晰、完整、可运行的静态网站项目结构，让我们能够脱离复杂的框架束缚，深入理解Web开发的本质，并掌握一套高效的本地开发与生产部署工作流。

接下来，我将深度拆解构建这样一个“石头网站”所涉及的核心技术点、工具选型背后的考量、具体的实现步骤，以及在实际操作中必然会遇到的“坑”和解决技巧。无论你是想学习如何从零搭建一个网站，还是希望优化自己现有的静态站点开发流程，这篇文章都将提供一份详尽的路线图。

2. 技术栈选型与项目架构设计

2.1 核心技术的“为什么”：HTML5、CSS3与原生JavaScript

看到静态网站，很多人的第一反应可能是：“为什么不直接用WordPress或者Vue/React？” 这是一个很好的问题。选择原生技术栈（Vanilla HTML/CSS/JS）而非框架或CMS，主要基于以下几点考量：

1. 极致的性能与可控性：没有框架运行时（Runtime）的额外开销，页面加载速度最快，对SEO（搜索引擎优化）友好。每一行代码都在你的完全掌控之下，没有“黑盒”魔法。
2. 学习曲线与基础巩固：对于学习者，这是夯实Web开发根基的最佳方式。理解DOM操作、事件机制、CSS盒模型等核心概念，比直接学习框架API更重要。框架会变，但这些基础永存。
3. 项目的轻量与专注：如果网站内容相对固定，交互不复杂（例如主要是展示型页面），引入一个重型框架无异于“杀鸡用牛刀”，会增加打包体积、构建复杂度和维护成本。
4. 长期可维护性：一个结构清晰的原生项目，其依赖极少，受第三方包生态变动的影响最小。五年后，它依然可以毫无障碍地运行在现代浏览器上。

当然，这并不意味着我们完全拒绝现代工具。相反，我们会利用强大的工具链来提升开发体验和代码质量。

2.2 开发工具链的加持：从“石器时代”到“铁器时代”

纯粹手写HTML/CSS/JS是低效的。一个现代化的静态网站项目，必然配备一套提升效率的工具链。以“stonewebsite”这类项目为例，其package.json文件通常会揭示以下关键工具：

• 构建工具 (Bundler)：Vite 或 Parcel。如今，Webpack配置的复杂性让许多开发者望而却步。Vite以其极快的冷启动和热更新（HMR）脱颖而出。它原生支持ES模块，开发体验流畅。选择Vite，意味着我们获得了：

  • 闪电般的启动：基于原生ESM，无需打包即可启动服务。
  • 高效的热重载：只更新修改的模块，保持应用状态。
  • 开箱即用的支持：对TypeScript、CSS预处理器、静态资源等有非常好的内置支持。
  • 优化的生产构建：使用Rollup进行构建，输出高度优化的静态资源。

• CSS 预处理器：Sass/SCSS。原生CSS在管理大型项目时显得力不从心。Sass提供了变量、嵌套规则、混合宏（Mixin）、函数等高级功能，能让CSS代码更模块化、更易维护。例如，我们可以定义一个主题色变量$primary-color，在全站统一使用和修改。

• 代码格式化与质量：Prettier + ESLint。团队协作和个人项目的代码一致性至关重要。Prettier自动格式化代码风格，ESLint检查代码中的潜在问题和不符合规范的写法。将它们集成到编辑器和Git提交钩子中，可以保证代码库的整洁。

• 版本控制：Git。这是现代软件开发的基石。通过.gitignore文件忽略node_modules、构建输出目录等，保持仓库清洁。清晰的Commit信息有助于追踪项目演进。

• 本地开发服务器：Vite本身内置了开发服务器。它提供了本地预览、自动刷新、代理API请求（如果需要连接后端）等功能，模拟了生产环境。

注意：工具链的选择不是一成不变的。如果项目极其简单，甚至可以直接用一个index.html文件开始。但引入Vite这样的工具，成本极低（几乎零配置），收益却很高，它代表了当前静态站点开发的最佳实践。

2.3 项目目录结构设计

一个清晰的项目结构是良好维护性的开端。典型的“stonewebsite”项目目录可能如下所示：

stonewebsite/ ├── public/ # 静态资源（不经过Vite处理） │ ├── favicon.ico │ ├── robots.txt │ └── images/ # 全局图片，如logo、背景图 ├── src/ # 源代码 │ ├── assets/ # 模块资源（经过Vite处理） │ │ ├── styles/ # SCSS样式文件 │ │ │ ├── _variables.scss # 变量定义 │ │ │ ├── _mixins.scss # 混合宏 │ │ │ ├── _base.scss # 基础样式重置 │ │ │ ├── _components.scss # 组件样式 │ │ │ └── main.scss # 主样式文件（导入其他部分） │ │ └── images/ # 页面内使用的图片 │ ├── components/ # 可复用的UI组件（纯HTML片段或JS生成的组件） │ │ ├── Header.html │ │ ├── Footer.html │ │ └── Card.html │ ├── pages/ # 各页面HTML文件 │ │ ├── index.html # 首页 │ │ ├── about.html # 关于页 │ │ └── blog/ # 博客目录 │ │ └── post-1.html │ ├── scripts/ # JavaScript模块 │ │ ├── main.js # 主入口JS │ │ ├── utils/ # 工具函数 │ │ └── modules/ # 功能模块 │ └── index.html # 开发入口HTML（由Vite使用） ├── .gitignore ├── index.html # 生产环境入口HTML（构建后复制或作为模板） ├── package.json ├── vite.config.js # Vite配置文件 └── README.md

这种结构将资源、逻辑和页面分离，遵循了关注点分离的原则。public目录下的资源会直接被复制到构建输出根目录，而src/assets下的资源会经过处理（如图片压缩、SCSS编译）并带有哈希文件名以实现缓存破坏。

3. 核心开发流程与实现细节

3.1 环境初始化与项目搭建

第一步是创建一个干净的项目环境。我们不再使用复杂的脚手架，而是手动初始化，以理解每一个环节。

# 1. 创建项目目录并进入 mkdir stonewebsite && cd stonewebsite # 2. 初始化npm项目（生成package.json） npm init -y # 3. 安装开发依赖 npm install -D vite sass prettier eslint # 4. 安装ESLint相关配置（以airbnb-base规则为例） npx eslint --init # 交互式选择：To check syntax and find problems -> JavaScript modules -> None of these -> Yes -> Browser -> Use a popular style guide -> Airbnb -> JSON # 完成后会安装eslint-config-airbnb-base等相关包。 # 5. 创建基础目录和文件 mkdir -p public/images src/{assets/styles,components,pages,scripts} src/pages/blog touch src/index.html vite.config.js

接下来，配置vite.config.js。一个基础的配置如下：

// vite.config.js import { defineConfig } from 'vite'; import { resolve } from 'path'; export default defineConfig({ // 项目根目录 root: 'src', // 构建配置 build: { // 输出目录（相对于根目录） outDir: '../dist', // 静态资源目录（相对于`root`） assetsDir: 'assets', // 清空输出目录 emptyOutDir: true, // 多页面应用配置（如果需要） // rollupOptions: { // input: { // main: resolve(__dirname, 'src/index.html'), // about: resolve(__dirname, 'src/pages/about.html'), // } // } }, // 开发服务器配置 server: { port: 3000, // 指定端口 open: true, // 启动后自动打开浏览器 }, });

这个配置将src目录作为开发根目录，构建输出到项目根目录下的dist文件夹。对于多页面应用（MPA），可以取消注释rollupOptions.input部分进行配置。

3.2 HTML结构与语义化标签实践

在src/index.html中，我们编写基础的HTML结构。现代HTML5强调语义化，这不仅有助于SEO，也使得代码对屏幕阅读器等辅助技术更友好。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="StoneWebsite - 一个坚固、高效的静态网站示例"> <title>StoneWebsite | 首页</title> <link rel="icon" type="image/x-icon" href="/favicon.ico"> <!-- 开发环境下，Vite会注入模块化的CSS和JS --> <link rel="stylesheet" href="/src/assets/styles/main.scss"> </head> <body> <!-- 使用语义化标签 --> <header class="site-header" id="header"> <!-- 头部内容，可通过JS或SSI引入 --> <h1>StoneWebsite</h1> <nav aria-label="主导航"> <ul> <li><a href="/" aria-current="page">首页</a></li> <li><a href="/pages/about.html">关于</a></li> <li><a href="/pages/blog/">博客</a></li> </ul> </nav> </header> <main class="main-content"> <article> <h2>欢迎来到石头网站</h2> <p>这是一个使用原生技术栈构建的现代静态网站示例。</p> <section> <h3>特性介绍</h3> <p>快速、安全、易于部署。</p> </section> </article> <!-- 更多内容 --> </main> <footer class="site-footer"> <p>&copy; <span id="current-year"></span> StoneWebsite. 保留所有权利。</p> </footer> <!-- 脚本放在body末尾，避免阻塞渲染 --> <script type="module" src="/src/scripts/main.js"></script> </body> </html>

实操心得：

• lang属性：务必正确设置，这对SEO和辅助工具至关重要。
• viewport：移动端适配的基石，必须设置。
• aria-label：为无文本描述的语义化元素（如nav）提供可访问性标签。
• 脚本加载：使用type="module"以支持ES6模块。将其放在</body>之前，或使用defer属性，确保不阻塞HTML解析和渲染。

3.3 现代化CSS组织：SCSS与BEM方法论

在src/assets/styles/目录下，我们开始组织SCSS。采用BEM（Block, Element, Modifier）命名方法论，可以有效地避免CSS选择器冲突，并提高样式的可复用性。

首先，创建_variables.scss：

// _variables.scss // 颜色 $color-primary: #3498db; $color-secondary: #2ecc71; $color-dark: #2c3e50; $color-light: #ecf0f1; $color-text: #333; $color-text-light: #777; // 字体 $font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; $font-family-heading: Georgia, serif; // 间距 $spacing-unit: 1rem; // 16px $spacing-xs: $spacing-unit * 0.5; // 8px $spacing-sm: $spacing-unit * 0.75; // 12px $spacing-md: $spacing-unit; // 16px $spacing-lg: $spacing-unit * 1.5; // 24px $spacing-xl: $spacing-unit * 2; // 32px // 响应式断点 $breakpoint-mobile: 576px; $breakpoint-tablet: 768px; $breakpoint-desktop: 992px;

然后，创建_base.scss进行样式重置和基础设置：

// _base.scss * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; // 定义1rem的基准大小 scroll-behavior: smooth; // 平滑滚动 } body { font-family: $font-family-base; line-height: 1.6; color: $color-text; background-color: $color-light; min-height: 100vh; display: flex; flex-direction: column; } img { max-width: 100%; height: auto; display: block; } a { color: $color-primary; text-decoration: none; transition: color 0.3s ease; &:hover { color: darken($color-primary, 15%); } }

接着，按照BEM规范编写组件样式，例如_components.scss：

// _components.scss // Block: site-header .site-header { background-color: $color-dark; color: white; padding: $spacing-lg 0; position: sticky; top: 0; z-index: 1000; // Element: site-header__title &__title { font-family: $font-family-heading; font-size: 1.8rem; margin-bottom: $spacing-sm; text-align: center; @media (min-width: $breakpoint-tablet) { text-align: left; margin-bottom: 0; } } // Element: site-header__nav &__nav { ul { list-style: none; display: flex; justify-content: center; gap: $spacing-xl; flex-wrap: wrap; @media (min-width: $breakpoint-tablet) { justify-content: flex-end; } } a { color: white; font-weight: bold; padding: $spacing-xs $spacing-sm; border-radius: 4px; // Modifier: site-header__nav-link--active &[aria-current="page"] { background-color: rgba(255, 255, 255, 0.2); } &:hover { background-color: rgba(255, 255, 255, 0.1); } } } // Modifier: site-header--transparent (示例) &--transparent { background-color: transparent; position: absolute; width: 100%; } } // Block: card .card { background: white; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: $spacing-lg; margin-bottom: $spacing-lg; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; &:hover { transform: translateY(-5px); box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15); } &__image { width: 100%; height: 200px; object-fit: cover; margin-bottom: $spacing-md; } &__title { color: $color-dark; margin-bottom: $spacing-sm; } &__body { color: $color-text-light; font-size: 0.95rem; } }

最后，在main.scss中导入所有部分：

// main.scss @import 'variables'; @import 'base'; @import 'components'; // 可以继续导入其他部分，如_layout.scss, _pages.scss等

注意事项：

• CSS自定义属性（CSS Variables）：对于需要动态更改的主题色，可以考虑使用CSS变量（--primary-color），它们可以通过JavaScript实时修改。SCSS变量在编译后是静态的。
• 移动优先：在媒体查询中，建议使用min-width（移动优先）而非max-width（桌面优先），这样代码更简洁，更符合渐进增强的理念。
• 层叠上下文：使用z-index时，要注意其父元素的层叠上下文，避免失效。通常，为需要设置z-index的元素同时设置position: relative/absolute/fixed。

3.4 交互逻辑：模块化的原生JavaScript

在src/scripts/main.js中，我们以模块化的方式组织JavaScript代码。ES6模块系统让我们可以轻松地拆分功能。

// src/scripts/main.js // 导入工具函数或模块 import { setCurrentYear, debounce } from './utils/helpers.js'; import { initMobileMenu } from './modules/mobileMenu.js'; import { initLazyLoading } from './modules/lazyLoad.js'; // DOM加载完成后执行 document.addEventListener('DOMContentLoaded', () => { console.log('StoneWebsite loaded.'); // 1. 设置版权年份 setCurrentYear('#current-year'); // 2. 初始化移动端菜单（如果存在） const menuToggle = document.querySelector('[data-menu-toggle]'); if (menuToggle) { initMobileMenu(menuToggle); } // 3. 初始化图片懒加载 const lazyImages = document.querySelectorAll('img[data-src]'); if (lazyImages.length > 0) { initLazyLoading(lazyImages); } // 4. 平滑滚动锚点链接 document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const targetId = this.getAttribute('href'); if (targetId === '#') return; const targetElement = document.querySelector(targetId); if (targetElement) { targetElement.scrollIntoView({ behavior: 'smooth' }); } }); }); // 5. 监听窗口滚动事件（防抖处理） const handleScroll = debounce(() => { const header = document.getElementById('header'); if (window.scrollY > 100) { header.classList.add('site-header--scrolled'); } else { header.classList.remove('site-header--scrolled'); } }, 100); window.addEventListener('scroll', handleScroll); });

工具函数模块示例src/scripts/utils/helpers.js：

// src/scripts/utils/helpers.js /** * 设置元素内的文本为当前年份 * @param {string} selector - 目标元素的选择器 */ export function setCurrentYear(selector) { const element = document.querySelector(selector); if (element) { element.textContent = new Date().getFullYear(); } } /** * 防抖函数 * @param {Function} func - 需要防抖的函数 * @param {number} wait - 等待毫秒数 * @returns {Function} - 防抖后的函数 */ export function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } /** * 简单的数据获取函数（使用Fetch API） * @param {string} url - API地址 * @returns {Promise} - 返回Promise对象 */ export async function fetchData(url) { try { const response = await fetch(url); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return await response.json(); } catch (error) { console.error('Fetch error:', error); throw error; } }

功能模块示例src/scripts/modules/lazyLoad.js：

// src/scripts/modules/lazyLoad.js /** * 图片懒加载实现 * @param {NodeList} images - 带有data-src属性的img元素集合 */ export function initLazyLoading(images) { // 如果浏览器支持IntersectionObserver，则使用它 if ('IntersectionObserver' in window) { const imageObserver = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; img.removeAttribute('data-src'); imageObserver.unobserve(img); // 可选：加载完成后添加淡入效果 img.onload = () => { img.classList.add('loaded'); }; } }); }, { rootMargin: '50px 0px', // 提前50px开始加载 }); images.forEach(img => imageObserver.observe(img)); } else { // 降级方案：直接加载所有图片 console.warn('IntersectionObserver not supported, loading all images immediately.'); images.forEach(img => { img.src = img.dataset.src; img.removeAttribute('data-src'); }); } }

实操心得：

• 模块化：将独立功能拆分成模块，使main.js保持简洁，便于维护和测试。
• 渐进增强：像懒加载这样的功能，先检测浏览器是否支持IntersectionObserver，不支持则提供降级方案（直接加载），确保基本功能可用。
• 性能考量：对scroll、resize等高频事件使用防抖（debounce）或节流（throttle）函数，避免性能问题。
• 错误处理：在fetchData等异步操作中，使用try...catch进行错误捕获，并提供用户友好的反馈（例如在UI上显示错误信息）。

4. 构建、优化与部署实战

4.1 开发、构建与预览

配置好package.json中的脚本命令，让开发流程自动化。

// package.json (部分) { "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" } }

• 开发：运行npm run dev，Vite会启动开发服务器（默认http://localhost:3000），并开启热更新。你可以实时修改代码并看到效果。
• 构建：运行npm run build，Vite会执行生产环境构建。它会：
  1. 编译SCSS为CSS，并进行压缩（Minify）。
  2. 处理JavaScript，进行Tree-shaking（摇树优化，移除未使用代码）和代码压缩。
  3. 处理资源文件（如图片），小图片可能被转换为Base64，大图片会被复制并生成带哈希的文件名。
  4. 将最终产物输出到dist目录。这个目录里的文件就是可以部署到任何静态托管服务上的内容。
• 预览：运行npm run preview，Vite会启动一个本地静态文件服务器，预览构建后的dist目录效果，用于最终上线前的检查。

构建优化技巧：

• 代码分割：Vite（基于Rollup）默认会对动态导入（import()）的模块进行代码分割。你可以利用这一点，将非首屏必需的组件或库进行懒加载。
• 资源内联：对于极小的CSS或JS（如关键CSS），可以考虑内联到HTML中，减少HTTP请求。Vite插件（如vite-plugin-html）可以辅助完成。
• 压缩图片：在构建前，使用工具如sharp、imagemin（可通过Vite插件集成）对图片进行压缩，这是提升加载速度最有效的手段之一。

4.2 部署到GitHub Pages

GitHub Pages是托管静态网站最流行、最免费的方案之一。部署过程非常顺畅。

1. 确保项目已关联GitHub仓库：

   git init git add . git commit -m "Initial commit" git branch -M main git remote add origin https://github.com/你的用户名/stonewebsite.git git push -u origin main

2. 修改Vite配置以适应GitHub Pages：如果你的网站不是部署在根目录（例如https://用户名.github.io/仓库名/），需要设置base选项。

   // vite.config.js export default defineConfig({ base: '/stonewebsite/', // 如果你的仓库名是stonewebsite // ... 其他配置 });

3. 使用GitHub Actions自动化部署：在项目根目录创建.github/workflows/deploy.yml文件。

   name: Deploy to GitHub Pages on: push: branches: [ main ] # 只在main分支推送时触发 workflow_dispatch: # 允许手动触发 permissions: contents: read pages: write id-token: write concurrency: group: "pages" cancel-in-progress: false jobs: build: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v4 - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: '18' cache: 'npm' - name: Install dependencies run: npm ci - name: Build run: npm run build - name: Setup Pages uses: actions/configure-pages@v4 - name: Upload artifact uses: actions/upload-pages-artifact@v3 with: path: './dist' # Vite构建的输出目录 deploy: environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} runs-on: ubuntu-latest needs: build steps: - name: Deploy to GitHub Pages id: deployment uses: actions/deploy-pages@v4

4. 启用GitHub Pages：在仓库的Settings->Pages页面，选择Source为GitHub Actions。之后，每次推送到main分支，Action都会自动运行，构建并部署网站。部署成功后，你会在Settings->Pages页面看到你的网站URL（格式如https://用户名.github.io/stonewebsite/）。

4.3 部署到Vercel或Netlify

对于更强大的功能（如自动HTTPS、全球CDN、预览部署、服务器端函数等），Vercel和Netlify是更佳选择。它们与GitHub集成度极高。

• Vercel：

  1. 注册Vercel并关联你的GitHub账户。
  2. 导入stonewebsite仓库。
  3. Vercel会自动检测到这是一个Vite项目，并应用默认配置。你几乎不需要做任何设置。
  4. 点击Deploy。部署完成后，你会获得一个*.vercel.app的域名。
  5. 之后每次向GitHub推送代码，Vercel都会自动触发一次新的部署。对于非main分支的推送，它会生成一个唯一的预览URL，非常适合代码审查。

• Netlify：

  1. 注册Netlify并关联GitHub。
  2. 点击New site from Git，选择你的仓库。
  3. 构建命令填写npm run build，发布目录填写dist。
  4. 点击Deploy site。
  5. 同样支持自动部署和预览部署。你还可以在Site settings->Domain management中绑定自定义域名。

部署选择建议：

• 个人项目/开源项目演示：GitHub Pages足够，且与代码仓库绑定紧密。
• 追求极致速度和开发者体验：Vercel是首选，其全球边缘网络速度极快，CLI工具也很好用。
• 需要更多表单处理、身份验证等无服务器功能：Netlify和Vercel都提供相关服务，可根据具体生态偏好选择。

5. 常见问题、排查与进阶优化

5.1 开发与构建中的典型问题

问题1：本地开发服务器运行正常，但构建后页面空白或资源404。

• 排查思路：
  1. 检查base配置：这是最常见的原因。如果你的网站部署在子路径（如/stonewebsite/），但vite.config.js中的base设置为/或未设置，构建后的资源路径会错误。确保base值与部署环境匹配。
  2. 检查资源引用路径：在HTML和CSS中引用资源时，尽量使用绝对路径（以/开头）或相对路径。避免使用依赖于开发服务器根目录的路径。Vite会自动处理src目录下的资源。
  3. 查看dist目录结构：运行npm run build后，打开dist/index.html，查看其中引用的CSS和JS文件路径是否正确，以及这些文件是否确实存在于dist/assets目录下。
  4. 使用vite preview：在本地运行npm run preview，它模拟了一个静态文件服务器，可以提前发现路径问题。

问题2：图片在开发环境显示正常，构建后不显示或路径错误。

• 解决方案：
  • 放在public目录：对于始终位于根目录、不需要处理的图片（如favicon.ico,logo.png），放在public目录下，在代码中以/logo.png引用。
  • 放在src/assets目录：对于需要被模块化引用的图片，放在src/assets下。在JavaScript或Vue/React组件中通过import引入，Vite会处理它并返回解析后的URL。在HTML中，可以通过绝对路径引用构建后的文件（但不如import方便）。
  • 在CSS中使用相对路径：在SCSS文件中使用background: url(‘./images/bg.jpg’)，Vite的CSS处理器会正确解析并转换路径。

问题3：ESLint和Prettier规则冲突，或者保存时未自动格式化。

• 配置整合：
  1. 安装整合插件：npm install -D eslint-config-prettier eslint-plugin-prettier。
  2. 在.eslintrc.json中扩展Prettier配置：

     { "extends": [ "airbnb-base", "plugin:prettier/recommended" // 必须放在最后 ], "rules": { "prettier/prettier": "error" } }

  3. 在VS Code中，安装ESLint和Prettier扩展，并在设置中启用"editor.formatOnSave": true和"editor.codeActionsOnSave": { "source.fixAll.eslint": true }。

5.2 性能与SEO进阶优化

一个“石头网站”也应该是快速且对搜索引擎友好的。

1. 关键渲染路径优化：

   • 内联关键CSS：使用工具（如critters的Vite插件）提取首屏渲染所需的关键CSS，并内联到<head>中，其余CSS异步加载。
   • 异步/延迟加载非关键JS：使用<script defer>或动态import()。
   • 优化字体加载：使用font-display: swap确保文字内容不会因字体未加载而长时间不可见。

2. 图片优化：

   • 使用现代格式：在构建流程中，将PNG/JPG转换为WebP格式，并利用<picture>元素提供回退方案。
   • 指定尺寸：始终为<img>标签设置width和height属性，以防止布局偏移（CLS）。
   • 响应式图片：使用srcset和sizes属性为不同屏幕尺寸提供不同分辨率的图片。

3. SEO基础标签：

   • 确保每个页面有唯一的<title>和<meta name="description">。
   • 使用规范的<meta name="viewport">。
   • 提供robots.txt和sitemap.xml（可以写一个简单的脚本在构建时生成）。
   • 使用语义化HTML标签（<header>,<nav>,<main>,<article>,<section>,<footer>）。

4. 添加PWA支持（可选）： 虽然是一个静态网站，但可以使其具备“类App”体验。通过vite-plugin-pwa插件，可以轻松生成Service Worker和Web App Manifest，实现离线访问、添加到主屏幕等功能。

5.3 从“静态”到“动态”的边界探索

纯粹的静态网站在内容更新时需要重新构建和部署。对于博客类网站，这不太方便。此时，可以考虑以下“动静结合”的方案：

• 静态站点生成器（SSG）：这是最自然的演进方向。你可以逐步引入像11ty (Eleventy)、Hugo或Jekyll这样的工具。它们允许你使用模板（如Liquid, Nunjucks）和Markdown文件来编写内容，在构建时生成静态HTML。stonewebsite项目可以平滑地迁移为这些SSG的起点。
• 无头CMS + 构建时获取：使用Netlify CMS、Strapi、Sanity等无头CMS管理内容。在本地开发或CI/CD构建时，通过它们的API获取最新内容，然后注入到静态模板中生成最终网站。这样，内容编辑者可以在友好的后台更新内容，而网站本身依然是静态的，兼具了动态的便利和静态的性能与安全。
• 客户端动态化：对于少量需要动态交互的部分（如评论），可以使用第三方服务（如Disqus, Gitalk）的JavaScript嵌入，或者使用Netlify Functions、Vercel Serverless Functions编写轻量级API后端。

从RIMSHASAJID436/stonewebsite这样一个简单的静态网站项目出发，我们实际上探索了一条完整的现代前端开发路径：从最基础的原生三件套，到现代化的开发工具链和模块化组织，再到性能优化、自动化部署和SEO实践。这个过程强化了我们对Web基础的理解，也掌握了应对更复杂场景的能力。无论项目名称如何，其核心价值在于提供了一个清晰、可实践、可扩展的范本。当你亲手走完这一遍流程，下一次面对任何前端项目时，你都会更加胸有成竹，因为你知道，再复杂的大厦，也是由这些坚实的“石头”一块块垒起来的。