第一步：理解什么是静态网站
在开始之前,我们先明确概念：
（图片来源网络，侵删）
- 静态网站：指网站的内容在服务器上是预先写好的、固定的 HTML、CSS 和 JavaScript 文件，当用户访问时，服务器直接将这些文件发送给浏览器，浏览器负责渲染出页面。它没有数据库交互，也没有服务器端逻辑。
- 动态网站是实时生成的，当你登录博客后台发布新文章时，服务器会将其存入数据库，当用户访问时，服务器会从数据库中取出数据并动态生成 HTML 页面再发送给浏览器（如 WordPress, Django, PHP 等）。
静态网站的优势：
- 速度快：服务器负担小，响应速度快。
- 安全性高：没有数据库和后台，黑客攻击面小。
- 成本低：可以免费托管在 GitHub Pages, Netlify 等平台。
- 易于维护：文件结构清晰，版本控制方便。
第二步：搭建本地开发环境
在开始编写代码之前,你需要一个本地的“工作车间”。
安装核心工具
- 代码编辑器：这是你编写代码的地方，强烈推荐：
- Visual Studio Code (VS Code)：免费、强大、插件生态丰富，是目前前端开发的首选。
- Sublime Text：轻量、快速，经典选择。
- Web 浏览器：用于预览你的网站，推荐使用 Chrome 或 Firefox，它们都有强大的开发者工具，方便调试。
- (可选但推荐) 版本控制工具 Git：用于管理你的代码历史，方便回溯和协作，可以从 Git 官网 下载安装。
创建项目文件夹
在你的电脑上创建一个文件夹,用来存放网站的所有源码，在桌面创建一个名为 my-static-site 的文件夹。
第三步：编写网站核心源码
我们开始动手写代码,一个最基础的静态网站至少需要三个文件：index.html, style.css, 和 script.js。
（图片来源网络，侵删）
HTML (index.html) - 网站的骨架
HTML (HyperText Markup Language) 定义了网页的结构和内容。
在你的 my-static-site 文件夹中，创建一个名为 index.html 的文件，并输入以下内容：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">我的第一个静态网站</title>
<!-- 引入 CSS 文件 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>欢迎来到我的网站</h1>
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于我</a></li>
<li><a href="#contact">联系方式</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h2>这里是首页内容</h2>
<p>这是一个使用纯 HTML, CSS 和 JavaScript 构建的静态网站示例。</p>
</section>
<section id="about">
<h2>关于我</h2>
<p>你好！我是一名前端爱好者，正在学习如何构建自己的网站。</p>
</section>
<section id="contact">
<h2>联系方式</h2>
<p>你可以通过邮箱 example@email.com 联系到我。</p>
</section>
</main>
<footer>
<p>© 2025 我的网站. 保留所有权利.</p>
</footer>
<!-- 引入 JavaScript 文件 -->
<script src="script.js"></script>
</body>
</html>
解释：
<!DOCTYPE html>：声明文档类型。<html>：根元素。<head>：包含页面的元数据，如标题、字符集、引入的 CSS/JS 文件等。<body>：包含页面的所有可见内容，如标题、段落、链接、图片等。<link rel="stylesheet" href="style.css">：告诉浏览器，这个页面的样式定义在style.css文件里。<script src="script.js"></script>：告诉浏览器，这个页面的交互行为定义在script.js文件里。
CSS (style.css) - 网站的样式
CSS (Cascading Style Sheets) 负责美化你的网站，控制布局、颜色、字体等。
（图片来源网络，侵删）
在 my-static-site 文件夹中，创建一个名为 style.css 的文件，并输入以下内容：
/* 全局样式 */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 0 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
/* 头部样式 */
header {
background: #333;
color: #fff;
padding: 1rem 0;
text-align: center;
}
header h1 {
margin: 0;
}
header nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
gap: 20px;
}
header nav a {
color: #fff;
text-decoration: none;
}
header nav a:hover {
text-decoration: underline;
}
样式 */
main {
padding: 20px 0;
}
section {
margin-bottom: 30px;
}
/* 页脚样式 */
footer {
text-align: center;
padding: 20px;
margin-top: 20px;
background: #333;
color: #fff;
}
解释：
- 选择器（如
body,header）指定要应用样式的 HTML 元素。 - 属性（如
color,background-color）定义具体的样式规则。
JavaScript (script.js) - 网站的交互
JavaScript 为网站添加动态行为，比如点击按钮、切换图片、表单验证等。
在 my-static-site 文件夹中，创建一个名为 script.js 的文件，并输入以下内容：
// 等待整个 HTML 文档加载完毕后再执行脚本
document.addEventListener('DOMContentLoaded', () => {
// 获取所有导航链接
const navLinks = document.querySelectorAll('nav a');
// 为每个链接添加点击事件
navLinks.forEach(link => {
link.addEventListener('click', (event) => {
// 阻止默认的跳转行为（因为我们用的是锚点链接）
event.preventDefault();
// 获取要滚动到的元素的 ID (去掉 # 号)
const targetId = link.getAttribute('href').substring(1);
const targetElement = document.getElementById(targetId);
// 如果找到了目标元素，则平滑滚动到它
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth'
});
}
});
});
console.log('网站已加载，交互脚本已启动！');
});
解释：
document.addEventListener('DOMContentLoaded', ...)：确保在 HTML 文件完全加载后才运行 JS 代码。document.querySelectorAll('nav a')：选择导航栏中的所有<a>link.addEventListener('click', ...)：为每个链接添加点击监听器。targetElement.scrollIntoView({ behavior: 'smooth' })：实现平滑滚动效果。
第四步：本地预览和调试
现在你的源码已经写好了,如何在本地查看效果？
- 直接打开文件：最简单的方式是直接用浏览器打开
index.html文件，但这种方式可能会因为浏览器的安全策略（CORS）导致某些功能（如本地 AJAX 请求）无法正常工作，不适合复杂项目。 - 使用 VS Code 的 Live Server 插件（推荐）：
- 在 VS Code 中，打开你的
my-static-site文件夹。 - 在左侧扩展栏中搜索并安装
Live Server插件。 - 安装后,在
index.html文件上右键，选择 "Open with Live Server"。 - 它会自动在浏览器中打开你的网站,并在你修改代码后自动刷新，非常方便！
- 在 VS Code 中，打开你的
第五步：将网站部署到线上
本地运行后,你需要一个地方让全世界都能访问到你的网站，对于静态网站，有很多优秀的免费托管平台。
使用 GitHub Pages (完全免费)
这是最流行、最经典的方案，尤其适合个人项目或技术博客。
-
创建 GitHub 仓库：
- 如果你没有 GitHub 账号，先去 GitHub 官网 注册一个。
- 登录后,点击右上角的 "+" 号，选择 "New repository"。
- 给仓库起一个名字,
my-static-site。 - 关键一步：勾选 "Add a README file"。
- 点击 "Create repository"。
-
上传你的源码：
- 在你的本地
my-static-site文件夹中，打开终端（或 Git Bash）。 - 初始化 Git 仓库：
git init - 将所有文件添加到暂存区：
git add . - 提交更改：
git commit -m "Initial commit: add website source code" - 将本地仓库与 GitHub 仓库关联：
git remote add origin https://github.com/你的用户名/my-static-site.git(请替换为你的真实仓库地址) - 推送到 GitHub：
git push -u origin main
- 在你的本地
-
启用 GitHub Pages：
- 进入你的 GitHub 仓库页面。
- 点击顶部的 "Settings" 标签。
- 在左侧菜单栏找到并点击 "Pages"。
- 在 "Source" 部分，选择 "Deploy from a branch"。
- Branch 选择 "main"，Folder 选择 "/ (root)"。
- 点击 "Save"。
-
访问你的网站：
- 稍等片刻（通常不到一分钟），页面会显示一个网址，格式为
https://你的用户名.github.io/my-static-site，这就是你的网站在线地址！
- 稍等片刻（通常不到一分钟），页面会显示一个网址，格式为
使用 Netlify (更现代、功能更强大)
Netlify 提供了比 GitHub Pages 更丰富的功能，如持续集成、表单处理、重定向等，并且拖拽部署非常方便。
- 在 GitHub 仓库中：确保你的代码已经推送到 GitHub（同上一步）。
- 注册 Netlify 账号：访问 Netlify 官网 注册。
- 部署：
- 登录 Netlify 后，点击 "New site from Git"。
- 选择你刚刚创建的 GitHub 仓库。
- Netlify 会自动识别这是一个静态网站项目，通常不需要做任何配置。
- 点击 "Deploy site"。
- 访问你的网站：
- Netlify 会自动生成一个随机的
.netlify.app域名。 - 部署完成后,你可以点击 "Site settings" -> "Change domain" 来绑定你自己的自定义域名（可选）。
- Netlify 会自动生成一个随机的
进阶和扩展
当你掌握了基础后,可以探索更多强大的工具：
- 静态网站生成器：如果你有大量内容（如博客），手动写 HTML 会很麻烦，静态网站生成器（如 Hugo, Jekyll, Hexo）允许你用 Markdown 等简单格式写作，然后自动生成完整的 HTML 网站，GitHub Pages 和 Netlify 都原生支持这些工具。
- CSS 框架：使用像 Bootstrap 或 Tailwind CSS 这样的框架，可以让你用更少的代码快速构建出美观、响应式的网站。
- 包管理器：使用 npm 或 yarn 来管理你的项目依赖（如 CSS 框架、JS 库等）。
搭建静态网站源码的完整流程可以概括为：
- 准备环境：安装代码编辑器、浏览器、Git。
- 创建项目：新建文件夹，并创建
index.html,style.css,script.js三个核心文件。 - 编写代码：分别用 HTML 写结构，CSS 写样式，JS 写交互。
- 本地预览：使用 VS Code 的 Live Server 插件实时查看效果。
- 部署上线：将代码推送到 GitHub 或 Netlify，获取一个公开的网址。
这个过程不仅能让你快速拥有一个属于自己的网站,更是学习前端基础知识的绝佳实践，祝你搭建顺利！
