第一次写完一个HTML页面双击、浏览器打开页面在自己眼前亮起来的那一刻那种“我好像也能做网页了”的兴奋感我太懂了。但接下来你大概率会撞上同一堵墙想把页面发给朋友看看发了个.html文件过去结果对方打开后要么布局全乱要么图片全裂甚至压根打不开想让人家在手机里随手一点就访问更是不可能。问题出在哪因为你只是把一个本地文件打开给自己看并没有真正“发布”到互联网上。这篇文章要解决的就是“发布”这一整件事从零开始把你自己写的HTML静态网页变成一个真真正正可以通过网址访问的网站。整条路线不花钱、不需要服务器、不需要懂后端适合刚学完HTML和CSS基础、第一次动手做完整页面并想让它上线的新手。你只要跟着操作一步步走完就能拿到一个属于自己的网址。1. 发布前先扫清这四道坎目录、命名、编码与本地预览1.1 先理解你写的网页和“网站”差在哪里一个网站本质上是放在一台服务器上的若干文件。所谓服务器就是一台常年开机、24小时对外提供网页文件的电脑。你用浏览器双击打开本地HTML时地址栏是file://开头的这个地址只有你的电脑认别人在另一个城市肯定访问不了。所以发布静态网页要做的核心事情就是把这一堆文件放到一个“公网可达的服务器”上并给它一个http://或https://开头的网址。理解这点之后你还得知道静态网页和动态网站的区别。HTML、CSS、JS一起构成的页面没有数据库、没有后端程序属于静态网页。静态网页的发布是最省事的因为不需要配置服务器环境不需要安装运行环境只需要把文件放到一个能对外提供访问的地方。很多新手被“部署”两个字吓住其实对静态网页来说部署就是把文件传上去平台帮你完成发布没有别的复杂环节。1.2 目录结构上线前先把家底捋清楚很多小白写网页时HTML、图片、CSS、JS全躺在一个文件夹里有的甚至直接在桌面放了一堆“未命名1.png”。第一次发布没关系但从第一行代码起就按规范组织文件能少掉一半上线后的问题。以一个最简单的小项目为例my-site/ ├── index.html ├── css/ │ └── style.css ├── js/ │ └── main.js └── images/ ├── logo.png └── banner.jpgindex.html是默认首页。大部分托管平台在访问一个目录时会优先寻找这个文件。比如你访问https://用户名.gitee.io/my-site/平台实际返回的是该目录下的index.html。如果你的首页叫home.html访问时就必须手动输入https://用户名.gitee.io/my-site/home.html对用户很不友好。所以首页文件固定命名为index.html是不成文的规矩尽量照做。1.3 命名规范全小写、用连字符、别带中文文件名命名问题是“本地好好的一上线就404”的最大元凶。Windows本地文件名不区分大小写但绝大多数线上服务器跑在Linux上区分大小写。你本地写link relstylesheet hrefCSS/style.css文件夹实际叫cssWindows上双击可能没问题上传后却一定找不到文件。我的建议是固定四条规则一律小写字母不用大写多个单词用连字符-分隔比如about-me.html不要用about_me.html或驼峰写法不要用中文文件名涉及中文的目录名、文件名都尽量改掉图片、CSS、JS文件同样遵守这些规则不要小看这几条线上服务器的文件系统比本地严格得多。命名规范是花五分钟就能做好、但能省下很多排查时间的事。1.4 编码和骨架中文不乱码的根本网页乱码十有八九是编码不一致。在HTML头部meta charsetutf-8声明了文档编码但要让这个声明生效前提是文件的真实保存格式也是UTF-8。很多小白用记事本编辑完就保存Windows记事本默认可能是ANSI或带BOM的UTF-8放到线上的服务器后浏览器按UTF-8解析自然乱码。一个标准的HTML骨架建议从一开始就长这样!doctype html html langzh-CN head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title你的页面标题/title link relstylesheet hrefcss/style.css /head body h1你好世界/h1 script srcjs/main.js/script /body /html几个容易被忽略的细节html langzh-CN告诉浏览器和搜索引擎页面语言是中文viewport标签让移动端按设备宽度渲染没有它手机上字会挤成一团布局直接崩CSS用link在head里引入JS一般放在body结束前这样DOM加载完再执行脚本不容易报错。1.5 用本地服务预览别只用“双击打开”双击HTML文件只是file://协议下的本地预览它和线上http://环境有不少差异。比如某些浏览器会限制file://协议下外部资源的加载某些字体和JS模块在本地双击时根本没法运行还有人经常遇到的“HTML文件双击后预览空白”多半也是这个原因。建议本地装VS Code再装Live Server插件右键“Open with Live Server”浏览器自动打开http://127.0.0.1:5500这才是模拟线上环境的正确姿势。如果不想装VS Code用Python自带工具也可以。在项目文件夹打开命令行执行python -m http.server 8000然后浏览器访问http://localhost:8000。看到http://开头的地址说明你已经在用接近线上环境的方式预览了。这一步做好后面部署完出问题的概率能减掉一半。2. 选平台不能只看名气GitHub Pages、Gitee Pages与Netlify的取舍2.1 三个免费方案先看对比目前主流的免费静态网页托管平台常见的就这几个平台免费额度国内访问体验适合人群GitHub Pages免费、无限流量部分地区访问不够稳定已在用GitHub、懂一点GitGitee Pages免费、内容审核国内访问快纯小白、想快速上线看效果Netlify免费版够用一般能接受英文界面、想体验拖拽部署Vercel免费版够用一般前端开发者配合框架自动部署这里没有提对象存储方案不是它不行而是对纯小白来说Git仓库加Pages服务的模式是成本最低的不需要买服务器不需要配Nginx不需要关心维护上传HTML文件就完事。有些云厂商的对象存储也有免费额度但配置桶策略、权限管理对新手不友好等以后有需要再研究也不迟。2.2 为什么静态网页的托管这么简单静态网页本质上就是“一堆文件”。它的发布不需要数据库不需要后端运行环境只需要一个能跑静态文件服务的服务器。Pages服务恰好就是干这个的平台已经把Web服务器配置好你只要把文件推到仓库平台自动把仓库里的文件作为网站内容对外提供。这个逻辑很像你把照片上传到云相册上传完生成一个可分享的链接别人点开就能看。静态网页托管也是同一个道理只不过分享的内容从照片变成了HTML页面加CSS、JS文件而已。想明白这一点你就不会被“部署”这个词吓到了。2.3 我的推荐路线小白只求“最快看到自己的网页上线”我建议按这个优先级走GitHub Pages生态最大、文档最全push代码后自动更新适合想把发布流程学到位的Gitee Pages国内访问快中文界面适合给国内朋友演示Netlify等以后想拖拽上传、玩点自动化的时候再尝试不管选哪个发布的核心逻辑一模一样建仓库、传文件、开启Pages服务、拿到网址。学会一个另一个半小时就能上手。3. 全程跟做把网页部署到Gitee Pages3.1 注册、建仓库注意仓库名和可见性第一步去Gitee官网注册账号按平台要求完成手机验证、身份验证。这是国内平台的合规要求照着做就行。验证通过后新建仓库。仓库名设置成和项目相关的小写英文比如my-first-page。可见性一定要选“公开”因为Pages服务的免费版要求仓库是公开的私有仓库开通Pages能力通常需要付费。仓库建好之后你会看到仓库主页接下来的文件都传到这个仓库里。3.2 上传本地文件三种方式选一种方式A网页上传最快上手新建仓库后进入仓库的“文件”页找到“上传文件”按钮把你要发布的HTML、CSS、JS、图片整个拖进去。注意网页上传不支持直接拖文件夹所以你需要把整个项目文件夹压缩成压缩包然后在“上传文件”页面底部选择压缩包上传平台会自动解压到仓库根目录。这是小白最快的方式。方式BGit命令行上传顺便学Git在本地项目目录打开命令行依次执行git init git add . git commit -m first commit git remote add origin https://gitee.com/你的用户名/my-first-page.git git push -u origin master执行到最后一步会要求输入Gitee账号和密码输入后等待上传完成。如果你的仓库是空的直接push即可如果仓库里有系统自动生成的README文件需要先执行git pull origin master合并再push。方式C可视化Git客户端下载SourceTree或TortoiseGit这类客户端把仓库克隆到本地把文件复制进去点提交、推送。这种方式比命令行直观比网页上传更适合反复更新。3.3 开启Pages服务等审核进入仓库页面找到“服务”菜单点“Gitee Pages”。选择分支为你上传的分支一般就是master部署目录保持默认的/根目录。然后点“启动”。免费版Gitee Pages需要经过平台审核审核时间通常几分钟到几小时不等。审核通过后平台会给你一个类似https://用户名.gitee.io/my-first-page/的地址。用浏览器打开这个地址你的网站就上线了。这中间常见的疑惑是审核到底审什么本质上平台会检查仓库内容是否合规、是否包含违法或侵权信息并没有技术门槛。内容正常基本都能通过。3.4 更新内容每次改完都要“重新部署”Gitee Pages的免费版不会自动重新部署。你修改文件推送到仓库后线上网站内容并不会自动改变。需要再次进入Gitee Pages页面点“更新”按钮等它重新发布完成线上内容才会同步。这是和GitHub Pages最大的区别。我第一次用的时候没注意还以为自己的修改没保存后来才发现是忘了重新部署。3.5 上线后第一时间验证拿到网址后务必做三件事确认首页能打开标题、正文、图片正常在手机上直接输入网址访问看布局是否错乱点遍页面里的所有链接确认没有4044. 换成GitHub Pages怎么操作差异点在哪里4.1 建仓库和上传文件GitHub的仓库创建思路和Gitee基本一样注册、验证邮箱、新建仓库。有一个方便之处如果仓库名正好是用户名.github.io那么网站地址就是https://用户名.github.io/不用再拼仓库名如果起别的名字访问地址就要带上仓库路径。上传文件用仓库页面里的“Add file”-“Upload files”拖拽上传。和Gitee一样网页上传本质是逐个文件传如果你有十几张图片更建议用Git命令行或客户端。4.2 打开GitHub Pages默认自动发布进入仓库的Settings设置找到Pages。Source源处选择“Deploy from a branch”从分支部署分支选main目录选/root保存。等一到两分钟GitHub就帮你把站点构建并发布了。整个过程里最需要注意的细节是分支名。GitHub新仓库默认分支名是mainGitee默认是master。很多新手照搬教程时没注意这个差异明明配置了但就是不生效多半就是分支选错了。4.3 更新方式push代码即自动更新GitHub Pages免费版默认是“代码推送后自动构建并发布”。你改完本地文件后执行git add . git commit -m update git push推上去后等一两分钟刷新网页新内容就在了。这套“改代码-推代码-自动上线”的流程正是Git天然的工作流比网页上传高效得多。等以后项目变大用Git管理几乎是唯一选择。4.4 网络环境差异的实话实说GitHub Pages在全球被广泛使用但在部分地区和网络环境下访问体验并不稳定。如果你自己或目标用户处于这种网络环境建议优先用国内平台。这不是什么技术问题纯粹是选址问题。我个人的态度是遇到访问不畅不折腾、不用各种绕行方案直接换能稳定访问的平台把时间花在内容本身上。5. 上线后逐项验收中文乱码、图片裂开、样式丢失的检查思路5.1 总体思路用浏览器开发者工具定位网页上线后出问题千万不要瞎猜。按F12打开开发者工具有三个面板一定先看Console控制台报错会以红色显示比如某个文件404、某个变量未定义Network网络能看到所有请求的加载情况红色项就是加载失败的文件Elements元素能看到最终渲染出来的HTML结构一个最简单的排查套路页面样式全丢了去Network看CSS文件状态码。如果是404基本就是路径问题如果是200再看是不是缓存的问题。5.2 中文乱码的处理方法线上中文乱码十个里面九个是编码问题。处理顺序如下检查HTML头部有没有meta charsetutf-8用VS Code打开文件看右下角是不是显示UTF-8。如果显示GBK或ANSI点它并选择“通过编码保存”-UTF-8保存后重新上传改完记得重新部署Gitee要手动点更新再看效果这里多说一句UTF-8文件有的带BOM头文件开头有三个特殊字节有的不带。VS Code默认保存的是无BOM的UTF-8这是最稳妥的选择。个别情况下带BOM可能会导致页面开头出现一个看不见的字符或者影响CSS解析所以统一用无BOM最省心。5.3 图片裂开的路径排查图片在本地能显示、上线后裂了基本就是路径问题。网页里引用图片最好用相对路径少用绝对路径。相对路径的规则images/logo.png当前目录下的images目录里的logo.png./images/logo.png和上面等价./表示当前目录../images/logo.png上一级目录的images如果你在index.html里写了img srcC:\Users\...\logo.png这是Windows本地绝对路径线上必失效如果写了/images/logo.png表示站点根目录下的images而你的文件实际不在根目录的images文件夹里也会404。上线前把所有图片引用改成相对路径重新测试一遍是最稳的做法。5.4 页面还是老样子的缓存问题很多时候线上页面没变化是浏览器缓存。CtrlF5强制刷新一次或者打开无痕窗口再访问。Gitee Pages因为需要手动更新所以也要先确认是不是真的点过“更新”按钮。另外GitHub Pages有时发布需要一两分钟刚push完立刻刷新看到的可能还是旧内容稍等一会儿再刷。5.5 手机端布局错乱的元凶如果在手机上看布局乱最常见的原因就是少了viewport标签。在head里加上meta nameviewport contentwidthdevice-width, initial-scale1.0加完之后大部分基础布局问题会消失。如果还是乱那就要考虑用响应式布局了——媒体查询、Flexbox、Grid这是你下一步该学的东西。6. 高频翻车现场排查实录四个case完整复盘6.1 Case 1本地一切正常传上去后样式全丢一位朋友把index.html和style.css都传到了Gitee仓库访问后页面有文字但没有排版。我让他打开Network面板发现style.css请求的状态码是404。再看他的HTML源码写的是link relstylesheet hrefcss/style.css但他上传时把style.css直接丢在了根目录没有放到css文件夹。也就是说路径引用和实际目录不一致。修复办法要么在根目录建css文件夹并把style.css放进去要么把href改成style.css。这个案例说明部署之前一定要做一件事把自己代码里的所有相对路径对着仓库目录结构核对一遍。不要觉得本地能打开就万事大吉本地环境和线上目录一旦不一致立刻就会出问题。6.2 Case 2上传了整个压缩包访问地址却404另一位朋友在仓库上传页面直接拖入了一个zip包以为平台会自动解压结果访问网址一直404。修复办法Gitee和GitHub的网页上传上传zip文件不会自动解压。必须走“上传文件”底部的压缩包上传入口平台才会自动解压到仓库根目录。或者也可以先在本地解压干净再逐个上传。文件数量多的时候更推荐用Git或客户端传整个目录。这个场景特别典型。网页上传对小白最友好但限制也最多不能直接传目录、压缩包要选对入口、大量文件容易传漏。凡是文件数量偏多我建议直接用Git push或可视化客户端。6.3 Case 3改了文件网站上没变化一位朋友重新上传了index.html仓库里的内容确认是最新的但线上始终是旧页面。修复办法Gitee Pages需要手动进入Pages页面点“更新”让服务重新发布GitHub Pages则要等一两分钟再看是不是浏览器缓存必要时CtrlF5强制刷新。这个案例里最大的认知误区是把“仓库内容”和“网站内容”划等号。Pages服务展示的是“发布”那一刻的内容快照尤其是Gitee免费版不会实时跟随仓库变动。所以要把“更新仓库”和“重新部署”当成两个独立动作这个意识要建立起来。6.4 Case 4上传时覆盖了原有文件仓库里却多出一堆旧文件一位朋友用网页上传功能更新页面把本地新文件传上去后发现仓库里多了很多已经删除的旧文件线上也出现了残页。修复办法网页上传本质是“增量上传”它不会自动删除仓库里已存在但本地没有的文件。想让线上和本地完全一致最靠谱的方式是用Git在本地把不需要的文件删除执行git add -A、git commit、git push让删除操作也同步到仓库。也可以用客户端手动删除多余文件再推送。这也是我反复推荐尽早学Git的原因。网页上传适合“第一次上线”但从第二次更新开始用Git管理就是更可控、更干净的选择。7. 再往上走一步自定义域名、HTTPS与自动化7.1 自定义域名免费二级域名用久了很多人想换成自己的域名。核心原理不复杂Pages平台会提供一个IP或CNAME地址你把域名的CNAME解析到这个地址再在仓库根目录放一个CNAME文件里面写上你的域名平台就能识别。域名解析要到域名服务商后台操作。这里提醒一句国内域名服务商对绑定域名有相应的备案和网站信息登记流程具体以服务商和Pages平台当前的规则为准。等你真有这个需求时直接搜平台官网的“自定义域名”帮助文档跟着做就行。7.2 HTTPS不用自己配GitHub Pages和Gitee Pages的免费域名默认都支持HTTPS你在浏览器地址栏能看到小锁标志说明加密已经生效。自己买服务器部署的话还要申请证书、配置证书Pages服务把这些都包了这也是它对新手很友好的一点。7.3 自动化先了解不急着用等网站内容越来越多手动点击“更新”就显得低效。GitHub Pages在push后自动构建已经是很顺滑的流程Gitee Pages免费版虽然需要手动更新但平台也有相关的构建工具可以做自动部署只是门槛略高。这里的建议是刚发布完第一个网页的阶段先用最笨的手动流程把发布这件事做熟。发布流程的本质就是“文件同步加站点更新”等你对每一步发生什么有了肌肉记忆再研究自动化也不迟。到时候自动化对你是加分项而不是负担。说实话第一次把自己写的页面放到公网输入网址、点击回车看到页面从手机和电脑上都正常打开的那一刻那种“全世界的人都能访问我的网址”的感觉是本地预览完全给不了的。发布这件事本身不难难的是把每一步背后的为什么弄清楚。希望你这第一个静态网页顺利上线然后就可以琢磨下一个页面要做什么了。