免费部署网站指南

我们每个人都喜欢搞一个属于自己的网站,可以让任何人在任何设备上都能打开.所以这篇文章就整合一下我了解的建站方式

如果你只是想把自己的博客、作品集、文档站或者前端项目免费放到公网，这四个平台基本已经够用了：GitHub Pages、Vercel、Cloudflare Pages、Netlify。

平台 适合什么项目 上手难度 自动部署 自定义域名 动态能力 免费版需要注意
GitHub Pages 纯静态博客、文档站、个人主页 最低,但做大网站有点困难 支持，推送到仓库即可 支持 基本不适合后端动态逻辑 更偏静态站；不适合商业 SaaS 和敏感交易
Vercel 前端项目、Next.js、React、Vue、静态站 很低,兼容度高 很强 支持 支持 Serverless / Edge Hobby 免费版更适合个人项目
Cloudflare Pages 静态站、前端站、全球访问需求强的项目 较低 很强 支持 支持 Pages Functions 免费版每月 500 次构建
Netlify 静态站、Jamstack、文档站、前端项目 较低 很强 支持 支持 Functions / Edge 当前免费版采用 credits 额度模型

这篇笔记尽量用新手能直接上手的方式来写。默认你已经有一个网站项目文件夹，或者至少有一份可以直接打开的静态网页文件：index.html、style.css、script.js。

如果你只是想先练手，我建议先克隆现成项目

如果你现在还没有自己的网站项目，我不建议一上来就从零开始写。最省事的路线是：

  1. 先找一个现成的静态网页项目
  2. git clone 到本地
  3. 改成你自己的名字、介绍、图片和链接
  4. 再部署到 GitHub Pages / Vercel / Cloudflare Pages / Netlify

下面这几个 GitHub 项目很适合新手练手：

项目 适合场景 技术 推荐部署平台 链接
just-the-docs-template 文档站、知识库、教程站 Jekyll / GitHub Pages 风格 GitHub Pages just-the-docs/just-the-docs-template
docsify-template 纯文档站、笔记站 Docsify GitHub Pages / Netlify docsifyjs/docsify-template
simplefolio 个人主页、简历页、作品集 HTML / CSS / JS Netlify / Vercel cobiwave/simplefolio
astrofy 更现代一点的个人站、博客、作品集 Astro + Tailwind Vercel / Cloudflare Pages / Netlify manuelernestog/astrofy

那这里我们就选择第四个,我觉得第四个更好看一点

目录

1. 部署前你要准备什么

正式开始前，先准备下面这些东西：

  1. 一个 GitHub 账号。
  2. 一个网站项目,这里我们选择的是 astrofy。
  3. 最好本地已经能跑起来，或者至少已经能成功生成静态文件。

那我们这里就以克隆部署 astrofy 进行示范,如果你想用别的或者自己做一个网页,学会创建 git 仓库并能在本地正常运行也能用我下面的教程在四个平台部署

astrofy 部署

首先复制地址astrofy,我这里喜欢用 github 桌面版进行本地克隆,就以桌面版进行演示

第一行填开源项目地址,第二行写要克隆到本地的地址

然后我们用 vscode 打开这个克隆项目的文件夹,根据项目说明,我们需要运行:

pnpm install
可以看到我没安装 pnpm 这里输入安装指令: ``` npm i -g pnpm ```

安装完之后输入这个:(特么的这老玩意太久不更新,默认用的最新的 sitemap 插件,部署总会失败,必须写这个命令强制插件降级.这问题我搞了一个小时,各位克隆项目一定要找最近更新的)

pnpm add @astrojs/sitemap@3.6.0

注意,如果你连 npm 都不能运行,就去官网上搜索 nodejs 进行下载

安装完之后我们再执行 pnpm install 就成功安装了

安装完毕后,我们运行这个先本地启动一下看看效果

pnpm run dev

打开这个 localhost 链接

可以看到这就是我们的网站,但这哥们的头像太难绷了,我们去换一下

进入 vscode 我们更改代码来实现切换头像

但这个不高亮也太丑了,我们去 vscode 里面下载astro 插件

好的我们已经下好了插件了,也是成功高亮了,根据我的联网搜索,astro 自定义操作如下:

  • 头像：src/components/SideBar.astro，这里当前写的是 src="/profile.webp"，你直接把 public/profile.webp 换成自己的图片，或者改成别的文件名。
  • 侧边栏跳转链接：src/components/SideBarMenu.astro，这里有 Home / Projects / Services / Store / Blog / CV / Contact，把 href 改成你的页面地址就行。
  • 底部外链：src/components/SideBarFooter.astro，这里是 GitHub、Twitter、LinkedIn、RSS 等链接。
  • 首页内容和按钮：src/pages/index.astro，这里能改你的名字、简介、按钮跳转、项目卡片。
  • 网站标题和描述：src/config.ts。

改头像

可以看到图中箭头指向的代码和图片的指向关系,图片一律去放在 public 文件夹

这里放一个薇薇安的头像,名字叫 vva_profile,然后我们把代码改一下

注意他之前 format 写的是 webp,但我们的格式是 png,我们改一下

保存一下网站刷新,可以看到薇薇安也是非常美丽的

改跳转链接

可以看到 href 后面都是可以自己改的,那我把 blog 指向的链接换到我真实的博客地址 www.wjsblog.xyz

改一下

之后保存,我们去网站侧边栏点击 blog,也是直接跳转到我的博客了

更改简介

这老哥在这里写了一堆英文简介,我们把他们改一下

我们简单写一下

回到网站可以看到页面已经变了

我们先把刚刚的更改提交了 左下方随便写,然后我们点 commit,再点 push 就行

如果你左下角不能写东西,它提示你需要 fork,你先 fork 一下,选第二个 for my purpose 就行

那对这个网站的折腾我们就浅尝辄止,有需要的可以自己搜索教程,下面我们开始部署

2. GitHub Pages 部署教程

2.1 GitHub Pages 适合谁

GitHub Pages 最适合：

  • 纯静态网页
  • 个人主页
  • 文档站

但对于我们这个 astrofy 博客来说,他并不适合用 github 部署,反而是一些简单的 html 什么的代码更适合 github 部署

2.2 GitHub Pages 最简单部署方式

astrofy 的部署我们最好不用 github 部署,这里 github 部署演示只展示一个爱心网页的小项目

直接 fork

之后跳转到我们 fork 仓库的页面,点击到图片中的这个位置,branch 选择 main,之后上方会出现网址,由于没有挂域名,还需要挂vpn 打开

可以看到,github 非常适合一些现成的开源项目部署

2.3 哪些项目适合直接这样发

如果仓库里本身就是这些文件：

index.html
about.html
css/
js/
images/

那么你直接用 Deploy from a branch 就行。

2.4 如果你用的是 Vite / Hexo / Hugo

这类项目通常不会直接把最终网页放在仓库根目录，而是先构建出一个产物目录。

常见产物目录：

项目类型 常见构建命令 常见输出目录
Vite npm run build dist
Hexo hexo generate public
Hugo hugo public
Astrofy pnpm build dist

GitHub Pages 默认只让你选：

  • 仓库根目录 /(root)
  • 或者 /docs

所以你有两个思路：

  1. 把最终静态文件放进仓库根目录或 /docs
  2. 用 GitHub Actions 自动构建后再发布

2.5 新手更稳的做法

如果你是新手，我建议：

  • 纯静态 HTML：直接用分支发布
  • 静态博客生成器：优先看该工具有没有现成的 GitHub Pages 部署教程
  • 如果你嫌 Actions 麻烦，直接改用 Vercel 或 Cloudflare Pages，会更轻松

2.6 自定义域名

如果你买了域名：

  1. 进入仓库 Settings -> Pages
  2. 找到 Custom domain
  3. 输入你的域名
  4. 去域名服务商后台配置 DNS

通常：

  • 子域名如 blog.example.com 常用 CNAME
  • 根域名如 example.com 常用 A / ALIAS / ANAME

GitHub 官方也建议你额外做域名验证，避免域名被别人抢绑。

2.7 GitHub Pages 的优缺点

优点：

  • 完全免费
  • 对静态网站非常省心
  • 和 GitHub 仓库天然联动

缺点：

  • 更适合静态站，不适合复杂动态网站
  • 构建和部署自由度不如 Vercel / Netlify
  • 复杂网站部署经常出问题
  • 有使用范围限制，不适合拿来跑商业 SaaS 或敏感交易网站

3. Vercel 部署教程

3.1 Vercel 适合谁

如果你的网站是下面这些，我会优先推荐 Vercel：

  • Next.js
  • React
  • Vue
  • Nuxt
  • Vite
  • 前端作品集
  • 需要预览部署的项目
  • 我们刚刚说的 astrofy

它最大的优点就是：连 GitHub 后，很多项目几乎一键就能部署。

3.2 最常见的部署方式：导入 GitHub 仓库

  1. 打开 Vercel
  2. 注册 / 登录
  3. 选择用 GitHub 登录会最方便
  4. 登录后点击 Add New... -> Project
  5. 选择你要部署的 GitHub 仓库,这里我就用刚刚写的 astrofy
  6. 点击 Import

接下来 Vercel 会自动识别项目类型。

比如：

  • 识别到 Next.js，会自动给你匹配构建方式
  • 识别到 Vite，会自动给你构建命令和输出目录

3.3 部署时常见要填什么(vercel 一般不需要自己填)

通常需要确认这几项：

配置项 常见值
Framework Preset 自动识别即可
Build Command npm run build
Output Directory dist 或 .next 或 public
Install Command npm install 或 pnpm install

如果你不知道怎么填，可以先看本地 package.json 里有没有：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}

如果是这种，就通常代表：

  • 构建命令：npm run build
  • 输出目录：dist

3.4 点击 Deploy

确认后点击 Deploy。

部署完成后，Vercel 会给你一个默认域名，常见像这样： 

https://你的项目名.vercel.app

我们点击这个域名就能进入网页了

以后你只要继续往 GitHub 仓库推送代码，Vercel 通常就会自动重新部署。

3.5 自定义域名

我比较喜欢用 cloudflare 域名解析,具体怎么搞域名我就不说了 现在已经成功加进去了,点击[链接][v-map.wjsblog.xyz]即可进入

3.6 Vercel 的优势

  • 对现代前端框架支持最好
  • GitHub 连上之后自动部署体验很好
  • 默认就有预览链接
  • 自定义域名和 HTTPS 处理很省事

3.7 Vercel 免费版注意事项

截至 2026-05-02，Vercel 的 Hobby 计划是免费计划，定位是个人项目和小规模应用。它支持自动 HTTPS、Git 集成、预览部署，也包含一定的函数调用和流量额度。

如果你只是做博客、作品集、个人工具页，通常完全够用；但如果你准备做高流量正式商业项目，就要留意免费额度和使用条款。

4. Cloudflare Pages 部署教程

4.1 Cloudflare Pages 适合谁

Cloudflare Pages 很适合：

  • 静态博客
  • 文档站
  • 前端站点
  • 想要全球访问更稳一点的网站

它还有一个优点：后续如果你想加一点动态功能，可以用 Pages Functions。

4.2 先登录 Cloudflare

  1. 打开 Cloudflare Pages
  2. 注册 / 登录 Cloudflare 账号
  3. 进入 Cloudflare 后台
  4. 找到 Workers & Pages

4.3 用 Git 集成部署

这是最推荐的方式。

  1. 点击新建项目
  2. 选择 Pages
  3. 选择 Connect to Git
  4. 授权 GitHub 或 GitLab
  5. 选择你的仓库

然后填写构建配置。(一般不需要自己填,他会自己识别)

常见示例：

项目类型 Build command Output directory
纯静态 HTML 不需要 . 或留空看界面要求
Vite npm run build dist
Hexo npx hexo generate public
Hugo hugo public

配置好后点击部署即可。

我用的 astrofy 结果报错了,问了一下 ai 他说Cloudflare 的服务器环境不支持 sharp

那这个 astrofy 是在 cf 部署有点严苛了,我就不部署了

4.4 Cloudflare Pages 的访问地址

部署成功后，通常会生成一个类似下面的地址：

https://你的项目名.pages.dev

4.5 自定义域名

如果你的域名本身就在 Cloudflare 管理，绑定会更舒服。

步骤大致是：

  1. 进入 Pages 项目
  2. 找到 Custom domains
  3. 添加域名
  4. 按提示确认 DNS

4.6 一个很值得注意的点

Cloudflare 官方文档提到：

  • 如果你一开始是用 Git integration 创建的项目，后面不能直接切换成 Direct Upload

所以如果你已经决定以后就走 Git 自动部署，那没问题；但如果你想频繁手动上传构建产物，创建项目前最好先想清楚。

4.7 免费版注意事项

截至 2026-05-02，Cloudflare Pages 免费计划常见限制包括：

  • 每月 500 次构建
  • 单个站点最多 20,000 个文件
  • 单文件最大 25 MiB

对普通博客和作品集来说基本够用，但如果你的网站会产出大量静态文件，或者频繁自动构建，就要注意这个上限。

4.8 如果你要加动态能力

可以继续研究：

  • Pages Functions
  • Workers
  • D1
  • R2

也就是说，Cloudflare Pages 不只是“静态托管”，后面还可以继续往全栈方向加东西。至于这个 workers 可谓是牛的很,我们在之后会讲一下这个 workers

5. Netlify 部署教程

5.1 Netlify 适合谁

Netlify 非常适合：

  • 静态博客
  • 文档站
  • Jamstack 网站
  • 想要部署简单、回滚方便的前端项目

它和 Vercel 很像，都是连接仓库后自动部署。

5.2 用 GitHub 仓库部署

  1. 打开 Netlify
  2. 注册 / 登录
  3. 点击创建站点
  4. 选择 Import from Git
  5. 连接 GitHub
  6. 选择你的仓库

接着填写构建信息。

常见示例：

项目类型 Build command Publish directory
纯静态 HTML 不需要构建 项目根目录或直接手动上传
Vite npm run build dist
Hexo npx hexo generate public
Hugo hugo public

这个 netlify 可能有点傻,我们还需要手动填,因为我刚刚让他自动部署后页面 not found,他没有打包直接部署了

  1. 在 Netlify 你这个项目的页面，点击左侧菜单的 Site configuration（站点配置）。

  2. 在左侧子菜单找到 Build & deploy（构建与部署）。

  3. 找到 Continuous deployment 下面的 Build settings，点击 Edit。

  4. 按下面这样修改：
    • Build command（构建命令）填入：pnpm build
    • Publish directory（发布目录）填入：dist

  5. 点击 Save 保存。

填完点击重新部署

5.3 部署成功后

Netlify 会给你一个默认域名，常见像这样： 

https://随机名.netlify.app

你也可以在后台把它改成更好记的子域名。

5.4 手动拖拽部署也可以

这是 Netlify 对新手特别友好的地方。

如果你手上已经有构建好的静态文件夹，比如：

dist/
public/
site/

那么你甚至可以不连 GitHub，直接把这个文件夹拖到 Netlify 后台进行发布。

这种方式适合：

  • 临时测试
  • 一次性小页面
  • 还不想折腾 Git 自动化的人

5.5 自定义域名

  1. 进入站点后台
  2. 找到 Domain management
  3. 添加自定义域名
  4. 按提示去改 DNS

Netlify 同样支持自动 HTTPS。

5.6 免费版注意事项

截至 2026-05-02，Netlify 官网展示的免费计划是 Free，采用 credits 额度模型，包含：

  • 免费自定义域名与 SSL
  • 无限预览部署
  • 全局 CDN
  • 每月 300 credits

如果你只是个人博客或作品集，一般够用；但如果站点访问量大、函数调用多、流量多，就要留意 credits 消耗。

5.7 Netlify 的优缺点

优点：

  • 部署体验顺手
  • 手动拖拽发布非常适合新手
  • 适合静态站和前端站

缺点：

  • 免费计划现在更依赖 credits 计算，不像以前那样一眼就能看懂
  • 如果你后面想做非常复杂的全栈能力，很多人会更倾向 Vercel 或 Cloudflare
  • 界面略显复杂,看着头疼

6. 建议

如果你是第一次部署网站，我的建议非常直接：

只想最快上线一个简单静态页

选：

  • GitHub Pages
  • 或 Netlify

理由：

  • 概念最少
  • 配置最简单
  • 成本最低

你的网站是 React / Vue / Next.js

选：

  • Vercel

理由：

  • 识别框架能力强
  • 自动部署体验非常好
  • 新手最不容易卡在构建配置上

你想要全球访问、CDN、后面还能扩展函数能力

选：

  • Cloudflare Pages

理由：

  • 静态托管很强
  • 后续还能接 Functions / Workers / D1 / R2

如果你问我“新手先学哪个最值”

我的排序是：

  1. Vercel(功能强大,自动识别能力好)
  2. GitHub Pages(速度快,克隆一下能直接部署)
  3. Cloudflare Pages(识别可能有点弱,有的不支持,但强大在配合 worker 功能)
  4. Netlify(功能最基础,最容易上手,部署速度快)

原因不是 Netlify 不好，而是对现在的新手来说：

  • Vercel 最像“一键部署”
  • GitHub Pages 最适合理解最基础的静态托管
  • Cloudflare Pages 很强，但生态概念稍微多一点
  • Netlify 也很好用，只是当前免费额度模型比以前更需要看文档