零基础完整搭建个人网站静态作品集/简历主页个人网站是技术从业者、在校学生展示个人技能、项目成果的重要线上载体可直接用于简历背书、技术作品集展示。本文系统梳理前端网页基础原理、本地网页搭建、局域网部署、公网免费上线全流程区分静态网页与动态网站的核心差异提供零基础可落地的个人主页搭建方案无需服务器成本、无需复杂编程适配求职作品集、个人技术名片场景。一、核心基础概念1.1 前端网页核心构成标准前端静态网页由三类基础语言组成三者分工明确、构成网页完整形态1. HTML网页结构骨架负责承载文字、图片、链接、模块布局等基础内容2. CSS网页样式渲染负责页面配色、排版、边距、阴影、自适应美化3. JavaScript网页交互逻辑负责实现弹窗、数据打印、页面动态效果等交互功能。1.2 静态网页与动态网站区分1. 静态网页仅由HTML、CSS、JS文件构成无数据库、无后端服务文件可直接在浏览器打开部署简单、稳定性高、零运维成本适用于简历展示、项目作品集2. 动态网站依托服务器、数据库、后端程序运行支持文章发布、用户留言、后台管理等功能需付费服务器及域名备案适用于个人博客、功能型网站。1.3 网页访问核心逻辑单纯的网页文件仅支持本地双击打开局域网、公网设备无法直接访问。需要依托Web服务程序转发文件常用轻量服务工具Python简易HTTP服务、Nginx、FileBrowser。二、零基础手写个人主页可直接用于求职本文提供通用化、轻量化个人作品集网页模板适配嵌入式、机器人、计算机相关专业学生包含个人介绍、技能栈、项目经历模块可直接修改使用。2.1 完整源码新建文本文档修改后缀为 index.html 写入以下代码!DOCTYPEmeta charsetUTF‑8 /meta nameviewport contentwidthdevice‑width, initial‑1.0/个人主页 | 技术作品集style*{margin:0;padding:0;box-sizing:border-box;}body{background-color:#f4f6f8;font-family:Microsoft Yahei,sans-serif;color:#222;line-height:1.7;}.container{max-width:800px;margin:40px auto;padding:0 20px;}.card{background:#fff;padding:32px;border-radius:12px;box-shadow:0 2px 12px #00000012;margin-bottom:24px;}h1{font-size:28px;margin-bottom:8px;}h2{font-size:20px;margin:20px 0 12px;color:#2c3e50;}p{margin-bottom:12px;}a{color:#0066cc;text-decoration:none;}a:hover{text-decoration:underline;}.item{padding:12px 0;border-bottom:1px solid #eee/style/headdiv classdiv classcardh1个人简介/h1p技术方向嵌入式开发 / ROS机器人开发 / 前端基础开发/pp邮箱xxxx1/pp代码a target_blank hrefhttps://gitee.com/你的idhttps://gitee.com/你的id/a/divdiv classcardh2技能栈/h2pC语言、Linux基础、Git版本管理、ROS2、MCU嵌入式开发、机械建模、前端静态页面/p/divdiv classcardh2核心/h2div classh3两轮差分移动机器人/h3p完成整机需求定义、BOM清单整理、3D结构建模基于MCU完成底层固件开发实现编码器数据采集、PID速度闭环控制、串口CRC通信依托ROS2搭建上位机程序完成里程计解算、TF坐标变换实现整机软硬件联调与/pp项目a target_blank hrefhttps://gitee.com/你的id/diff-robot项目源码仓库/a/div/divdiv classcardh2/h2p具备完整的硬件建模、嵌入式固件开发、机器人上位机开发、静态网页搭建能力熟悉项目从设计、开发到落地的完整流程持续深耕嵌入式与机器人技术领域。/div/div/html2.2 本地预览方法1. 修改代码中个人信息、技能、项目、仓库链接为个人内容2. 双击 index.html 文件即可通过浏览器本地预览页面效果3. 文件编码统一为UTF-8避免中文乱码。三、局域网网页部署内网共享访问如需实现同一局域网内多设备访问个人主页可通过Python内置HTTP服务快速搭建临时Web服务无需额外安装软件。操作命令打开网页文件所在文件夹打开终端执行命令bashpython3 -m http.server 80801. 本机访问 http://127.0.0.1:80802. 局域网设备访问 http://本机IP:8080该方案适用于本地测试、内网展示部署便捷、零配置、无成本。四、公网免费上线Gitee Pages 正式部署通过Gitee Pages可实现免费公网部署、无需服务器、无需备案生成永久公开链接可直接写入简历。4.1 部署流程1. 注册并登录Gitee平台新建公开仓库2. 仓库命名格式 个人Gitee用户名.gitee.io 固定格式3. 将修改完成的 index.html 文件上传至仓库根目录4. 提交并推送代码至 main 主分支5. 进入仓库【设置】开启Gitee Pages服务6. 配置参数分支选择 main 部署目录选择根目录 / 7. 等待1-3分钟系统自动生成公网访问链接。4.2 简历链接使用示例plaintext个人主页https://xxx.gitee.io代码仓库https://gitee.com/xxx五、进阶网站搭建方案5.1 框架式静态网站对于需要长期更新技术笔记、项目文档的用户可使用工程化工具搭建网站1. VitePress基于Markdown快速生成技术博客、作品集网站轻量化、易维护2. Hugo成熟的静态网站生成工具拥有丰富开源主题适合个人技术博客。框架项目执行核心命令bash# 初始化项目npm create vitepresslatest my-site# 本地开发预览npm run dev# 打包静态文件npm run build打包生成的 dist 文件夹文件可直接用于Pages公网部署。5.2 服务器动态网站进阶如需实现博客发文、用户留言、后台管理等功能可采用云服务器WordPress方案1. 购买轻量云服务器安装Ubuntu系统与宝塔面板2. 一键部署WordPress程序可视化管理网站内容3. 绑定自定义域名并完成ICP备案实现独立官网。适用场景长期技术博客运营不推荐零基础求职用户使用成本高、运维复杂。六、方案优劣对比搭建方案 费用 是否需要备案 运维难度 适用场景静态页面Gitee Pages 免费 无需备案 极低 求职简历、项目作品集首选静态文件云服务器Nginx 付费 自定义域名需备案 低 私有化部署、完全自主掌控WordPress动态网站 付费 必须备案 中 个人技术博客、功能型网站七、常见问题与避坑指南1. Gitee Pages仅支持公开仓库私有仓库无法部署上线2. 网页主文件必须命名为 index.html 否则无法正常识别访问3. 网页内链接建议使用完整HTTPS地址避免相对路径失效4. 公开网页禁止暴露手机号等隐私信息防止爬虫抓取骚扰5. 中文乱码统一解决方案文件保存编码设置为UTF-8。八、总结静态个人网站是性价比最高的技术个人名片方案具备零成本、易部署、高稳定、免运维的优势完全满足学生求职、项目展示的核心需求。零基础用户可通过「手写单页HTMLGitee Pages」快速搭建上线有进阶需求的用户可通过VitePress、Hugo搭建可迭代的技术博客网站。相较于动态网站静态网页更轻量化、无安全漏洞风险是技术从业者入门建站的最优选择。