经常有人问我“怎么创建一个网站”特别是完全没写过代码的朋友总觉得这是件特别遥远的事。其实创建一个网站这件事拆开看就是三个部分一个域名网址、一台服务器放网站文件的电脑、一份网站代码别人浏览器里看到的内容。把这三件事串起来你的网站就上线了。这篇文章就是一份完整的分步指南我会用手把手的方式从注册域名、搭建本地环境、写第一行代码到部署上线全程带着走一遍。如果你是第一次接触网站开发按照这篇指南操作当天就能跑通整个流程之后想做什么类型的网站无非是在这个基础上换模板、加功能而已。1. 先想清楚这一步比写代码更重要1.1 网站上线前你必须搞懂的三个核心概念很多新手一上来就急着打开编辑器写代码写到一半就卡住了因为没搞懂网站到底是怎么被“别人”看到的。我先花点篇幅把这层窗户纸捅破。网站的本质就是一堆文件HTML、CSS、JS、图片保存在一台24小时开机的电脑上那台电脑就是服务器。用户访问你的网址时浏览器会向服务器发起请求服务器再把文件发给浏览器浏览器解析渲染成你看到的页面。这里的关键是你的电脑不能当服务器用因为你没法保证它24小时不断电、不断网更没法给它申请一个固定的公网IP。所以你需要租一台云服务器这是整个链条里花钱的核心环节。域名则是网址的“门牌号”因为IP地址太难记了。一个标准网址的完整流程是用户在浏览器输入域名DNS服务器把域名解析成服务器的IP地址然后连接上服务器拉取网页文件。整个过程就发生在几秒之内这也是为什么你需要在服务器管理后台配置“域名解析”的原因——不解析域名就是摆设。代码就是网站本身的内容。对初学者来说最友好的切入方式是从HTML和CSS开始HTML负责页面的结构和文字内容CSS负责样式和美化。JavaScript可以等这两个基础打牢之后再补一开始不用碰。1.2 静态网站和动态网站选错路径会多走很多弯路创建网站前你还会面对一个选择做纯静态网站还是动态网站我见过太多新手一上来就装WordPress或者学PHP结果被数据库、后台、插件这些东西搞得焦头烂额连网站长什么样都没看到就放弃了。对一个初心者而言第一步做纯静态网站是最合理的路径。所谓静态网站就是每个页面都是写死的HTML文件打开什么地址显示什么内容没有任何数据库参与。它的优点是简单、速度快、部署方便你只需要会HTML和CSS就能做出一个看起来相当完整的网站。缺点是你没法让用户注册登录、没法发表评论、没法动态更新内容但这对于“我的第一个网站”来说完全不是问题。动态网站则不同它有后台有数据库网页内容可以实时增删改查。比如你想做一个带会员系统的网站、一个博客系统那就需要动态网站。动态网站的搭建思路是服务器安装PHP、MySQL等环境代码从前端HTML扩展到后端逻辑而你写的每一行PHP、Python代码都是在和数据库打交道。我的建议很简单如果你的目标就是“先有一个自己的网站”那就老老实实做静态的如果你的目标很明确是“做社区、做商城、做带登录功能的网站”那也建议先用静态把界面和交互做出来再一步步扩展技能栈。饭要一口一口吃网站也要一层一层搭。2. 手把手搭建本地开发环境5分钟搞定2.1 写网站代码你需要装什么软件写网页代码并不需要多高级的工具一个文本编辑器加一个浏览器就够用了。不过为了提高效率、减少错误我建议你按下面这套方案配置本地环境。第一样是代码编辑器推荐VS Code完全免费跨平台。它自带语法高亮、代码提示、自动补全还有大量插件可以装哪怕你现在还没概念装上了也不会后悔。去官网下载对应系统的版本一直点下一步就能装完不需要特殊配置。第二样是浏览器推荐Chrome或者Edge它们的开发者工具F12调起方便调试HTML和CSS几乎离不开。看完效果按F12可以直接在Elements面板里查看标签结构在Console里看报错信息新手排错全靠它。第三样是本地预览工具。虽然你可以直接用浏览器打开HTML文件但用本地服务器预览更接近线上效果。推荐在VS Code里安装插件Live Server安装后点右下角的“Go Live”按钮浏览器会自动打开一个本地网址改动代码保存后页面即时刷新体验非常顺滑。2.2 新建项目目录从零到一的第一步装好软件之后在电脑上找个位置新建一个文件夹比如叫my-site这个文件夹就是你的整个网站工程目录。打开VS Code点击左上角“文件 - 打开文件夹”选到这个my-site文件夹然后在这个文件夹里新建两个文件index.html和style.css。这里有个新手很容易搞混的问题为什么入口文件要叫index.html因为服务器默认的首页文件就是index.html。当用户访问你的域名根地址时服务器会优先找这个文件来展示如果你把它命名为home.html访问域名时会直接报404。这个约定俗称的规则就算你以后用PHP、Node.js做后端入口文件的逻辑也大同小异。当然如果要用Live Server插件预览你可以不用手动建这两个文件直接新建一个index.html之后点Go Live。但我的建议是手动建好目的就是让你养成“先规划好目录再动手”的习惯。3. 从零写一个完整页面代码其实没那么可怕3.1 HTML基本功页面的骨架和结构HTML的全称是HyperText Markup Language翻译过来叫超文本标记语言。你不需要记这个名词只需要记住一个核心认知HTML就是一堆尖括号标签标签名告诉浏览器这块内容是什么。比如h1是标题p是段落a是链接img是图片div是一个区块容器。标签分两种写法有开始有结束的成对标签比如p这里是一段文字/p结束标签多一个斜杠还有自闭合标签没有文字内容比如img srcphoto.jpg alt说明文字。HTML的语法就这两条剩下的复杂度全来自于标签的属性和层级关系。我写一个最基础的完整页面给你看这段代码就是一个能直接在浏览器里打开的网站雏形!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的第一个网站/title link relstylesheet hrefstyle.css /head body header h1欢迎来到我的网站/h1 p这是我的第一个网页虽然简单但意义重大。/p /header nav a href#home首页/a a href#about关于我/a a href#contact联系方式/a /nav main section idabout h2关于我/h2 p我是一名正在学习网站开发的新手这篇文章记录了我创建网站的第一步。/p /section section idcontact h2联系方式/h2 p有任何问题欢迎给我留言a hrefmailto:exampleemail.comexampleemail.com/a/p /section /main footer p© 2024 我的个人小站 版权所有/p /footer /body /html逐段解释一下!DOCTYPE html这行是告诉浏览器这是HTML5文档必须放在第一行。head里面放的是元信息包括字符编码UTF-8能正常显示中文、视口配置适配移动端、标题栏文字title以及用link标签引入我们后面要写的CSS文件。body里面就是页面的可见内容了我用语义化标签header、nav、main、section、footer做了布局好处是代码结构清晰搜索引擎也更容易理解页面内容。3.2 CSS入门让朴素页面变成你心中的样子光有HTML页面就是白底黑字加超链接的原始状态。要让页面好看、有间隔、有层次感就得靠CSS上场。CSS的运作逻辑也简单选择器选中页面上的某个元素比如某个标签、某个类名然后在大括号里给这个元素设置样式属性。最常用的选择器有三种标签选择器选中所有该标签、类选择器以点开头选中所有class等于该名称的元素、ID选择器以#开头选中一个唯一id的元素。看看我们的style.css怎么写我加了一些最基础的样式让页面瞬间有了网站的感觉* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Microsoft YaHei, PingFang SC, Arial, sans-serif; line-height: 1.6; color: #333; background-color: #f8f9fa; max-width: 800px; margin: 0 auto; padding: 20px; } header { background-color: #0d6efd; color: white; padding: 40px 20px; text-align: center; border-radius: 8px; margin-bottom: 20px; } header h1 { font-size: 2.2em; margin-bottom: 10px; } nav { background-color: #fff; padding: 12px 20px; border-radius: 8px; border: 1px solid #dee2e6; margin-bottom: 20px; display: flex; gap: 20px; } nav a { text-decoration: none; color: #0d6efd; font-weight: bold; } main { background-color: #fff; padding: 24px; border-radius: 8px; border: 1px solid #dee2e6; margin-bottom: 20px; } section { margin-bottom: 24px; } section h2 { color: #0d6efd; border-bottom: 2px solid #e9ecef; padding-bottom: 8px; margin-bottom: 12px; } footer { text-align: center; font-size: 0.9em; color: #6c757d; padding: 16px; }第一行通配选择器*把所有元素默认的内外边距清空这是CSS重置的常见套路就是为了避免不同浏览器默认样式不一致的问题。给body设置max-width: 800px和margin: 0 auto是一个经典居中小技能让容器宽度固定并水平居中。整个页面的背景色、文字颜色、间距层次基本都在这个文件里控制。写完这两个文件用Live Server打开预览刷新一下你会看到一个干净、双色搭配、有导航有内容的网站页面。这时候你就是真的“创建了一个网站”了虽然还没上线但整个网站工作的核心原理你已经掌握了一大半。3.3 响应式设计和移动端适配这一行代码不能少我在3.1的HTML里埋了一行特别重要但容易被忽略的代码meta nameviewport contentwidthdevice-width, initial-scale1.0。如果你删掉这行用手机浏览器打开页面时你会发现整个页面被等比缩放成芝麻大小必须双指放大才能看这就是因为没有告诉手机浏览器“按照设备宽度来渲染页面”。这行代码是移动端适配的基石复制任何一个标准网页模板这行都是标配。响应式设计的核心思路不是把页面做成多个版本而是让同一个HTML在不同屏幕宽度下自动调整布局。最常用的武器就是CSS媒体查询。比如你希望PC端两列并排手机端单列堆叠可以这样写/* 默认样式桌面端两列布局 */ .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } /* 屏幕宽度小于600px时改为单列 */ media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }关于响应式设计我的建议是第一版先保证桌面端在常见的1366和1920宽度下效果正常同时能适配手机端375宽度即可中间宽度按比例自然压缩。等以后真需要精细处理平板等中间尺寸时再去专门做断点优化。写到这里网站的核心骨架已经完整了。但离真正上线还差最后两步买域名、租服务器、把代码放上去。这一步一旦完成别人就能在任何地方通过网址访问你的站点了。4. 部署上线让别人通过网址访问你的网站4.1 域名注册与服务器选择这些参数怎么看先聊域名。域名注册的渠道非常多国内有阿里云、腾讯云国外有GoDaddy、Namecheap。我建议新手优先选择国内大平台的域名服务管理和备案方便而且价格透明。选域名时注意三个原则短、好记、跟内容相关。比如你要做个人博客名字叫张三那zhangsan.com或zhangsan.me这种就是好选择。顶级域名方面.com最通用.cn价格低一些.top这种低价后缀便宜但看起来不够正规看你的使用场景选。然后是服务器。新手买服务器经常会看到一大堆参数CPU、内存、带宽、流量根本不知道怎么选。我直接说结论一个个人网站、企业展示站、小博客最入门配置完全够用参数推荐配置说明CPU1核静态网站基本不消耗CPU内存1GB或2GB纯Nginx服务1GB就够跑动态环境建议2GB硬盘40GB系统盘加网站文件绰绰有余带宽1Mbps~3Mbps带宽越大并发承载越高前期的瓶颈往往是带宽地域中国大陆需备案或中国香港是否怕备案麻烦就选香港区域这里有个需要留意的事项如果你选择的是中国大陆地域的服务器域名必须完成ICP备案之后才能正常访问网站否则会被拦截。备案流程其实不复杂就是提交申请、等待审核正常一到两周时间材料需要身份证、域名证书、服务器信息。如果不想等可以购买中国香港或海外的服务器省去备案环节代价是访问速度会稍慢一些部分海外IP在高延迟时段表现一般。4.2 把网站文件部署到服务器两种主流方法任选服务器买好之后你会拿到一个公网IP、root账号和密码或密钥。接下来的目标就是把你本地的HTML和CSS文件上传到服务器上并安装一个Web服务器软件来对外提供服务。这里我介绍两种方法一个偏可视化一个偏自动化。方法一宝塔面板可视化部署最适合新手宝塔面板是一个服务器管理工具把服务器上各种需要敲命令的操作全部图形化了。安装方法很简单登录服务器后打开终端去宝塔官网复制对应系统的安装命令粘贴回车执行等几分钟面板就装好了。装好后浏览器访问面板地址登录进去在软件商店里安装Nginx免费、高效、适合静态网站的专业Web服务器。装好Nginx后打开“网站”菜单添加站点填上你的域名网站的根目录默认是/www/wwwroot/你的域名。然后你只需进入对应的网站根目录把本地的index.html和style.css上传进去。最后一步是回到域名服务商后台添加解析记录记录类型选A主机记录填记录值填你服务器的公网IP等待解析生效通常几分钟到几小时。现在打开浏览器输入你的域名网站就上线了。方法二Git命令行自动化部署进阶推荐如果你觉得每次上传文件太麻烦或者以后网站文件会非常多我强烈建议你学会用Git来部署。思路是本地初始化Git仓库把代码推送到远程仓库比如Gitee码云服务器上安装Git克隆远程仓库到网站目录以后每次修改代码本地push服务器pull一步到位。命令流程大概是这样的在本地项目目录执行git init git add . git commit -m first commit git remote add origin 你的远程仓库地址 git push -u origin main然后在服务器网站目录里执行git init git remote add origin 你的远程仓库地址 git pull origin main以后每次更新代码本地推送完服务器上执行git pull origin main即可。如果你想更进一步还可以用Webhook实现“本地push后服务器自动更新”不过那个对现在的你来说属于锦上添花先把基础跑通再说。4.3 部署后的自查清单少一步都可能白忙活部署完成后我见过太多次“明明都弄好了怎么打不开”的情况了基本上逃不开下面几个原因。我把排错顺序写成一个自查清单按这个顺序过一遍90%的问题都能定位检查解析是否生效在自己电脑的终端里执行ping 你的域名看看返回的IP是不是你服务器的公网IP。如果不一样或者提示无法解析说明域名解析还没有生效或配置错了。检查服务器安全组端口是否放行国内云厂商一般都有“安全组”功能默认只放行22端口。你需要手动规则放行80端口HTTP和443端口HTTPS否则外部请求根本进不来。检查Nginx配置是否指向正确的目录打开宝塔面板里的站点配置看看网站目录是不是你上传文件的位置。检查文件权限Nginx运行用户www必须对网站目录有读取权限文件权限设置为755目录、644文件是通用做法。最后再确认浏览器输入URL时是不是加了http://前缀有些浏览器直接输入裸域名会默认走HTTPS而服务器没配置HTTPS就会报错。如果以上都没问题而网站还打不开那就是域名解析还没有完全生效国内DNS生效一般需要几分钟到24小时等等再刷新就好。5. 新手最常踩的坑与排错技巧提前帮你避雷5.1 10个常见问题与排查方法速查表我直接把自己做网站这几年踩过的坑加上帮别人排错时见过的典型问题整理成一个速查表你可以存下来遇到问题对号入座问题现象可能原因排查与解决方法访问域名显示无法访问域名解析未生效、服务器未放行端口ping域名确认解析检查安全组80/443端口访问IP显示Nginx欢迎页Nginx站点根目录指向默认页面修改站点根目录确认index.html存在页面能开但CSS完全没生效CSS文件路径错误或文件名不对检查HTML里的link标签路径区分相对路径/绝对路径中文显示乱码文件保存编码不是UTF-8用VS Code右下角确认编码为UTF-8并确保meta声明UTF-8图片裂开不显示img的src路径不对图片文件要与HTML相对路径一致注意大小写手机上打开排版混乱缺少viewport meta标签补上meta nameviewport contentwidthdevice-width, initial-scale1.0修改CSS后浏览器没变化浏览器缓存了旧文件强制刷新CtrlF5Windows/ CmdShiftRMac部署后页面和本地预览不一样文件传输不完整重新上传或用Git部署保证文件一致性Nginx报403 Forbidden网站目录没有权限把网站目录的所有者和执行权限改正确检查index文件存在上传文件后还是旧页面CDN缓存或者服务器缓存如果没开CDN多半是浏览器缓存开过CDN的去CDN控制台刷新缓存这张表你们现在用不到全部但往后做网站、改样式、部署各种项目时遇到问题直接回来看一眼能帮你省掉很多搜索时间。5.2 一个代码都不写也能建站用开源的模板二次开发如果你连HTML都不想学还有一个思路绝对适合你找一套现成的开源模板改改文字、换换图片这就成了你的网站。网上的免费模板资源非常多国内有站长之家、国外有HTML5 UP、Start Bootstrap这些专门提供免费HTML网站模板的站点。下载模板后用VS Code打开找到index.html把标题、文字、链接、图片全部替换成你自己的内容再按照第4章的步骤部署上线整个过程半小时就能搞定。这种做法的本质其实还是在“做网站”只是把从零写代码变成了在别人搭好的骨架上填充内容非常适合需要快速上线的场景比如你想做一个个人作品集、一个小店展示页、一个活动的落地页。等以后对这些代码熟悉了自然就会想去自己改布局、调颜色、加交互。结尾处我再分享一个实际经验你建好第一版网站之后会突然冒出很多想改的东西这很正常。但千万不要一上来就想着“我要做个大平台”从一个小而美的个人站点开始每一次迭代都是真正学到东西的时刻。我自己做了这么多年网站项目最怀念的反而是第一次把index.html上传然后看到自己的网站在公网上被打开的那一刻。那种成就感会推动你持续往前走很久。