不少刚接触网站开发的朋友最先遇到的问题往往不是代码本身而是“我做的网站怎么让别人访问”。买一台云服务器要花钱域名要花钱备案流程也让人头疼。于是“免费服务器”“免费部署”就成了搜索量很高的关键词。其实除了直接购买云服务器现在已经有非常成熟的免费部署方案。个人博客、作品集、企业官网、文档站点、前端 Demo都能在零服务器成本的情况下跑起来而且访问速度、HTTPS 证书、CDN 加速这些事平台都已经帮忙处理好了。这篇文章会先讲清楚免费服务器和免费部署的核心概念再对比当前主流方案然后手把手带你用 GitHub Pages、Cloudflare Pages、Vercel 完成网站免费部署最后补充免费云服务器的使用注意事项和常见问题排查思路。整个流程适合没有任何部署经验的新手也适合想把手头项目快速上线的开发者。1. 免费服务器与免费部署先搞清楚概念1.1 免费服务器是什么“免费服务器”在多数情况下并不是指一台真正属于你的云主机而是指“不需要付费的网站托管服务”。按照运行方式可以分成下面几类类型说明典型代表静态托管平台托管 HTML、CSS、JS 等静态文件自带 CDN 与 HTTPSGitHub Pages、Cloudflare Pages、Netlify、Vercel平台型 Serverless托管前端项目同时支持云函数、API 路由按调用量计费但免费额度充足Vercel、Cloudflare Workers、Netlify Functions免费云服务器云厂商提供的免费层资源是一台真正可以 SSH 登录的虚拟服务器部分云厂商免费试用活动、部分海外云厂商永久免费层容器/Docker 免费平台提供容器运行环境适合部署 Docker 镜像部分容器托管平台的免费额度从概念上理解前三者对普通个人网站效果最好成本低、维护少、上线快。免费云服务器虽然自由度最高但需要自己处理系统安全、环境配置、证书申请等一系列运维问题对新手并不算友好。1.2 “免费部署”到底能省掉哪些事自己购买服务器部署一个网站通常要经历这些步骤购买云服务器。安装 Web 服务器软件Nginx、Apache。配置 DNS 解析指向服务器 IP。申请 HTTPS 证书并配置自动续期。处理服务器安全、防火墙、端口开放。持续监控服务器资源与运行状态。如果使用免费静态托管平台以上 1-6 步基本都由平台替你完成了。你只需要把网站代码推到 Git 仓库平台检测到代码变更后会自动构建、发布到 CDN并自动生成 HTTPS 访问地址。这种“推代码即部署”的体验是现代前端工程化中非常推荐的发布方式。1.3 适用场景与边界免费方案并不是万能的适合与不适合的边界需要提前了解。适合的场景个人博客、简历、作品集。企业官网、活动页、营销落地页。前端项目 Demo、开源项目文档。前后端分离项目的前端部分。学习阶段的练手项目。不容易驾驭的场景需要长期稳定运行的高并发业务系统。涉及大量动态计算、数据库持久化且需要固定地域低延迟的系统。需要安装任意软件、操作内核参数、挂载存储盘的场景。对数据主权、合规要求极高的生产业务。明确这些边界之后再选方案才不会出现“部署完了发现完全用不了”的尴尬情况。2. 主流免费部署方案横向对比不同免费方案的使用门槛、免费额度和适用项目都不一样。下面用一张表把最常用的几个方案放在一起比较。平台支持类型免费额度特点自定义域名HTTPS适合人群GitHub Pages静态网站不限流量但有仓库大小与使用限制支持支持GitHub 用户、个人博客Cloudflare Pages静态网站、前端构建、Cloudflare Functions免费版足够个人项目使用支持自动需要全球 CDN 加速的项目Vercel前端项目、Serverless 函数个人版免费额度充足支持自动前端开发者、Next.js 项目Netlify静态网站、表单、Serverless 函数免费版有带宽与构建时长限制支持自动快速部署带表单的营销页云厂商免费层云服务器、小型数据库部分方案永久免费或试用期免费支持需自行配置需要真正服务器环境的开发者从部署体验来看Vercel 和 Cloudflare Pages 的体验最顺滑GitHub Pages 最适合和 GitHub 协作流结合。如果你完全不想接触命令行几个平台都支持网页端一键导入仓库。下面开始实操。为了让教程连贯我以“一个简单个人网站”作为示例项目依次演示在 GitHub Pages、Cloudflare Pages、Vercel 上的部署流程。3. 部署前准备网站代码与本地环境3.1 准备一个最简单的网站先用一个静态 HTML 页面作为示例。在你本机创建一个项目目录例如my-site目录结构如下my-site/ ├── index.html ├── .gitignore └── README.mdindex.html的内容写好一个基本的个人主页。页面不需要复杂重点是能通过部署平台正常访问。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta namedescription content我的个人网站分享技术笔记与项目作品 title我的个人网站/title style * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; color: #fff; } .card { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); padding: 48px 40px; border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); text-align: center; max-width: 480px; width: 90%; } .avatar { width: 96px; height: 96px; border-radius: 50%; background: #fff; color: #667eea; font-size: 40px; line-height: 96px; margin: 0 auto 24px; font-weight: 700; } h1 { font-size: 28px; margin-bottom: 8px; } p { font-size: 15px; line-height: 1.8; opacity: 0.9; } .links { margin-top: 24px; } .links a { display: inline-block; margin: 0 8px; padding: 8px 20px; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 30px; color: #fff; text-decoration: none; font-size: 14px; transition: background 0.3s; } .links a:hover { background: #fff; color: #667eea; } /style /head body div classcard div classavatarA/div h1你好我是阿伦/h1 p一名热爱前端与部署技术的开发者。br这个页面通过免费方案部署上线。/p div classlinks a hrefhttps://github.com/ target_blank relnoopener noreferrerGitHub/a a hrefhttps://developer.mozilla.org/zh-CN/ target_blank relnoopener noreferrer学习资源/a /div /div /body /html.gitignore中写如下内容node_modules/ dist/ .DS_Store *.logREADME.md中写项目说明即可# my-site 一个通过免费方案部署的静态个人网站示例。3.2 初始化本地 Git 仓库打开命令行进入my-site目录执行git init git add . git commit -m 初始化个人网站项目到这里一个最小可部署项目就准备好了。3.3 了解 Git 远程仓库操作后面的部署流程会反复用到 Git 推送。你需要知道自己电脑上是否安装了 Git。git --version如果没有安装可以去 Git 官网下载对应系统版本安装完成后重新打开命令行再验证。接下来推送代码到远程仓库时需要先配置用户名和邮箱git config --global user.name 你的名字 git config --global user.email 你的邮箱4. 实战一使用 GitHub Pages 免费部署静态网站GitHub Pages 是老牌免费静态托管方案适合个人博客、项目文档和静态官网。下面从创建仓库开始演示。4.1 创建 GitHub 仓库登录 GitHub 后点击右上角“”号选择“New repository”。配置项推荐值说明Repository namemy-site如果做个人主页可以命名为你的用户名.github.ioDescription个人网站示例项目可选Public/PrivatePublicGitHub Pages 免费版要求公开仓库Add a README不勾选本地已有 README避免冲突创建完成之后把本地仓库与远程仓库关联git remote add origin gitgithub.com:你的用户名/my-site.git git branch -M main git push -u origin main4.2 开启 GitHub Pages进入仓库页面点击顶部菜单的“Settings”左侧找到“Pages”。在“Branch”区域选择要发布的目录Source 选择Deploy from a branchBranch 选择main目录选择/ (root)点击“Save”保存。等待一两分钟刷新页面后会出现一个访问地址https://你的用户名.github.io/my-site/GitHub 会自动为 Pages 站点配置 HTTPS。此时打开浏览器访问该地址就能看到你之前编写的个人网站页面。4.3 如果你的项目是 Vue / React 构建产物很多情况下你的项目不是纯静态 HTML而是打包后的dist目录。这时有两种处理思路。思路一把dist目录发布到分支。你可以在仓库中创建一个gh-pages分支把构建产物放进去然后在上面的 Pages 配置中选择gh-pages分支。思路二使用 GitHub Actions 自动化构建。在仓库中创建.github/workflows/deploy.yml下面是一个常见的前端静态项目构建部署配置。name: Deploy to GitHub Pages on: push: branches: [ main ] permissions: contents: read pages: write id-token: write jobs: build-and-deploy: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkoutv4 - name: Setup Node uses: actions/setup-nodev4 with: node-version: 20 - name: Install Dependencies run: npm ci - name: Build run: npm run build - name: Upload Artifact uses: actions/upload-pages-artifactv3 with: path: dist - name: Deploy uses: actions/deploy-pagesv4把配置文件提交并推送后在 Actions 标签页可以看到构建流程。只要构建通过Pages 站点就会自动更新。这个方案的好处是以后每次往main分支推送代码网站都会自动重新构建部署。4.4 绑定自定义域名如果你有自己的域名可以在仓库 Settings 的 Pages 页面中找到“Custom domain”输入框填写你的域名点击保存。然后在域名服务商后台添加解析记录GitHub 官方推荐使用 A 记录或 CNAME 记录具体以 GitHub 当前文档为准。解析生效后同样在 Pages 设置里勾选“Enforce HTTPS”免费获得 HTTPS 访问能力。5. 实战二使用 Cloudflare Pages 免费部署并配置 CDNCloudflare Pages 是另一套非常优秀的免费部署方案。它对国内访问相对友好并且自带全球 CDN 加速。如果你希望部署后访问速度快一点推荐优先考虑 Cloudflare Pages。5.1 注册并登录 Cloudflare打开 Cloudflare 官网注册账号后进入控制台。Cloudflare 免费套餐包含 Pages 功能个人使用足够。5.2 连接 Git 仓库创建项目在控制台左侧菜单选择“Workers 和 Pages”点击“创建”选择“Pages”选项卡然后点击“连接到 Git”。授权 GitHub 并选择刚才的my-site仓库后进入构建设置页面配置项推荐值说明项目名称my-site会出现在默认域名中生产分支main推送该分支时触发部署框架预设无纯静态项目选择无构建命令留空静态 HTML 不需要构建构建输出目录/仓库根目录直接作为发布目录点击“保存并部署”Cloudflare Pages 会自动拉取代码并发布。等待几十秒后你会得到类似下面的访问地址https://my-site.pages.dev打开这个地址就能看到你的个人网站。5.3 配置自定义域名与 HTTPS在 Pages 项目页面选择“自定义域”菜单点击“设置自定义域”输入你的域名。Cloudflare 会引导你添加一条 CNAME 解析记录。比如域名是www.lun.com需要添加类型CNAME 名称www 目标my-site.pages.dev保存并等待解析生效后Cloudflare 会自动为你的域名申请 HTTPS 证书。在“SSL/TLS”菜单中将加密模式选择为“完全严格”可以让证书信任链更完整。5.4 给静态站点添加安全响应头Cloudflare Pages 支持通过_headers文件给响应添加自定义响应头。在项目根目录创建_headers文件/* X-Frame-Options: DENY X-Content-Type-Options: nosniff Referrer-Policy: strict-origin-when-cross-origin Permissions-Policy: geolocation()这个文件会随项目一起部署再次发布后访问响应中就会带上这些安全头。对于普通个人网站这是性价比很高的安全加固手段。5.5 清理缓存与强制刷新如果你更新了代码但访问时看到的还是旧页面可以先在 Cloudflare 控制台找到“缓存”菜单点击“清除所有内容”。同时可以在浏览器使用CtrlF5强制刷新。实际项目中更推荐避免手动清缓存的做法给静态资源文件名加入哈希值这样发布新版本后浏览器自然加载新文件。6. 实战三使用 Vercel 免费部署动态前端项目Vercel 是前端领域很流行的免费部署平台对 Vue、React、Next.js 等现代前端框架支持非常到位。这里演示通过命令行工具完成部署。6.1 全局安装 Vercel CLINode.js 环境下在命令行执行npm install -g vercel安装完成后验证版本vercel --version6.2 登录并部署进入你的项目目录执行vercel login浏览器会自动打开登录页面可以选择 GitHub、GitLab 或邮箱登录。登录成功后在项目目录执行vercelCLI 会询问你几个问题目录位置直接回车使用当前目录。是否创建新项目输入项目名称。是否调整设置保持默认即可。命令执行完成后终端会输出两个地址一个用于预览环境一个用于生产环境Preview: https://my-site-abc123.vercel.app Production: https://my-site.vercel.app之后每次修改代码执行下面命令即可直接发布到生产环境vercel --prod6.3 配置环境变量动态项目通常需要环境变量。Vercel CLI 提供了简单的方式vercel env add DATABASE_URL production执行后会提示你输入值输入完成后就保存到生产环境。也可以在 Vercel 控制台的 Project → Settings → Environment Variables 中配置。注意区分开发、预览、生产三个环境不要把密钥直接写在代码里。6.4 使用 vercel.json 配置路由如果项目是单页应用需要把未匹配到的路由重写到index.html可以在项目根目录创建vercel.json{ rewrites: [ { source: /(.*), destination: /index.html } ] }对于纯静态项目这个配置不是必须的。如果你的项目使用了客户端路由比如 Vue Router 的 history 模式就需要加上这段配置否则刷新子页面时会 404。6.5 连接 GitHub 自动部署Vercel 也支持从 GitHub 导入仓库。控制台点击“Add New”→“Project”选择你的 GitHub 仓库框架预设可以交给 Vercel 自动识别。之后每次向main分支推送代码Vercel 都会自动构建并发布。7. 免费云服务器的选择与安全注意事项静态托管平台虽然方便但有些场景你还是需要一台真正可以 SSH 登录的服务器。这里重点讨论免费云服务器怎么选、怎么用、怎么避免踩坑。7.1 免费云服务器有哪些来源当前市场上能看到几类免费云服务器资源来源类型特点注意事项云厂商新用户试用活动免费使用一个月到几个月配置通常较高注意试用到期时间防止自动扣费海外云厂商免费层部分厂商提供永久免费的小规格实例申请资格、实例区域、网络条件都需要自行确认高校/教育计划面向学生免费提供云资源通常需要学生身份认证这里需要强调一点云产品价格和免费政策变化很快本文不会对某个具体厂家的永久免费承诺做背书。你需要以云厂商官方页面公示信息为准下单前仔细阅读计费说明。7.2 免费云服务器部署网站的基本步骤如果你拿到了一台 Linux 免费实例部署网站的通用思路如下使用 SSH 密钥登录服务器。更新系统软件包。安装 Nginx、Git 等基础软件。把网站代码克隆到服务器。配置 Nginx 站点。申请 HTTPS 证书。配置防火墙只开放必要端口。这里给出一组基础命令示例以 Ubuntu 系统为例ssh -i ~/.ssh/id_ed25519 root服务器IP # 更新软件包 apt update apt upgrade -y # 安装 Nginx apt install -y nginx # 查看 Nginx 服务状态 systemctl status nginx安装完成后把网站文件放到/var/www/html或你自定义的目录再修改 Nginx 配置即可。这里不展开所有细节但要提醒拿到任何云服务器后的第一件事是关闭密码登录改用 SSH 密钥登录并修改默认 SSH 端口避免服务器被扫描爆破。7.3 免费云服务器的三大安全底线第一不要用密码直接登录服务器。创建 SSH 密钥对后在服务器配置文件中关闭密码认证# 编辑 /etc/ssh/sshd_config PasswordAuthentication no修改后重启 SSH 服务systemctl restart sshd第二防火墙默认拒绝所有入站请求只开放必要端口。例如网站需要开放 80 和 443SSH 管理端口建议改到高位端口。第三数据库不要暴露到公网。即使部署了 MySQL、PostgreSQL也要把监听地址保持为127.0.0.1应用通过内网访问数据库。如果必须远程运维数据库优先使用 SSH 隧道。8. 常见问题与排查思路以下是免费部署过程中最常遇到的一批问题。问题现象常见原因解决思路访问页面 404发布目录配置错误检查构建输出目录是否设置正确比如dist或public推送代码后网站没更新平台没有检测到推送或构建失败查看平台构建日志确认分支名是否匹配HTTPS 证书不生效域名解析尚未生效或证书签发中等待 5-30 分钟在 SSL/TLS 菜单查看证书状态自定义域名访问 404域名解析类型错误核对解析记录是否指向平台提供的目标地址刷新子路由 404单页应用路由未重写在平台配置 rewrite 规则到index.html构建时安装依赖失败npm 版本或网络问题检查构建日志锁定 package-lock.json确认版本图片加载很慢图片体积过大压缩图片使用 WebP 格式启用平台 CDN 缓存网站被异常攻击或盗刷流量暴露了管理端点或接口关闭管理页面公网访问使用平台 WAF 规则设置访问限制遇到问题先看两类日志一类是平台提供的部署构建日志一类是线上访问后的浏览器控制台 Network 面板。绝大多数问题都能从这两处找到线索。8.1 排查构建失败在 GitHub Pages、Cloudflare Pages 或 Vercel 控制台中找到“Deployments”或“构建日志”重点看报错位置。常见是依赖版本冲突、构建命令不对、输出目录不存在三类。8.2 排查域名解析不生效在命令行执行nslookup 你的域名或者在本地执行dig 你的域名查看解析结果是否指向平台提供的目标地址。也可以在平台控制台中查看域名状态是否提示“Active”。8.3 排查 HTTPS 证书问题大多数平台在解析生效后会自动签发证书。如果长时间没有签发先确认 Cloudflare 的代理状态是否为“已代理”再确认加密模式不是“灵活”模式。选择“完全严格”模式更适合 Pages 产品。9. 最佳实践与工程建议9.1 用 Git 驱动一切部署无论是静态站点还是动态前端项目都要让 Git 成为发布流程的起点。推送代码到主分支后由平台自动完成构建、部署、证书续期而不是手动拖拽文件到服务器。这样做的好处有三个历史版本可回滚。多人在线协作有明确记录。构建过程可复现不会出现“在我电脑上能跑上传后就不行”的问题。9.2 重视环境变量管理数据库连接串、API 密钥、第三方服务 Token 都放进环境变量不能提交到 Git 仓库。平台侧区分 production、preview、development 三套环境变量。9.3 给静态资源做长期缓存对文件名带哈希的资源可以设置长时间缓存减少重复请求。对 HTML 文件设置较短的缓存时间保证发布后用户能及时看到更新。在 Cloudflare Pages 中可以用_headers文件实现/assets/* Cache-Control: public, max-age31536000, immutable /index.html Cache-Control: public, max-age0, must-revalidate9.4 监控免费额度的使用量免费方案并不等于无限使用。Vercel 有带宽和函数执行时长限制Cloudflare Pages 有每月请求数量限制GitHub Pages 有站点大小和更新频率限制。建议定期查看用量避免项目流量上来后资源被限制。9.5 数据备份不能省很多人误以为免费平台会自动备份网站内容。实际上平台保证的是“服务可用性”并没有替你承担“内容备份”的责任。网站代码要定期推送到 Git 远程仓库数据库内容如果能导出也要定期执行备份。一个最简单的备份策略是每周把数据库导出结果生成一份文件上传到对象存储或另一个私有仓库。9.6 域名与备案的判断如果你使用国内服务器部署网站并且绑定国内备案要求的域名需要特别注意备案要求。但如果你使用海外云厂商的服务器或者使用 GitHub Pages、Cloudflare Pages 这类海外托管平台通常不涉及国内备案但实际部署时仍要遵守对应平台的服务条款和目标地区法律法规。不要为了备案问题去伪造信息或绕过平台限制。10. 总结与下一步本文从“免费服务器”这个概念出发介绍了免费部署的几种主要形态并通过三个实战案例带你完成了网站在 GitHub Pages、Cloudflare Pages、Vercel 上的免费部署。同时我们讨论了免费云服务器选型和安全加固的底线以及一系列部署后的常见问题排查方法。你现在应该已经掌握了这些关键能力区分静态托管、Serverless 部署、免费云服务器的适用场景。创建本地项目并通过 Git 推送到远程仓库。在 GitHub Pages 上发布个人网站。在 Cloudflare Pages 上配置 CDN、自定义域名和 HTTPS。使用 Vercel CLI 部署前端项目并配置环境变量。对免费云服务器做基础安全加固。遇到 404、证书、解析、构建失败等问题时知道从哪里入手排查。下一步建议你继续练习的方向把自己手上的一个小项目用 Vercel 或 Cloudflare Pages 部署上线。尝试给网站绑定一个自己的域名体验完整上线流程。学习 Nginx 基础配置为将来使用云服务器部署做准备。了解 Docker 基础原理因为后面部署更复杂的项目时会用到容器化。免费部署是进入 Web 运维世界的低成本入口。通过自己的域名访问到自己搭建的网站这个正反馈能帮助你更有动力地深入下去。如果在部署过程中遇到其他问题建议养成先查看平台官方文档、再搜索社区方案的习惯大多数常见问题都已经有非常成熟的解法。