企业官网建设流程全解析

一、前置准备

环境清单

1. 系统：Win10/Win11 / MacOS 全版本
2. 工具
   • Windows：瓦特工具箱 (Watt Toolkit，原名 Steam++)解决 GitHub 国内网络；Git，官网：https://steampp.net
   • Mac：无瓦特工具箱，自行准备可正常访问 GitHub 的网络环境；Git
3. 项目：本地静态网页，必须包含index.html首页入口
4. 账号：GitHub 账号，注册邮箱推荐 163 网易邮箱

教程目标：本地前端作品集免费部署，生成公网地址 https://你的用户名.github.io

二、工具安装 & 网络环境配置

2.1 Windows 端

2.1.1 瓦特工具箱（解决 GitHub 打不开、上传超时）

1 .浏览器打开官方网站 https://steampp.net进入下载页，获取 Windows 安装包Watt Toolkit.exe；双击安装包，选择【立即安装】→【立即体验】

2 .切换左侧「网络加速」标签页

3 .在平台加速列表勾选Github

4 .点击上方【一键加速】，软件保持后台运行

排错：杀毒拦截→加入白名单；加速无效→重启软件重新一键加速

2.1.2 Git 安装校验

1. 下载 Windows64 位 Git 安装包，全部默认选项安装
2. 打开 CMD 执行校验

git--version

排错：提示不是内部命令：把 Gitbin目录添加系统环境变量 Path，重启终端。

2.2 Mac 端

2.2.1 Git 安装（二选一）

方式 1 Homebrew 安装（推荐），打开「终端」执行：

brewinstallgit

方式 2：Git 官网下载.dmg安装包，一路默认完成安装。

2.2.2 Git 版本校验

git--version

排错：command not found，重启终端；brew 超时切换国内镜像源。

⚠Mac 重点：瓦特工具箱原生无 Mac 客户端，务必保证浏览器可正常打开 GitHub 官网，否则注册、上传全部失败。

三、GitHub 账号注册（Windows/Mac 操作完全一致）

1.网络环境就绪后浏览器访问：https://github.com/

2.右上角点击Sign up注册

3.填写：邮箱、密码 (8‑15 位数字 + 字母)、用户名

4.前往邮箱收取验证码完成注册，随后Sign in登录

排错：收不到验证码，查看垃圾邮件，点击重发验证码；网页转圈检查网络环境。

四、创建 Pages 专属仓库（Windows/Mac 操作完全一致）

⚠️仓库名称必须严格：你的GitHub用户名.github.io，名称错误 Pages 直接 404

1 .登录后右上角点击加号+→New repository

2 .Repository name 填入：你的用户名.github.io

3 .Visibility 选择Public，其余全部保持关闭

4.点击Create repository完成创建

五、上传本地网页作品集文件（Windows/Mac 网页操作完全一致）

两种上传方式：【网页拖拽上传】新手零命令；【Git 命令推送】适合频繁更新项目

方式 A：网页拖拽上传（零基础首选）

1 .仓库页面切换到Code标签

2 .点击Add file→Upload files进入网页上传界面

3 .将本地Portfolio文件夹拖拽上传；再拖拽所有 html/css/js 资源文件

4 .滚动到页面底部，点击绿色Commit changes提交

上传成功标志：仓库文件列表完整显示全部资源

排错：上传转圈超时，检查网络；大文件拆分分批上传。

方式 B：Git 命令行上传（适合 Mac / 频繁迭代项目，双系统通用）

把本地项目文件夹，终端 cd 进入项目根目录执行

# 初始化本地gitgitinit# 添加全部文件gitadd.# 填写提交备注gitcommit-m"init 上传作品集"# 关联你的github.io仓库地址，替换为自己仓库HTTPS链接gitremoteaddorigin https://github.com/你的用户名/你的用户名.github.io.git# 推送到main分支gitpush-uorigin main

排错：推送失败，确认网络正常；初次推送会弹窗输入 GitHub 账号令牌。

六、开启 GitHub Pages 托管配置（Windows/Mac 操作完全一致）

1 .仓库顶部导航点Settings，左侧侧边栏找到Pages

2 .Source 选择Deploy from a branch
3 .Branch 选main，文件夹选择/(root)根目录；不一致就修改后点 Save

4 .等待 1‑5 分钟后台自动构建发布，不要立刻访问。

七、部署验证（Windows/Mac 操作完全一致）

浏览器访问：
https://你的用户名.github.io

✅成功标准：完整展示作品集页面，样式、图片交互正常；
❌失败表现 & 处理：

1. 404：核对仓库命名、Pages 分支配置，确认根目录存在index.html，等待构建完成；
2. 样式丢失：检查全部 css/js 图片是否上传，代码全部使用相对路径，禁止本地绝对磁盘路径。

八、高频坑位速查

1. GitHub 网页加载慢、上传转圈

Windows：打开瓦特工具箱官网下载安装，勾选 GitHub，一键加速。
Mac：切换可用网络环境。

2. 仓库名称提示不可用

原因：用户名拼写错误｜修复：复制 GitHub 主页真实用户名，严格遵循用户名.github.io格式。

3. 访问页面 404 Not Found

原因：仓库名错误 / Pages 源配置错误 / 缺失 index.html/ 未完成构建
修复：核对仓库名称；Pages 设置 main 分支/(root)；确认存在 index.html；等待 5 分钟再刷新。

4. 文字正常，图片、JS 样式全部失效

原因：资源没传全、写了本地绝对路径
修复：补全上传文件，全部修改为网页相对路径。

5. 邮箱收不到注册验证码

修复：检查垃圾箱；点击 Resend 重发；确认 GitHub 网络访问正常。

6. Mac git push 推送报错

原因：不再支持账号密码登录，需要个人访问令牌 (PAT)
修复：GitHub 账号设置生成 Token，推送时密码位置粘贴 Token 令牌。

九、FAQ

Q：Mac 可以使用瓦特工具箱吗？

A：瓦特工具箱官网仅有 Windows 版本，没有 Mac 客户端；Mac 需要自行保障 GitHub 网络连通。

Q：后续修改网页，怎么更新线上网站？

A：①网页端拖拽覆盖旧文件提交 Commit；②使用git push命令行推送更新（Mac 更推荐）。

Q：GitHub‑Pages 收费吗？

A：公开仓库完全免费，适合个人作品集、简历 Demo 展示。

十、进阶拓展

1. 舍弃网页拖拽上传，熟练 Git 命令行提交推送；
2. 绑定个人自定义域名；
3. Vue/React 打包 dist 静态产物部署到 Pages；
4. 配置 CI 自动部署，本地改代码仓库自动更新线上网站。

十一、结语

到这里，你的个人作品集站点就已经成功部署上线了。GitHub Pages 是前端新人零成本打造线上简历、作品展示页的绝佳方案，不用购买服务器、无需复杂环境配置。

你可以持续迭代页面，不断上新项目、优化样式，也可以尝试绑定自定义域名，让作品集更有个人特色。后续更新、踩坑时，直接回看本文的排错清单就能快速解决问题。

教程如果对你有帮助，欢迎点赞👍、收藏⭐，方便以后反复查阅。也可以转发给同样想搭建个人站点的小伙伴，一起观看！