1. 从零建站这件事到底难在哪很多人一听到“自己建站”脑子里立刻蹦出三个字太麻烦。要买服务器、要配环境、要写代码、要备案、要维护……光是想想就劝退了。但实际情况是如果你只是想做一个个人博客、作品集展示页、小型工具站或者文档站从零到上线一个周末的下午完全够用。我自己第一次完整走通建站流程前后花了不到四个小时其中还包括了中途泡面、刷手机的时间。这篇文章要聊的就是完全从零开始、不花一分钱、把站点跑起来并让别人能访问的完整路径。我会把每一步为什么这么做、有哪些坑、怎么验证是否成功全部拆开讲清楚。适合的人群很明确完全没碰过服务器的新手、想给自己做个主页但不知道从哪下手的设计师、想放几个静态页面上去的学生党以及所有对“建站”这件事有好奇心但一直被各种术语吓退的人。先给一个最核心的认知建站不等于写代码。建站本质上是三件事的串联——内容放在哪、怎么让别人找到、用什么展示。传统方式里这三件事分别对应服务器、域名和程序。但现在有大量免费方案可以把这三件事全部包圆你只需要专注于内容本身。我下面要讲的就是这条最省事的路径同时也会解释每一步背后的原理让你知其然也知其所以然。在正式开始之前先明确一个概念静态站点和动态站点的区别。静态站点就是一堆提前写好的HTML、CSS、JS文件访问时直接返回给浏览器不需要数据库、不需要后端程序。动态站点则需要服务器端运行程序比如PHP、Python、Node.js每次访问都要查数据库、渲染页面。对于个人博客、作品集、文档站这类内容更新频率不高的场景静态站点是绝对的首选——速度快、安全性高、维护成本几乎为零。我后面讲的所有方案都围绕静态站点展开。2. 免费建站的三条主流路径与选型逻辑2.1 路径一代码托管平台的静态页面服务这是目前最主流、最省心的免费方案。核心逻辑是你把HTML/CSS/JS文件推送到代码仓库平台自动帮你部署到全球CDN上并分配一个免费域名。整个过程不需要你碰任何服务器配置。这类平台的代表有GitHub Pages、GitLab Pages、Cloudflare Pages、Netlify、Vercel等。它们的共同特点是免费额度对个人站点完全够用、支持自定义域名、自带HTTPS、部署流程自动化。以GitHub Pages为例每个账号可以无限量创建静态站点每个仓库1GB容量每月100GB流量。对于日访问量几百到几千的个人站点来说这个额度绰绰有余。选型时我建议优先考虑两个因素部署流程的顺手程度和国内访问速度。GitHub Pages在国内部分网络环境下访问不太稳定Cloudflare Pages和Vercel的国内访问体验相对好一些但也不是绝对稳定。如果你主要面向国内读者后面我会讲一个更稳妥的方案。2.2 路径二云服务商的免费额度主流云服务商通常会给新用户提供一定期限的免费试用额度比如12个月的轻量应用服务器。这种方案的好处是你拿到一台完整的虚拟机想装什么装什么不受静态站点的限制。坏处是到期后需要付费而且需要自己配置环境、处理安全更新。如果你只是想放静态页面我不太推荐走这条路——杀鸡用牛刀而且维护成本高。但如果你后续想跑动态程序、想学Linux运维那用免费额度练手是很好的选择。注意选择这类方案时一定要看清楚免费额度的具体限制比如流量上限、CPU积分规则等避免意外扣费。2.3 路径三一体化建站平台这类平台把域名、托管、模板全部打包好你只需要在网页上拖拽、填内容就能生成站点。代表有Carrd、Strikingly、Google Sites等。优点是上手极快半小时就能出一个像样的页面。缺点是自定义程度低、迁移困难、免费版通常带平台水印或广告。我的建议是如果你只是想快速做一个单页简历或活动页用一体化平台没问题但如果你想长期维护一个个人站点、想完全掌控内容和样式走路径一。下面我重点展开路径一的完整实操。3. 用代码托管平台部署静态站点的完整流程3.1 准备工作本地环境与账号你需要准备的东西很少一台能上网的电脑、一个代码托管平台账号、一个文本编辑器。文本编辑器推荐VS Code免费且功能强大。如果你连VS Code都不想装用系统自带的记事本也能写HTML只是体验差一些。账号注册没什么好说的去对应平台官网注册即可。注册完成后创建一个新的代码仓库仓库名建议用英文小写加连字符比如my-site或blog-demo。仓库类型选择公开因为免费账户的私有仓库通常不支持Pages服务。这里有一个容易忽略的细节仓库的默认分支名。老平台默认是master新平台默认是main。后面配置部署时分支名必须和实际一致否则会部署失败。我建议统一用main这是目前的行业惯例。3.2 写第一个页面从最小可用HTML开始不要一上来就搞复杂的框架。先用最朴素的HTML写一个页面确保整条链路跑通。下面是一个最小可用的示例!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的第一个站点/title style body { font-family: system-ui, -apple-system, sans-serif; max-width: 720px; margin: 0 auto; padding: 2rem 1rem; line-height: 1.7; color: #333; } h1 { color: #1a1a1a; } /style /head body h1站点跑起来了/h1 p如果你能看到这个页面说明部署链路已经通了。/p /body /html把这段代码保存为index.html放在仓库根目录。注意文件名必须是index.html这是服务器的默认首页文件访问域名时会自动加载这个文件。为什么先用内联样式而不是外部CSS文件因为链路验证阶段要尽量减少变量。外部文件涉及路径问题、缓存问题容易让新手困惑。等页面能正常访问了再逐步拆分样式和脚本。3.3 推送代码与开启Pages服务把index.html推送到仓库后进入仓库的设置页面找到Pages相关的选项。不同平台的入口位置略有差异但逻辑一致选择部署分支比如main、选择部署目录通常选根目录/或/docs保存后等待一两分钟。平台会自动给你分配一个域名格式通常是用户名.github.io/仓库名或类似的变体。在浏览器里打开这个地址如果能看到你写的页面恭喜最核心的一步已经完成了。这里有几个高频踩坑点部署后访问404九成是因为文件名不是index.html或者文件不在配置的部署目录里。页面样式丢失检查CSS文件路径是否正确静态站点里路径区分大小写。更新后页面没变化浏览器缓存导致强制刷新CtrlShiftR或等几分钟CDN刷新。3.4 绑定自定义域名与开启HTTPS平台分配的免费域名能用但不好看也不利于长期品牌积累。绑定自定义域名的流程是在域名注册商处添加一条CNAME记录指向平台提供的域名然后在平台设置里填入你的域名等待DNS生效。DNS生效时间通常是几分钟到几小时取决于TTL设置。我一般把TTL设成600秒10分钟方便调试。生效后平台会自动签发HTTPS证书这个过程也是自动的不需要你手动操作。注意绑定自定义域名后记得在平台设置里开启“强制HTTPS”否则用户通过HTTP访问时不会自动跳转存在安全隐患。4. 不花一分钱拿到域名的几种思路4.1 免费二级域名的获取与局限很多平台提供免费二级域名比如yourname.eu.org、yourname.js.org等。这类域名的优点是零成本、即开即用缺点是所有权不在你手里平台政策变化时可能被回收而且部分免费域名后缀在搜索引擎里的权重较低。如果你只是做测试站或临时项目免费二级域名完全够用。但如果是长期维护的个人站点我建议还是花点小钱注册一个自己的域名。一个普通的.com域名年费通常在几十元人民币.xyz、.top等后缀首年甚至只要几块钱。这笔投入相对于建站带来的价值来说几乎可以忽略不计。4.2 域名注册的实操要点注册域名时有几个细节值得注意注册商选择优先选支持免费隐私保护、DNS管理界面友好的注册商。隐私保护很重要否则你的姓名、邮箱、电话会暴露在公开的WHOIS查询里。域名长度与记忆度越短越好记避免数字和连字符混用。如果.com被占了可以考虑.dev、.me、.io等后缀。自动续费设置建议开启自动续费避免忘记续费导致域名被释放。域名一旦被释放可能被抢注赎回成本很高。4.3 DNS解析的常见配置域名注册后需要配置DNS解析才能指向你的站点。常见的记录类型有记录类型用途示例A记录将域名指向IPv4地址→192.0.2.1AAAA记录将域名指向IPv6地址→2001:db8::1CNAME记录将域名指向另一个域名www→example.comTXT记录用于验证域名所有权→verifyabc123对于静态站点托管平台通常只需要添加一条CNAME记录把www子域名指向平台提供的地址再把根域名通过A记录或ALIAS记录指向平台IP。具体配置方式以平台文档为准。5. 让站点看起来不像“新手作品”的几个关键调整5.1 移动端适配从viewport开始很多新手做的页面在电脑上看着还行一到手机上就惨不忍睹——字小得看不清、内容溢出屏幕、按钮点不到。根本原因通常是缺少viewport配置。在HTML的head里加上这一行meta nameviewport contentwidthdevice-width, initial-scale1.0这行代码告诉浏览器页面宽度等于设备宽度初始缩放比例为1。加上之后移动端浏览体验会有质的提升。但这只是第一步后续还需要用响应式布局比如媒体查询、弹性盒子来适配不同屏幕尺寸。5.2 性能优化图片压缩与懒加载静态站点最大的性能瓶颈通常是图片。一张未经压缩的手机照片可能有5MB直接放上去会让页面加载慢得让人想关掉。我通常的做法是用图片压缩工具把图片压到200KB以内格式优先选WebP。给图片加上loadinglazy属性实现懒加载。设置合理的width和height属性避免布局抖动。img srcphoto.webp alt示例图片 loadinglazy width800 height6005.3 基础SEO让搜索引擎能找到你静态站点天然对SEO友好但前提是你做对了基础配置。几个关键点每个页面有独立的title和meta namedescription不要所有页面都一样。使用语义化标签比如header、nav、main、article、footer帮助搜索引擎理解页面结构。生成sitemap.xml提交给搜索引擎。很多静态站点生成工具可以自动生成。配置robots.txt告诉爬虫哪些页面可以抓取。这些配置看起来琐碎但做完之后你的站点在搜索结果里的表现会明显好于什么都不做的页面。6. 从纯手写HTML到使用静态站点生成器6.1 什么时候该引入生成器如果你只有一两个页面手写HTML完全没问题。但当页面数量超过五个或者你开始写博客、需要频繁更新内容时手写HTML的维护成本会急剧上升——改一个导航栏要改所有页面加一篇文章要复制粘贴整个模板。这时候就该引入静态站点生成器了。它的核心逻辑是你用Markdown写内容用模板定义布局生成器帮你把两者合成为完整的HTML文件。你只需要维护内容和模板不用关心重复的HTML结构。6.2 主流生成器的选型对比生成器语言学习曲线适合场景HugoGo低博客、文档站构建速度极快JekyllRuby中GitHub Pages原生支持HexoNode.js低中文社区活跃主题丰富AstroJavaScript中内容站支持多框架混用EleventyJavaScript低灵活不强制任何框架我的建议是如果你完全不想碰命令行选Hexo中文文档多、主题多如果你追求构建速度和长期维护性选Hugo如果你想用现代前端技术栈选Astro。这三个我都实际用过各有优劣但都能满足个人站点的需求。6.3 从生成器到部署的自动化链路使用生成器后部署流程会变成本地写Markdown → 运行构建命令生成静态文件 → 推送到仓库 → 平台自动部署。这个过程可以进一步自动化配置持续集成CI每次推送代码后自动构建并部署你只需要专注于写内容。以GitHub Actions为例一个典型的部署配置大概长这样name: Deploy on: push: branches: [main] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkoutv4 - name: Setup Node uses: actions/setup-nodev4 with: node-version: 20 - run: npm install - run: npm run build - name: Deploy uses: peaceiris/actions-gh-pagesv3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./dist这段配置的意思是每次推送到main分支自动安装依赖、构建、把产物部署到Pages分支。配置一次后续永久生效。7. 上线之后维护、监控与持续迭代7.1 站点上线后的基础检查清单站点能访问只是开始上线后我通常会做一轮基础检查所有链接是否可点用工具扫描死链或者手动点一遍。移动端显示是否正常在手机、平板上实际打开看看。HTTPS是否生效浏览器地址栏有没有锁标志。加载速度是否可接受用在线测速工具跑一下首屏加载超过3秒就要优化。搜索引擎是否收录在搜索引擎里搜site:你的域名看有没有结果。7.2 免费监控方案站点上线后你肯定想知道有没有人访问、访问了什么页面。免费的网站统计方案有Google Analytics、Umami、Plausible等。如果不想用第三方服务也可以在静态站点里嵌入轻量级的自托管统计工具。我个人的做法是初期用平台自带的访问统计够用且零配置等流量上来了再考虑更专业的方案。不要一上来就折腾复杂的监控体系那是本末倒置。7.3 内容更新的节奏建议建站最怕的是“建完就荒”。我的经验是上线第一周至少更新三次第一个月保持每周一次之后根据实际情况调整。内容不一定要长篇大论哪怕是一段笔记、一张图片、一个链接收藏都比空着强。搜索引擎喜欢持续更新的站点读者也是。另外建议在本地保留一份内容的源文件比如Markdown文件不要只依赖平台。万一平台出问题你还能快速迁移到其他地方。我见过太多人把内容只放在一个平台上平台一关就全没了。8. 我踩过的几个典型坑与应对方式第一个坑是路径大小写问题。我在本地Windows系统上写Images/photo.jpg部署到Linux服务器后死活加载不出来因为Linux区分大小写实际文件名是images/photo.jpg。这个坑排查了半小时才反应过来。从那以后我所有文件名和路径统一用小写加连字符。第二个坑是缓存导致的“假故障”。有次改完样式推上去刷新页面发现没变化以为部署失败了折腾半天重新推送。后来才知道是浏览器缓存。现在我的习惯是改完样式后强制刷新或者开无痕窗口验证。第三个坑是免费额度的隐性限制。某平台号称免费但每月构建次数有限制我频繁推送导致额度用完站点停更了好几天。选平台时一定要看清楚免费额度的具体条款尤其是构建次数、流量、存储空间这几个维度。第四个坑是域名解析的TTL设置。有次换服务器改了DNS记录后等了整整一天才生效因为TTL设的是86400秒24小时。后来我把TTL改成300秒调试效率大幅提升。TTL改小有个副作用DNS查询频率增加但对个人站点来说完全可以忽略。9. 后续可以怎么扩展站点跑起来之后能玩的东西其实很多。比如加上评论系统用Giscus、 utterances这类基于代码托管平台讨论区的方案免费且无需后端、加上搜索功能用Pagefind、Lunr.js这类纯前端方案、加上RSS订阅、加上暗色模式切换。这些都是静态站点生态里非常成熟的方案每一个都可以单独写一篇实操。如果哪天你觉得静态站点不够用了想加后端功能——比如用户登录、数据存储、表单提交——也可以逐步迁移到Serverless架构用云函数处理动态请求静态部分继续托管在CDN上。这条路我走过过渡很平滑不会推翻之前的所有工作。最后分享一个我自己的习惯每次折腾完一个新功能我都会在本地写一篇简短的笔记记录做了什么、遇到什么问题、怎么解决的。这些笔记后来成了我最有价值的参考资料比任何教程都管用。建站这件事动手做一遍比看十篇教程都强。