ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀，每一条都经过真实交付验证。

首页 / 资讯中心 / 正文

从零搭建个人网站：HTML/CSS/JS实战指南与响应式设计

2026/8/15 12:02:24 拓冰建站 浏览量
从零搭建个人网站：HTML/CSS/JS实战指南与响应式设计

1. 从零到一：为什么你需要一个个人网站？

在数字身份越来越重要的今天，你的社交媒体主页、求职平台简历，甚至是一份精心设计的PDF作品集，都像是你散落在不同平台的“数字名片”。它们零散、被动，并且受制于平台的规则和算法。而一个独立的个人网站，就是你为自己在互联网上购置的一块“永久自留地”。它不仅仅是一个在线简历，更是一个完全由你掌控的、可以展示你个性、技能和思考的综合空间。对于开发者、设计师、摄影师、作家，或者任何希望建立个人品牌的人来说，拥有一个个人网站，已经从“锦上添花”变成了“雪中送炭”的必需品。

很多人觉得搭建网站是程序员或设计师的专利，需要掌握复杂的后端语言和数据库知识。这其实是一个巨大的误解。一个静态的、展示型的个人网站，其核心就是HTML、CSS和一点点JavaScript。HTML负责搭建骨架，CSS负责美化外观，JavaScript负责添加一些简单的交互。就像盖房子，HTML是砖瓦和梁柱，CSS是油漆和装修，JavaScript则是让电灯亮起来、让门自动打开的开关。我们完全可以从最基础的“毛坯房”开始，亲手一砖一瓦地搭建起来。这个过程不仅能让你获得一个独一无二的成果，更能让你深刻理解网页是如何工作的，这种底层认知对于未来任何与互联网相关的工作都大有裨益。

2. 开工前的蓝图：规划你的网站结构与内容

动手写代码之前，花点时间在纸上或思维导图工具里规划一下，能让你后续的开发过程事半功倍，避免陷入反复修改结构的泥潭。一个典型的个人网站，通常包含以下几个核心页面，你可以根据自身情况增减。

2.1 核心页面规划

  1. 首页 (index.html)：这是网站的“门面”。它需要快速告诉访客“你是谁”以及“这个网站是做什么的”。通常包含一个醒目的个人简介、一张专业的头像、一句精炼的标语，以及指向其他主要页面的清晰导航。首页的设计决定了访客的第一印象。
  2. 关于我 (about.html)：这是展示你个人故事和背景的深度页面。可以在这里详细讲述你的教育经历、职业路径、技能树、兴趣爱好，甚至是一些个人感悟。让访客感受到屏幕后面是一个鲜活的人，而不仅仅是一堆技能列表。
  3. 作品集/项目 (portfolio.html)：对于创意和技术从业者，这是最重要的页面。以图文并茂的形式展示你的项目成果。每个项目应该包括：项目名称、一两句概述、使用的技术栈、你扮演的角色、项目成果（如图片、链接、视频），以及一个简短的“项目故事”——你遇到了什么挑战，是如何解决的。
  4. 博客/文章 (blog.html)：如果你乐于分享知识和思考，博客是建立专业影响力的绝佳工具。即使刚开始只写一两篇，一个博客页面框架也能展示你的持续学习能力和表达欲。它可以链接到外部平台（如掘金、知乎），也可以直接在你的网站上发布。
  5. 联系我 (contact.html)：提供一个让潜在雇主、客户或同行能够联系到你的途径。通常包括你的邮箱、领英等社交媒体链接。重要提示：为了避免垃圾邮件，不建议直接将邮箱地址以明文显示。可以使用“mailto:”链接，或者更高级一点，使用前端表单配合第三方服务（如Formspree）来中转邮件。

2.2 视觉风格与内容准备

在规划结构的同时，也需要构思视觉风格。是偏好简洁专业的单色系，还是活泼明亮的色彩碰撞？是喜欢大图背景的视觉冲击，还是留白充足的极简主义？不必追求复杂，风格统一是关键。

同时，开始准备实际内容：

  • 文案：为每个页面撰写文字内容。文字要真诚、清晰，避免空洞的套话。
  • 图片：准备一张高质量的头像或 banner 图。整理你的项目截图、作品图片，并确保它们尺寸合适、画质清晰。
  • 图标：准备一些社交媒体图标（如GitHub, LinkedIn的SVG图标），用于页尾链接。

3. 搭建基础骨架：编写核心HTML结构

现在，我们进入实操环节。首先创建项目文件夹，例如my-personal-site。在这个文件夹里，我们创建第一个文件：index.html。HTML文件是网页的根基。

3.1 理解HTML文档的基本结构

一个标准的HTML5文档结构如下。你可以将其视为一个固定的模板，我们的大部分工作是在<body>标签内进行。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>你的名字 - 个人网站</title> <link rel="stylesheet" href="css/style.css"> <link rel="icon" href="favicon.ico" type="image/x-icon"> </head> <body> <!-- 网站的所有可见内容都写在这里 --> <header> <!-- 页眉，通常包含Logo和导航 --> </header> <main> <!-- 网页的主要内容区域 --> </main> <footer> <!-- 页脚，通常包含版权信息和社交链接 --> </footer> <script src="js/main.js"></script> </body> </html>

代码解读与注意事项：

  • <!DOCTYPE html>：声明文档类型为HTML5，必须放在第一行。
  • <html lang=“zh-CN”>：定义文档语言为中文，这对搜索引擎和屏幕阅读器友好。
  • <head>：包含元信息，如字符集、视口设置、标题和外部资源链接，这部分内容不会直接显示在页面上。
    • <meta charset=“UTF-8”>：设置字符编码为UTF-8，确保中文等字符正确显示。
    • <meta name=“viewport” ...>：极其重要的移动端适配标签。它告诉浏览器如何控制页面尺寸和缩放，是实现响应式设计的基础。没有它，网站在手机上可能显示为缩小的桌面版。
    • <title>：定义浏览器标签页上显示的标题，也是搜索引擎结果中显示的主要标题。
    • <link rel=“stylesheet”>：链接外部CSS文件，我们将样式写在单独的style.css文件中，保持结构清晰。
    • <link rel=“icon”>：指定网站图标（favicon），显示在浏览器标签页上。
  • <body>：所有网页上可见的内容都放在这里。
  • <header>,<main>,<footer>：这些是语义化标签。用<header>代替普通的<div id=“header”>，能让代码结构更清晰，也对搜索引擎优化（SEO）更友好。
  • <script>：在body末尾引入JavaScript文件，确保HTML和CSS加载完毕后再执行JS，提升页面加载体验。

3.2 填充首页内容

让我们在<body>里构建首页的核心模块。我们采用经典的“页头-英雄区-内容-页脚”布局。

<body> <!-- 导航栏 --> <header class="site-header"> <div class="container"> <a href="index.html" class="logo">我的名字</a> <nav class="main-nav"> <ul> <li><a href="index.html">首页</a></li> <li><a href="about.html">关于</a></li> <li><a href="portfolio.html">作品</a></li> <li><a href="blog.html">博客</a></li> <li><a href="contact.html">联系</a></li> </ul> </nav> </div> </header> <!-- 主内容区 --> <main> <!-- 英雄区域 (Hero Section) --> <section class="hero"> <div class="container"> <div class="hero-content"> <h1>你好，我是 <span class="highlight">[你的名字]</span></h1> <p class="tagline">一名[你的职业]，专注于[你的领域]。热爱用代码/设计/文字解决问题，创造价值。</p> <a href="portfolio.html" class="btn btn-primary">查看我的作品</a> <a href="contact.html" class="btn btn-secondary">联系我</a> </div> <div class="hero-image"> <img src="images/avatar.jpg" alt="[你的名字]的头像"> </div> </div> </section> <!-- 技能或简介摘要 --> <section class="intro"> <div class="container"> <h2>我能做什么</h2> <div class="skills-grid"> <div class="skill-card"> <h3>前端开发</h3> <p>熟练使用 HTML5, CSS3, JavaScript (ES6+)， 熟悉 Vue.js/React 框架，能够构建响应式、交互丰富的现代Web应用。</p> </div> <div class="skill-card"> <h3>UI/UX 设计</h3> <p>掌握 Figma/Sketch，理解用户中心设计原则，能从零到一完成产品界面与交互设计。</p> </div> <div class="skill-card"> <h3>技术写作</h3> <p>乐于分享，擅长将复杂的技术概念转化为通俗易懂的教程与文档。</p> </div> </div> </div> </section> </main> <!-- 页脚 --> <footer class="site-footer"> <div class="container"> <p>© <span id="current-year"></span> [你的名字]. 保留所有权利。</p> <div class="social-links"> <a href="https://github.com/yourusername" aria-label="GitHub"><!-- 这里放GitHub SVG图标或文字 -->GitHub</a> <a href="https://linkedin.com/in/yourusername" aria-label="LinkedIn">LinkedIn</a> <a href="mailto:your.email@example.com" aria-label="发送邮件">Email</a> </div> </div> </footer> <script src="js/main.js"></script> </body>

实操心得：

  1. 语义化是关键：尽量使用<section>,<article>,<nav>,<header>,<footer>等标签，而不是满屏的<div>。这不仅让代码更易读，也便于辅助技术（如屏幕阅读器）理解页面结构，对SEO有积极影响。
  2. 为CSS准备好“钩子”：注意我给很多元素添加了class属性，如class=“site-header”、class=“btn btn-primary”。这些class是我们后续用CSS进行样式控制的“锚点”。命名要有意义，通常采用“模块-元素”的格式，例如header下的logo，可以命名为.header-logo，但这里我用了更通用的.logo，因为它在全站可能唯一。
  3. 图片的alt属性不能省：<img>标签的alt属性用于描述图片内容，当图片无法加载时显示，对视障用户和搜索引擎至关重要。描述应简洁准确。
  4. 链接的aria-label：对于只有图标的链接，使用aria-label为其提供可访问的名称，确保所有人都能理解其功能。

4. 为骨架注入灵魂：用CSS进行样式设计

HTML构建了毛坯房，CSS则是精装修。我们在项目根目录创建css文件夹，并在其中创建style.css文件。我们将采用“移动优先”的响应式设计思路。

4.1 基础重置与全局样式

首先，我们需要重置不同浏览器的默认样式，并设置一些全局变量和基础样式，这能保证我们的设计在不同浏览器上起点一致。

/* css/style.css */ /* 1. 基础重置 */ * { margin: 0; padding: 0; box-sizing: border-box; /* 重要：让元素的宽度和高度包含内边距和边框 */ } html { scroll-behavior: smooth; /* 让页面内的锚点滚动更平滑 */ } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; /* 系统字体栈，提升渲染性能 */ line-height: 1.6; color: #333; /* 主文字颜色 */ background-color: #f8f9fa; /* 浅灰色背景 */ font-size: 16px; } /* 2. 全局容器 */ .container { width: 100%; max-width: 1200px; /* 在大屏幕上限制最大宽度 */ margin: 0 auto; /* 水平居中 */ padding: 0 20px; /* 在移动端提供左右内边距 */ } /* 3. 通用样式 */ a { color: #007bff; /* 链接颜色 */ text-decoration: none; /* 去掉下划线 */ transition: color 0.3s ease; /* 颜色变化过渡效果 */ } a:hover { color: #0056b3; /* 鼠标悬停颜色 */ text-decoration: underline; } img { max-width: 100%; /* 确保图片不会超出容器 */ height: auto; /* 保持宽高比 */ display: block; } ul, ol { list-style-position: inside; /* 列表样式位置 */ } .btn { display: inline-block; padding: 12px 30px; border-radius: 30px; /* 圆角按钮 */ font-weight: bold; text-align: center; cursor: pointer; border: none; transition: all 0.3s ease; } .btn-primary { background-color: #007bff; color: white; } .btn-primary:hover { background-color: #0056b3; text-decoration: none; } .btn-secondary { background-color: transparent; color: #007bff; border: 2px solid #007bff; } .btn-secondary:hover { background-color: #007bff; color: white; text-decoration: none; }

4.2 布局与组件样式

接下来，我们为各个模块添加具体的样式。我们从导航栏开始。

/* 4. 导航栏样式 */ .site-header { background-color: white; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 轻微的阴影增加层次感 */ position: sticky; /* 粘性定位，滚动时固定在顶部 */ top: 0; z-index: 1000; /* 确保导航栏在最上层 */ } .site-header .container { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; } .logo { font-size: 1.5rem; font-weight: bold; color: #333; } .main-nav ul { display: flex; gap: 30px; /* 使用 gap 属性设置列表项间距，更现代 */ } .main-nav a { color: #555; font-weight: 500; } .main-nav a:hover { color: #007bff; } /* 移动端导航（汉堡菜单） - 初始隐藏 */ .menu-toggle { display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #333; } /* 5. 英雄区域样式 */ .hero { padding: 80px 0; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); /* 渐变背景 */ } .hero .container { display: flex; flex-direction: column; /* 移动端默认垂直排列 */ align-items: center; gap: 50px; } .hero-content { text-align: center; flex: 1; } .hero h1 { font-size: 2.5rem; margin-bottom: 20px; line-height: 1.2; } .highlight { color: #007bff; } .tagline { font-size: 1.2rem; color: #666; margin-bottom: 30px; max-width: 600px; margin-left: auto; margin-right: auto; } .hero-image { flex: 1; text-align: center; } .hero-image img { width: 250px; height: 250px; border-radius: 50%; /* 圆形头像 */ object-fit: cover; /* 确保图片覆盖整个区域不变形 */ border: 5px solid white; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } /* 6. 简介/技能区域样式 */ .intro { padding: 80px 0; background-color: white; } .intro h2 { text-align: center; font-size: 2rem; margin-bottom: 50px; color: #333; } .skills-grid { display: grid; grid-template-columns: 1fr; /* 移动端单列 */ gap: 30px; } .skill-card { background: #f8f9fa; padding: 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; } .skill-card:hover { transform: translateY(-5px); /* 悬停时轻微上浮 */ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .skill-card h3 { color: #007bff; margin-bottom: 15px; font-size: 1.3rem; } /* 7. 页脚样式 */ .site-footer { background-color: #333; color: #aaa; padding: 40px 0; text-align: center; } .site-footer .container { display: flex; flex-direction: column; gap: 20px; } .site-footer a { color: #ccc; } .site-footer a:hover { color: white; } .social-links { display: flex; justify-content: center; gap: 20px; }

4.3 实现响应式设计

响应式设计的核心是使用媒体查询，根据不同的屏幕宽度应用不同的CSS规则。我们从小屏幕（移动端）开始设计，然后逐步增强到大屏幕（桌面端）。

/* 8. 响应式设计 - 媒体查询 */ /* 平板设备及以上 (768px 及以上) */ @media (min-width: 768px) { .hero .container { flex-direction: row; /* 在大屏上改为水平排列 */ text-align: left; /* 内容左对齐 */ align-items: center; } .hero-content { text-align: left; } .tagline { margin-left: 0; margin-right: 0; } .skills-grid { grid-template-columns: repeat(2, 1fr); /* 平板端两列 */ } } /* 桌面设备及以上 (992px 及以上) */ @media (min-width: 992px) { .hero h1 { font-size: 3.5rem; } .skills-grid { grid-template-columns: repeat(3, 1fr); /* 桌面端三列 */ } .site-footer .container { flex-direction: row; justify-content: space-between; align-items: center; text-align: left; } } /* 移动端导航菜单切换 */ @media (max-width: 767px) { .main-nav ul { display: none; /* 在小屏幕上隐藏导航列表 */ flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%; background-color: white; box-shadow: 0 5px 10px rgba(0,0,0,0.1); padding: 20px; text-align: center; } .main-nav.active ul { display: flex; /* 当 .main-nav 有 .active 类时显示 */ } .menu-toggle { display: block; /* 在小屏幕上显示汉堡按钮 */ } .main-nav ul li { margin: 10px 0; } }

CSS实战避坑指南：

  1. box-sizing: border-box是神器：务必在全局重置中设置。它让元素的width和height属性包含了内容、内边距和边框，而不只是内容区。这让布局计算变得直观很多，避免了因为增加padding而导致元素被撑大的问题。
  2. 移动优先：先写适用于小屏幕的样式，再用min-width媒体查询为更大屏幕添加或覆盖样式。这比从桌面端开始做“收缩”适配要简单高效。
  3. 使用 Flexbox 和 Grid 布局：它们是现代CSS布局的利器。Flexbox适合一维布局（行或列），Grid适合二维布局。我们的导航栏.container用了flex，技能卡片用了grid。多练习这两个模型，能解决90%的布局问题。
  4. 避免使用固定高度：除非确有必要，不要给容器设置固定高度 (height)。使用min-height或让内容自然撑开高度，这样在不同内容量或屏幕尺寸下更灵活。
  5. 类名命名方法论：对于个人小项目，像上面这样简单的语义化命名（BEM方法论的一种简化）就足够了。保持一致性，比如都用连字符-连接单词。

5. 添加点睛之笔：基础JavaScript交互

静态网站已经成型，我们可以用一点JavaScript来增加交互性和动态功能。在项目根目录创建js文件夹和main.js文件。

5.1 实现移动端汉堡菜单切换

这是最常用的交互之一。我们需要在HTML的导航栏部分添加一个汉堡菜单按钮，并修改对应的CSS（上面已预留），最后用JS控制其显示/隐藏。

首先，更新HTML的导航部分：

<header class="site-header"> <div class="container"> <a href="index.html" class="logo">我的名字</a> <button class="menu-toggle" aria-label="打开主菜单">☰</button> <!-- 新增按钮 --> <nav class="main-nav"> <ul> ... <!-- 导航项不变 --> </ul> </nav> </div> </header>

然后，编写JavaScript：

// js/main.js // 等待DOM完全加载后执行 document.addEventListener('DOMContentLoaded', function() { // 1. 移动端菜单切换 const menuToggle = document.querySelector('.menu-toggle'); const mainNav = document.querySelector('.main-nav'); if (menuToggle && mainNav) { menuToggle.addEventListener('click', function() { mainNav.classList.toggle('active'); // 切换 .active 类 // 可选：改变按钮图标（这里简单切换文本） this.textContent = mainNav.classList.contains('active') ? '✕' : '☰'; this.setAttribute('aria-label', mainNav.classList.contains('active') ? '关闭主菜单' : '打开主菜单'); }); // 点击菜单外区域关闭菜单（可选，提升体验） document.addEventListener('click', function(event) { if (!event.target.closest('.main-nav') && !event.target.closest('.menu-toggle')) { mainNav.classList.remove('active'); menuToggle.textContent = '☰'; menuToggle.setAttribute('aria-label', '打开主菜单'); } }); } // 2. 动态更新页脚版权年份 const yearSpan = document.getElementById('current-year'); if (yearSpan) { yearSpan.textContent = new Date().getFullYear(); } // 3. 平滑滚动（如果未使用CSS的 scroll-behavior: smooth） // 为所有锚点链接添加平滑滚动（可选，因为我们在CSS中已设置） // 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) { // window.scrollTo({ // top: targetElement.offsetTop - 80, // 减去固定导航栏高度 // behavior: 'smooth' // }); // } // }); // }); });

5.2 表单基础验证（联系页面）

如果你的联系页面有表单，可以添加一些基础的前端验证。在contact.html中创建一个简单的表单：

<!-- contact.html 表单部分示例 --> <form id="contact-form" class="contact-form"> <div class="form-group"> <label for="name">姓名 *</label> <input type="text" id="name" name="name" required> <div class="error-message" id="name-error"></div> </div> <div class="form-group"> <label for="email">邮箱 *</label> <input type="email" id="email" name="email" required> <div class="error-message" id="email-error"></div> </div> <div class="form-group"> <label for="message">留言 *</label> <textarea id="message" name="message" rows="5" required></textarea> <div class="error-message" id="message-error"></div> </div> <button type="submit" class="btn btn-primary">发送消息</button> </form>

然后在main.js中添加验证逻辑：

// 联系表单验证 const contactForm = document.getElementById('contact-form'); if (contactForm) { contactForm.addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单默认提交 let isValid = true; // 清空之前的错误信息 document.querySelectorAll('.error-message').forEach(el => el.textContent = ''); // 验证姓名 const nameInput = document.getElementById('name'); if (nameInput.value.trim().length < 2) { document.getElementById('name-error').textContent = '请输入有效的姓名（至少2个字符）'; isValid = false; } // 验证邮箱 const emailInput = document.getElementById('email'); const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(emailInput.value.trim())) { document.getElementById('email-error').textContent = '请输入有效的邮箱地址'; isValid = false; } // 验证留言 const messageInput = document.getElementById('message'); if (messageInput.value.trim().length < 10) { document.getElementById('message-error').textContent = '留言内容至少需要10个字符'; isValid = false; } if (isValid) { // 这里可以添加真正的表单提交逻辑，例如使用 Fetch API 发送到后端或第三方服务 alert('表单验证通过！在实际项目中，这里会将数据发送到服务器。'); // contactForm.submit(); // 或者使用AJAX提交 // 例如使用 Formspree: fetch(this.action, {method: 'POST', body: new FormData(this)}) } }); }

JS实操心得：

  1. DOMContentLoaded事件：确保JS代码在HTML文档解析完成后才执行，避免操作尚未加载的DOM元素。
  2. 渐进增强：网站的 core functionality（内容浏览）不依赖JavaScript。JS只是用来增强体验（如菜单切换、表单验证）。即使JS加载失败或用户禁用JS，网站的基本功能（导航通过链接跳转）依然可用。
  3. 事件委托：如果页面上有很多相似的元素需要添加事件监听器（比如未来博客的文章列表），可以考虑使用事件委托，将监听器加在其父元素上，通过event.target来判断具体是哪个子元素，这样更高效。
  4. 前端验证是辅助：前端验证是为了提升用户体验，给出即时反馈。绝对不能替代后端验证，因为用户可以完全绕过前端JS。任何发送到服务器的数据都必须在后端进行严格的验证和清理。

6. 发布上线：让世界看到你的网站

至此，一个功能完整、响应式的个人网站就开发完成了。但代码躺在你的电脑里，只有你能看到。我们需要把它放到公共的互联网上。

6.1 本地测试与优化

在上传之前，务必进行彻底测试：

  1. 多浏览器测试：在 Chrome, Firefox, Safari, Edge 上打开你的网站，检查布局和功能是否一致。
  2. 响应式测试：使用浏览器开发者工具的“设备工具栏”，模拟各种手机、平板尺寸。或者最简单的方法，直接拖动浏览器窗口改变宽度，观察布局变化。
  3. 性能检查：在Chrome DevTools的 Lighthouse 面板运行一次审计。它会给出性能、可访问性、SEO等方面的评分和改进建议。重点关注：
    • 图片优化：确保图片经过压缩（可以使用 TinyPNG、Squoosh 等在线工具）。
    • 文件压缩：可以考虑压缩CSS和JS文件（使用构建工具如Vite、Webpack，或在线工具）。
    • 缓存策略：对于静态资源，可以设置合适的HTTP缓存头（这通常在部署平台配置）。

6.2 选择托管平台并部署

对于纯静态网站（HTML, CSS, JS），有非常多优秀且免费的托管选择：

  1. GitHub Pages (最推荐给开发者)：

    • 优点：完全免费，与GitHub无缝集成，支持自定义域名，自带HTTPS。
    • 操作：在GitHub上创建一个名为你的用户名.github.io的仓库，将你的项目文件推送到该仓库的main分支。几分钟后，访问https://你的用户名.github.io就能看到你的网站了。
    • 进阶：你可以使用docs文件夹或其他分支来托管项目文档网站。

  2. Vercel / Netlify (对现代前端工作流友好)：

    • 优点：部署极其简单（关联Git仓库即可自动部署），自带CI/CD，支持服务器端渲染（SSR）等高级功能，全球CDN，性能优秀。
    • 操作：注册后，导入你的GitHub/GitLab仓库，它们会自动检测是静态网站并完成部署。通常还会给你一个xxx.vercel.app或xxx.netlify.app的免费域名。

  3. Cloudflare Pages：

    • 优点：同样基于Git，集成在Cloudflare强大的网络中，速度有保障，免费额度慷慨。

部署通用步骤：

  1. 将你的代码用Git管理起来（git init,git add .,git commit -m “initial commit”）。
  2. 在GitHub等平台创建远程仓库。
  3. 将本地仓库关联并推送到远程。
  4. 在托管平台（如Vercel）关联该仓库，开始自动部署。
  5. 等待部署完成，获得你的网站链接。

6.3 购买并绑定自定义域名（可选但建议）

免费的二级域名（如username.github.io）足够使用。但一个简短、易记的自定义域名（如yourname.com或yourname.dev）会显得更加专业。

  1. 购买域名：在阿里云、腾讯云、Namecheap、GoDaddy等域名注册商处购买。
  2. 配置DNS：在你的域名管理后台，添加一条CNAME记录，指向你的托管平台提供的域名（如username.github.io）。或者按照托管平台（如Vercel）的指引，添加它们要求的A或CNAME记录。
  3. 在托管平台绑定：在GitHub Pages、Vercel等的项目设置中，添加你的自定义域名。
  4. 等待生效：DNS解析全球生效可能需要几分钟到几小时。

完成以上所有步骤后，你的个人网站就正式在互联网上安家了。它不仅仅是一个作品，更是你持续学习和更新的一个起点。你可以随时回来添加新的项目、撰写博客、优化样式。这个从零开始搭建的过程，其价值远超过最终的那个网站本身。