当前位置：首页 > news >正文

第一次搭建个人主页+GitHub部署全记录：HTML/CSS/JS前端实现+留言板踩坑

news 2025/11/14 8:36:22

第一次搭建个人主页+GitHub部署全记录：HTML/CSS/JS前端实现+留言板踩坑

作为编程新手，终于动手搭建了属于自己的个人主页！从空白HTML到前端美化，再到GitHub顺利部署上线，最后卡在留言板后端交互，全程既充实又有成就感。这篇文章就来详细分享我的实现过程、代码细节和避坑心得，适合和我一样的前端入门者参考~

一、技术栈与核心目标

技术栈：HTML（搭建框架）+ CSS（样式美化）+ JavaScript（交互实现）
核心功能：页面布局、导航平滑滚动、技能项hover动画、留言板表单提交、GitHub部署
后续规划：完善后端交互，让留言板实现真实数据存储与响应

二、实现过程分步拆解

1. HTML：搭建页面基础框架

首先用HTML构建了页面的核心结构，主要分为3个部分：

导航栏：包含首页、技能、留言板等导航链接，用于页面内跳转
主体区块：首页欢迎区、技能展示区、留言板表单区，明确页面功能分区
表单区域：留言板的输入表单，包含姓名、联系方式、留言内容等输入框和提交按钮

关键在于给核心元素添加唯一ID（如contactForm）和类名（如skill-item），为后续CSS美化和JS绑定事件做准备。

2. CSS：从"素颜"到"精致"的美化

CSS主要负责页面样式优化，重点实现了这几个效果：

全局样式：统一字体、清除默认边距，让页面风格一致
导航栏：固定顶部+横向排列，hover时文字变色，提升交互感
区块布局：首页占满屏幕高度，技能项卡片式设计，表单居中对齐
细节优化：按钮、输入框添加圆角和hover效果，增强视觉层次

技能项采用了绿色卡片+圆角设计，hover时不会变形，配合后续JS的放大动画，视觉效果更生动。

3. JavaScript：实现交互功能

JS主要完成了3个核心交互，代码简洁但实用：

表单提交绑定：给留言板表单添加提交事件，阻止默认刷新，弹出成功提示并重置表单
平滑滚动：点击导航链接，平滑跳转到对应页面区块，比默认跳转更友好
技能项hover动画：鼠标悬浮时技能项放大1.1倍，离开时恢复原样，过渡效果流畅

代码片段（核心JS逻辑）：

// 表单提交功能：仅绑定联系方式表单
const contactForm = document.getElementById('contactForm');
contactForm.addEventListener('submit', function(e) {e.preventDefault();alert('留言发送成功！我会尽快回复你~');contactForm.reset();
});// 平滑滚动：点击导航栏跳转到对应区块
document.querySelectorAll('nav a').forEach(link => {link.addEventListener('click', function(e) {e.preventDefault();const targetId = this.getAttribute('href');document.querySelector(targetId).scrollIntoView({behavior: 'smooth' // 平滑滚动效果});});
});// 技能项hover动画：放大效果
document.querySelectorAll('.skill-item').forEach(item => {item.addEventListener('mouseover', function() {this.style.transform = 'scale(1.1)';this.style.transition = 'transform 0.3s';});item.addEventListener('mouseout', function() {this.style.transform = 'scale(1)';});
});

4. GitHub部署：顺利上线无踩坑

前端功能完成后，就想着把项目部署上线，让别人也能访问。选择了GitHub Pages，整个过程意外顺利，没有遇到大问题：

在GitHub创建新仓库，仓库名严格遵循「用户名.github.io」格式
本地项目打包，通过Git命令（git add → git commit → git push）提交到仓库
进入仓库设置，找到GitHub Pages选项，选择main分支作为部署源
等待几分钟，直接访问「用户名.github.io」就能看到自己的个人主页，第一次上线项目真的超级有成就感～

三、遇到的问题与踩坑记录

1. 已解决的小问题

导航跳转不生效：一开始忘记给目标区块添加对应ID，补充ID后正常跳转
技能项放大后布局混乱：通过inline-block布局+transition过渡效果，解决了排版错乱问题

2. 待解决的核心问题

目前最大的卡点是留言板后端交互：前端表单提交后，没有弹出预期的成功提示窗，我调了一下network 其中response直接返回了html页面代码有点懵逼应该是前后端交互有问题也许数据库没连上还不知道,留言内容也无法真正存储。推测可能是接口配置错误、前后端数据格式不匹配或请求方式不当导致，明天会重点排查这几个方向，后续会更新解决方法。