约 0 字
0 分钟
手把手教你弄成一个简单网站!
摘要
从零搭建出一个属于自己的公开简单网站，可以用来做个人主页、随笔展示、作品合集、临时分享页面。
markdown
很多小伙伴一直觉得「做网站」是大佬专属技能，需要懂复杂代码、会配置服务器、掌握各种专业知识。其实完全不用！普通人零基础，花30分钟，就能从零搭建出一个属于自己的公开简单网站，可以用来做个人主页、随笔展示、作品合集、临时分享页面。
今天不扯空话，纯干货手把手教学，全程无门槛、不用付费、不用复杂软件、不用写大量代码，看完人人都能做出自己的第一个网站。我们一拍即合！开始！！
## 第一章——网站源码
网站源码的获取可以分为两种招式
**第一招——Github查找法**
找一个合法稳定的加速器开启加速,打开[Github](github.com),首先注册一个GitHub账号,点击上方搜索,查找你想要的项目(如个人主页homepage)!
看中你心仪的像点进去后点击右上的fork按钮，觉得好的话点一下右边的star
你就获取到网页源码了！简单吧🤣
**第二招——徒手编写法**
在桌面新建一个txt格式文件，打开后直接自己输入源码，示例：
```
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个个人网站</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "微软雅黑", sans-serif;
}
body {
background-color: #f5f7fa;
text-align: center;
padding: 80px 20px;
}
.box {
max-width: 800px;
margin: 0 auto;
background: #fff;
padding: 50px 30px;
border-radius: 12px;
box-shadow: 0 2px 15px rgba(0,0,0,0.1);
}
h1 {
color: #222;
margin-bottom: 20px;
font-size: 32px;
}
p {
color: #666;
font-size: 18px;
line-height: 1.8;
margin-bottom: 15px;
}
</style>
</head>
<body>
<div class="box">
<h1>欢迎来到我的个人网站</h1>
<p>大家好！这是我零基础搭建的第一个简单网站。</p>
<p>我可以在这里写自我介绍、分享日常、展示作品、记录学习心得。</p>
<p>2026年，从零开始，持续进步✨</p>
</div>
</body>
</html>
```
编完后保存为HTML格式，直接双击你会发现在浏览器就能打开了！
## 第二章——域名获取
这里有收费和不收费两种方式，我这里说就说不收费的了
打开[DNSHE](https://dnshe.com)
注册一个账户，进入管理后点击左边的免费域名(Free Domain)
点击域名管理,点击注册新域名,然后你自定义一个名字,点击下面的注册就免费弄成了👌
## 第三章——cloudflare托管
打开[Cloudflare](https://dash.cloudflare.com),注册一下
点击左侧"域名",接着点击"添加域名",然后点击"连接域名"
输入你刚才注册的域名的完整地址,继续，选Free，
接着直接继续（不管弹窗），它提示你更新名称服务器(有两个)
返回[DNSHE](https://dnshe.com)，找到刚注册的域名，点管理域名，
点击"DNS服务器",点击"修改DNS服务器"，更改为前面cloudflare页面提供的服务器，改完后保存。
回到cloudflare界面，点击"我已更新名称服务器".......
Five years later................
刷新页面，可以看到你已经将域名托管到cloudflare✌️
补充：托管到cloudflare可以大幅提升访问你域名的速度，并且能免费保护你的网站(cloudflare赛博活菩萨)
## 第四章——部署
在这一章中，我们要见招拆招，每一种招式都要对号入座
**第一章第一招** 不同 github 项目需要不同部署方式，分为 github 直接部署和 cloudflare worker/pages 部署
**方案 1**：GitHub 直接部署（GitHub Pages）
本质：GitHub 免费静态托管服务
只能跑纯静态项目
也就是项目只有 HTML、CSS、JS、图片，没有后端、不需要 Node、Python 服务持续运行。
✅适合项目：
个人主页、博客、展示站
HTML 单页网站、Vue/React 打包之后的产物
文档站点、作品集
❌不能部署：
需要后端接口、服务、数据库
需要持续运行、监听端口的程序
需要环境变量、服务端代码的项目
优点
配置简单，仓库内直接开启，不用跳转第三方平台
和 GitHub 仓库绑定，推送代码自动更新网站
免费自带 用户名.github.io 默认域名
缺点
1. 国内访问速度很慢，经常打不开或者加载巨卡
2. 只能放静态文件，不能运行后端代码
3. 自定义域名需要自己解析，没有自带 CDN 加速
**方案 2**：Cloudflare Pages 部署
Cloudflare Pages 专门用来托管静态站点、前端项目
可以自动拉取你的 GitHub 仓库，云端自动构建、打包、部署
✅适合项目：
Vue、Vite、React、Astro 这类需要构建的前端项目
博客、音乐站、导航页、单页应用
需要 CDN 加速、想要访问速度更快的静态网站
和 GitHub Pages 最大区别：Pages 可以自动执行 npm install、pnpm build，自动打包项目，GitHub‑Pages 默认不会帮你构建
优点
全球 CDN 加速，国内打开速度优于原生 GitHub Pages
免费额度足够个人使用
自动部署：GitHub 提交代码，网站自动更新
可以绑定自己的域名，免费 SSL 证书
缺点
需要配置构建命令、输出目录，Vite 项目最容易踩 build 报错
如果项目有后端代码，单纯 Pages 是跑不起来
**方案 3**：Cloudflare Workers 部署
Workers 是无服务器函数，可以运行轻量级后端、代理、接口项目
它不是用来放普通静态网页文件的！
✅适合项目：
Node 轻量后端、代理类项目
API 接口、中转服务
需要服务端逻辑，但是不需要完整服务器
❌不适合：单纯 HTML 静态网页，用 Worker 部署属于大材小用，配置麻烦
优点
- 响应速度极快
- 按量免费额度足够个人折腾
- 可以设置环境变量，存放密钥、APIkey
缺点
- 有代码大小限制，大型项目跑不了
- 部署方式和静态站点完全不一样
***小技巧*** 怎么判断你的 GitHub 项目该选哪一种？
拿到一个开源项目，第一步先看仓库文件！
👉情况 A：根目录直接有 index.html
项目文件类似
index.html
style.css
main.js
图片文件夹
推荐：GitHub Pages 直接部署，或者 Cloudflare Pages
最简单，几乎零配置
###👉情况 B：有 package.json、vite.config.js
项目是 Vite / Vue / React 源码，需要先打包才能运行
优先 Cloudflare Pages
填写构建命令、输出文件夹，平台自动打包；
也可以本地打包好，手动部署 GitHub Pages
###👉情况 C：项目里面有 worker.js/wrangler.toml
明确标注 Cloudflare Worker 项目
只能 Cloudflare Workers 部署
不要扔到 Pages 里面，百分百部署失败
###👉情况 D：项目说明写了需要启动命令 (node、bun)
需要 npm run start、bun start
优先 Worker，普通静态托管跑不起来
## 三、两种部署保姆步骤
### 方式 A GitHub 原生 Pages 部署（纯静态项目）
1.Fork 或者下载项目上传到自己 GitHub 仓库
2. 打开仓库 → Settings（设置）
3. 侧边栏找到 Pages
4. 源选择：Deploy from a branch
5. 分支选 main /master，文件夹选 /(root)
如果是打包后的项目，选择 docs 文件夹
6. 保存，等待 2‑5 分钟
7. 生成网址 用户名.github.io/仓库名
⚠️坑点提醒
- 国内访问不稳定，经常加载失败
-Vite 源码直接部署会空白！必须先本地 build 打包
### 方式 B‑1 Cloudflare Pages（静态 / 前端项目）
1. 打开 Cloudflare 后台 → Pages → 创建应用 →连接 GitHub
2. 授权，选中你要部署的仓库
3. 项目配置
- 项目名称：随便填
- 生产分支：main
- 构建命令：根据项目填
Vite 项目：pnpm build / npm run build
如果是纯静态不用构建：留空
- 构建输出目录：Vite 默认 dist
4. 保存并部署
等待云端自动安装依赖打包，完成之后得到 pages.dev 域名
常见报错：build 失败
检查：包管理器、node 版本、输出目录是否填错
### 方式 B‑2 Cloudflare Workers 部署
两种部署途径
1.Wrangler 命令行部署（适合有基础）
2.GitHub 绑定 Worker 自动部署
1. 安装 wrangler 工具、登录 Cloudflare 账号
2. 项目目录执行 wrangler deploy
3. 几分钟之后部署成功，获得 workers.dev 网址
⚠️Worker 项目千万不要上传 Pages，结构不一样直接报错
## 四、一张表快速选部署方案
表格
项目类型 .首选部署方式
直接带 index.html 静态网页 .GitHub Pages / Cloudflare Pages
Vite Vue React 前端源码 .Cloudflare Pages
接口 / 代理 / 轻后端项目 .Cloudflare Workers
## 五、新手最容易踩的坑总结
1. 不要把 Vite 源码直接上传 GitHub Pages！没有打包会一片空白
2.Workers≠Pages，不要混为一谈，静态网站硬塞 Worker 部署，配置复杂还容易超限报错
3.Cloudflare Pages 部署 Vite 失败：90% 问题是构建命令、dist 目录没填对
4.GitHub Pages 访问慢，如果需要稳定打开，优先迁移 Cloudflare Pages
5. 不是所有开源项目都可以一键部署，一定要先阅读项目 README 文档，作者一般会标注推荐部署方式
## 六、后续拓展
部署完成之后，你还可以绑定自定义域名、开启缓存、设置自动更新；
如果你拿到新项目不知道该用 Pages 还是 Worker，可以先打开仓库看 README 和文件结构，按上面方法判断。
如果遇到 Build 失败、依赖报错、API 密钥无效、404 空白页等问题，可以单独排查构建日志。
**第一章第二招** ————你的html静态网页
1.打开计算--workers和pages--创建应用程序---创建helloword
直接部署，接着点击"编辑代码"，把你的源码复制粘贴进去，点保存并部署
设置自定义域，绑定域名
2.打开github，创建你自己的项目，上传html文件,保存，按上面操作部署即可
并绑定域名
综上，如果你整个过程都没有问题，你打开域名应该就能访问了。
你如果出现了问题，我建议你问问豆包，它虽然有时很傻，但试试没准能弄成👍👍👍
结语：其实我能取得今天的成果，背后也是长时间的努力，希望大家也有这个兴趣
*三连支持一下，我们下期再见！*❤️
援助名单：@牧童 @半岛铁盒 @😄 @李辰 @詩 @草魚沒有氧氣（蛋蛋家族） @屍塊 @梵语END